首頁 > 開發者 > JavaScript
使用 F12 開發人員工具，Web 開發人員能夠在無需離開瀏覽器的情況下快速調試 JavaScript 代碼。 通過內建到每個 Windows Internet Explorer 9 安裝中，F12 工具可提供一些調試工具（例如，斷點、監視和局部變數查看）以及一個用於訊息和即時代碼執行的控制台。
本主題介紹如何使用 F12 工具來調試你的 JavaScript 代碼。本主題的目的並不是要提供一個全面的調試教程，而是重點介紹可協助你著手使用自己的代碼的工具。從 Internet Explorer 9 中，按 F12 以開啟工具，然後單擊“指令碼”選項卡即可開始使用。
在“指令碼”選項卡中，左側將顯示原始碼窗格，可在其中查看 JavaScript 代碼，設定斷點並逐步執行函數的執行路徑。在右側邊窗格中，可在“控制台”、“監視變數”、“局部變數”、“監視堆棧”和“斷點”選項卡之間進行切換。
啟動和停止偵錯工具
首次開啟 F12 工具並單擊“指令碼”選項卡時，會在左側顯示代碼，在右側顯示控制台。在控制台中，可能會顯示一條訊息："重新整理此頁以查看 F12 工具開啟前可能已出現的訊息。 "當重新整理網頁時，控制台會向你顯示瀏覽器發出的任何錯誤或警告。
若要能夠設定斷點，查看監視和局部變數，以及查看一系列函數的呼叫堆疊，則單擊“開始調試”按鈕。通過按“開始調試”按鈕，可以重新整理網頁並在偵錯工具中重新啟動代碼。
使用控制台尋找文法和其他代碼錯誤
在大多數編碼項目中，錯誤通常包含文法、邏輯或資料輸入錯誤。控制台視圖將顯示 JavaScript 錯誤和異常，以及文件物件模型 (DOM) 異常。在你的代碼內部，你可使用控制台對象將狀態和程式錯誤訊息發送到控制台，而不是使用 "alert()" 調用或螢幕空間。例如，你可以向 JavaScript 代碼中添加一行（如
JavaScript
window.console.log("The file opened successfully");）以在指令碼中擷取狀態，而不中斷執行。 有關使用控制台的詳細資料，請參閱使用 F12 工具控制台查看錯誤和狀態。
使不美觀的指令碼更美觀
F12 工具可在行或語句層級調試 JavaScript，而不管代碼是否按行或語句顯示。那些大塊的編寫緊湊的代碼仍可逐步執行。不過，如果將代碼全部放在一個代碼塊中，則有時很難遵循邏輯。
若要設定指令碼格式或“出色列印”指令碼，請單擊“配置”按鈕 ，然後單擊“格式化 JavaScript”。以下螢幕快照展示 JavaScript 代碼塊在格式化之前和之後的對比。
中斷代碼執行
在 F12 工具中設定斷點的方式與在二進位代碼偵錯工具（例如，Microsoft Visual Studio）中的方式相似。在左側邊窗格中，單擊要中斷的程式碼的左側。斷點是可以切換的，因此可以單擊以添加斷點，再次單擊以移除斷點。
可以向代碼中添加所需任意數量的斷點。可以按右鍵程式碼並單擊“插入斷點”，或者單擊要中斷的語句旁邊的左邊距。
通過使用 F12 工具，可在語句層級設定斷點，即使這些語句位於多語句塊或行中也是如此。從而能夠在緊湊的代碼節內進行中斷。在這些條件下設定斷點的最好方式是，按右鍵代碼，然後從捷徑功能表中單擊“插入斷點”。還可使用前面介紹的指令碼格式化（美觀顯示）功能來對程式碼進行格式化，以方便在頁面邊界中進行單擊。
通過使用“斷點”選項卡管理多個斷點
如果你具有包含很多斷點（甚至跨多個檔案）的大型程式碼程式庫，則“斷點”選項卡可協助你跟蹤所有這些斷點。 在“指令碼”選項卡中，單擊屬性窗格（右側邊窗格）中的“斷點”選項卡。有關樣本，請參閱。
通過“斷點”選項卡，可以啟用或禁用、刪除、選擇並複製斷點，而無需轉到要設定它們的確切位置。若要開啟或關閉某個斷點，請單擊要更改的設定旁邊的複選框。通過雙擊列表，可立即跳轉到代碼中的斷點。通過按 Ctrl 鍵並單擊多個斷點，可選擇多個斷點。
“斷點”選項卡還具有一個捷徑功能表（當你按右鍵時可用），可讓你大量刪除、啟用、禁用或複製斷點。下表中顯示了相關選項。
| 功能表項目 | 作用 |
|---|---|
| 刪除 | 永久刪除斷點。 |
| 全部刪除 | 永久刪除所有斷點。 |
| 全部啟用 | 設定列表中的所有複選框。 |
| 全部禁用 | 清除列表中的所有複選框。 |
| 條件 | 允許為斷點設定條件斷點。如果選擇了多個斷點，則此選項禁用。 |
| 複製 | 複製所選擇的斷點描述的文本。 |
| 全選 | 反白列表中的所有斷點。 |
| 轉到原始碼 | 導航左側程式碼窗格以顯示所選的斷點。如果選擇了多個斷點，則此選項禁用。 |
條件斷點
無條件地中斷一行代碼是很有協助的，但在某個屬性或變數到達特定值時中斷甚至更為有用。若要在到達或設定特定值時中斷，請設定斷點，然後開啟“斷點”選項卡。按右鍵要使用的斷點，然後單擊“條件”。
在“條件”對話方塊中，添加有效 JavaScript 語句。運行代碼時，如果該語句為 True，則代碼將在斷點處停止運行。例如，在中，當 oAudio.paused 屬性為 False 時，代碼將停止運行。
你既可以使用單一條件，也可以通過使用邏輯語句根據更加複雜的條件進行斷開。但請記住，變數和對象的範圍將是相同的，就好像在監看式視窗中在斷點處對其進行檢查一樣。如果使用某個不在範圍中的條件，則不會將該條件計算為 True。
逐步執行代碼
當代碼執行在某個斷點處停止時，可使用導覽按鈕來繼續執行函數 (F5)、全部中斷執行函數 (Ctrl+Shift+B) 或逐語句執行函數 (F11)、逐過程執行函數 (F10) 或跳出函數執行 (Shift+F11)。當在斷點處暫停執行或正逐步執行時，調試視窗實際上是強制回應視窗。
正因如此，當再次與網頁互動前，需要停止調試 (Shift+F5) 或繼續執行代碼 (F5)。如果你的網頁似乎無法做出響應，則記住這一點是很有必要的。如果開啟了多個視窗，而偵錯工具沒有位於頂部，則它可能正在斷點上等待響應。如果發生這種情況，請在調試視窗找到相應的網頁並按 F5 繼續執行代碼，或按 Shift+F5 停止調試以將控制權歸還給網頁。
使用“監視”和“局部變數”選項卡監視變數
使用“監視”選項卡，可以在代碼中設定並監視變數。其中將會列出指定的變數的名稱、值和類型。可在“監視”選項卡中單擊標記為“單擊以添加...”的行，並鍵入變數名稱。如果不想鍵入變數名稱，則可將其複製並粘貼到“監視”列表中。
監視變數列表將顯示你是否正在調試代碼的值。開啟調試並跟蹤代碼或已設定斷點時，列表中變數值的範圍就是你在指令碼中所處的位置。如果關閉調試，則範圍為全域，並且只有全域變數才會顯示值。
與“監視”選項卡（顯示變數是否超出範圍）不同，“局部變數”選項卡視圖僅顯示當前範圍中的變數。你無需添加要監視的變數，因為它會隨著範圍的更改更新所有可用的變數。
若要查看不同之處，請在 Internet Explorer 9 中開啟以下樣本並按照步驟操作。
<!DOCTYPE html><html><head> <title>JavaScript debugging example</title> <script type="text/javascript"> //create a global variable for our <div> var display; function init() { //initialize only after the HTML has been loaded display = document.getElementById("results"); } function firstParam() { //set breakpoint here var a = 5; secondParam(a); } function secondParam(a) { var b = 10; thirdParam(a, b); } function thirdParam(a, b) { var c = 15; var d = a + b + c; //display to console if F12 tools is open if (window.console && window.console.log) { window.console.log(a + " + " + b + " + " + c + " = " + d); } else { display.innerText = a + " + " + b + " + " + c + " = " + d; } } </script></head><body onload="init();"> <p><button onclick="firstParam();">Run</button></p> <div id="results"></div></body></html>
function firstParam() { //set breakpoint here var a = 5; secondParam(a);}在逐步執行每個函數時，應看到監視的值會從未定義更改為某個值。
若要通過“局部變數”選項卡查看差別，請按 F5 繼續使用 F12 工具。在瀏覽器中，單擊網頁上的“運行”按鈕以重新運行代碼，並返回到 F12 工具。 在“指令碼”選項卡的右側邊窗格中，單擊“局部變數”選項卡，並按 F11 以再次逐步執行函數。在局部變數列表中，請注意其中僅列出了包含值的變數。 “局部變數”視圖還將顯示傳遞到某個函數的參數、參數值以及類型。
查看呼叫堆疊
使用“呼叫堆疊”選項卡，可以查看從你的代碼中調用函數時所採用的路徑。這可協助你作為 Bug 發現意外的代碼路徑。 通過“呼叫堆疊”選項卡中，可雙擊任意函數，並轉到原始碼中相應的調用。
嘗試前面所提到的樣本，並在跟蹤函數時，查看“呼叫堆疊”選項卡。
在“呼叫堆疊”選項卡中，當前函數或位置總是位於頂部（在“呼叫堆疊”選項卡中和字碼頁邊距中，箭頭指向的位置）。雙擊列表中的任意函數時，將反白調用該函數的語句。
調試多個指令碼
大型網頁通常包含多個 JavaScript 檔案。使用 F12 工具，可以在調試代碼時對多個指令檔進行操作。若要查看不同的檔案，請單擊“開始調試”按鈕旁邊的向下箭頭，以顯示與網頁關聯的指令碼的列表。使用 F12 工具逐步執行代碼時，F12 工具將遵循跨越多個檔案的執行路徑。你可添加變數以從任意指令檔中進行監視，“呼叫堆疊”視圖將顯示跨不同指令檔中所包含的函數的執行路徑。
更改文檔模式設定
“菜單”欄右側的“文檔模式”設定可以用於 F12 工具的任何選項卡，但在“指令碼”選項卡中調試代碼時尤其有用。使用 Internet Explorer 9，可以更改文檔模式以類比早期版本的 Windows Internet Explorer 的標準。在 Internet Explorer 9 中，停止使用 <!doctype> 聲明會導致將文件類型預設設定為 Quirks 模式。使用新功能或標準功能（例如 HTML5 audio 或canvas）時，有些可能看起來是編碼錯誤的 Bug 實際上是缺少文件類型聲明或文件類型聲明不正確造成的。
Internet Explorer 9 F12 工具無法為你修複代碼，但它可以使尋找 JavaScript 錯誤更容易一點。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
