使用 F12 開發人員工具，Web 開發人員能夠在無需離開瀏覽器的情況下快速調試 JavaScript 代碼。 通過內置到每個 Windows Internet Explorer 9 安裝中，F12 工具可提供一些調試工具（例如，斷點、監視和局部變量查看）以及一個用於消息和即時代碼執行的控制台。
本主題介紹如何使用 F12 工具來調試你的 JavaScript 代碼。本主題的目的並不是要提供一個全面的調試教程，而是重點介紹可幫助你着手使用自己的代碼的工具。從 Internet Explorer 9 中，按 F12 以打開工具，然后單擊“腳本”選項卡即可開始使用。
在“腳本”選項卡中，左側將顯示源代碼窗格，可在其中查看 JavaScript 代碼，設置斷點並逐步執行函數的執行路徑。在右側窗格中，可在“控制台”、“監視變量”、“局部變量”、“監視堆棧”和“斷點”選項卡之間進行切換。
啟動和停止調試程序
首次打開 F12 工具並單擊“腳本”選項卡時，會在左側顯示代碼，在右側顯示控制台。在控制台中，可能會顯示一條消息："刷新此頁以查看 F12 工具打開前可能已出現的消息。 "當刷新網頁時，控制台會向你顯示瀏覽器發出的任何錯誤或警告。
若要能夠設置斷點，查看監視和局部變量，以及查看一系列函數的調用堆棧，則單擊“開始調試”按鈕。通過按“開始調試”按鈕，可以刷新網頁並在調試程序中重新啟動代碼。
使用控制台查找語法和其他代碼錯誤
在大多數編碼項目中，錯誤通常包含語法、邏輯或數據輸入錯誤。控制台視圖將顯示 JavaScript 錯誤和異常，以及文檔對象模型 (DOM) 異常。在你的代碼內部，你可使用控制台對象將狀態和程序錯誤消息發送到控制台，而不是使用 "alert()" 調用或屏幕空間。例如，你可以向 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>
- 在 Internet Explorer 9 中，加載示例。
- 按 F12 打開 F12 工具，並單擊“腳本”選項卡
- 在左側窗格中，滾動到第一個函數，右鍵單擊內容為 "var a = 5;" 的行，然后單擊“插入斷點”。
function firstParam() { //set breakpoint here var a = 5; secondParam(a); }
- 單擊“開始調試”，然后在瀏覽器中的網頁上，單擊“運行”按鈕。
- 在 F12 工具中，單擊右側的“監視”選項卡，然后添加變量 "a、b、c 和 d"。
- 通過按 F11 逐步執行代碼，或者單擊“單步執行”按鈕，並監視“監視”選項卡上的變量。
在逐步執行每個函數時，應看到監視的值會從未定義更改為某個值。
若要通過“局部變量”選項卡查看差別，請按 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 錯誤更容易一點。