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

來源:互聯網
上載者:User

  使用 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>
  1. 在 Internet Explorer 9 中,載入樣本。
  2. 按 F12 開啟 F12 工具,並單擊“指令碼”選項卡
  3. 在左側邊窗格中,滾動到第一個函數,按右鍵內容為 "var a = 5;" 的行,然後單擊“插入斷點”。
    function firstParam() {    //set breakpoint here     var a = 5;    secondParam(a);}
  4. 單擊“開始調試”,然後在瀏覽器中的網頁上,單擊“運行”按鈕。
  5. 在 F12 工具中,單擊右側的“監視”選項卡,然後添加變數 "a、b、c 和 d"。
  6. 通過按 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 錯誤更容易一點。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.