IE調試網頁之五：使用 F12 開發人員工具調試 JavaScript 錯誤 (Windows)

　　使用 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，而不管代碼是否按行或語句顯示。那些大塊的編寫緊湊的代碼仍可逐步執行。不過，如果將代碼全部放在一個代碼塊中，則有時很難遵循邏輯。

　　若要設置腳本格式或“出色打印”腳本，請單擊“配置”按鈕 Gg699336.f12_configurationbutton(zh-cn,VS.85).png ，然后單擊“格式化 JavaScript”。以下屏幕快照展示 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 錯誤更容易一點。

posted @ 2013-02-27 16:45 artwl 閱讀(22852) 評論(0) 收藏舉報

刷新頁面返回頂部

個人簡介

var ME = {
	"name": "土豆/Artwl",
	"job": "coding",
	"languages": [
		"JS", "HTML",
                "CSS", "jQuery"
		"MVC",".NET",
		"設計模式"
	],
	"hobby": [
		"閱讀", "旅游",
		"音樂", "電影"
	]
}

TOP

IE調試網頁之五：使用 F12 開發人員工具調試 JavaScript 錯誤 (Windows)

公告

個人簡介