在 Chrome DevTools 中調試 JavaScript 入門

在 Chrome DevTools 中調試 JavaScript 入門

若是您使用 console.log() 來查找和修正代碼中的錯誤，能夠考慮改用本教程介紹的工做流程。 其速度快得多，也更有效。

第 1 步：重現錯誤

重現錯誤始終是調試的第一步。「重現錯誤」是指找到一系列老是能致使錯誤出現的操做。

您可能須要屢次重現錯誤，所以要儘可能避免任何多餘的步驟。

第 2 步：使用斷點暫停代碼

DevTools 讓您能夠暫停執行中的代碼，並對暫停時刻的全部變量值進行檢查。 用於暫停代碼的工具稱爲斷點。 當即試一試：

按 Command+Option+I (Mac) 或 Ctrl+Shift+I（Windows、Linux）在演示頁面上打開 DevTools。

1. 點擊 Sources 標籤。

2. 點擊 Event Listener Breakpoints 將該部分展開。DevTools 顯示一個包含 Animation 和 Clipboard 等可展開事件類別的列表。

3. 在 Mouse 事件類別旁，點擊 Expand Expand 圖標。

DevTools 顯示一個包含 click 等 Mouse 事件的列表，事件旁有相應的複選框。 1. 選中 click 複選框。

返回至演示頁面，再次點擊 Add Number 1 and Number 2。DevTools 暫停演示並在 Sources 面板中突出顯示一行代碼。

當您選中 click 複選框時，就是在全部 click 事件上設置了一個基於事件的斷點。 點擊了任何節點，而且該節點具備 click 處理程序時，DevTools 會自動暫停在該節點 click 處理程序的第一行。

注：這不過是 DevTools 提供的衆多斷點類型中的一種。應使用的斷點類型取決於您要調試的問題類型。

第 3 步：單步調試代碼

一個常見的錯誤緣由是腳本執行順序有誤。 能夠經過單步調試代碼一次一行地檢查代碼執行狀況，準確找到執行順序異常之處。

從左到右依次爲:

• 重置調試器,使用後會當即回覆到未暫停的狀態

• 跳過函數調用, 使用後不會進入函數聲明裏,而是直接在當前函數裏出結果

• 單步, 一般狀況下也會單步庫代碼

• 直接從當前函數退出,將回退到上一個調用它的函數,這個通常用於函數體很長想要當即退出時使用

第 4 步：設置另外一個斷點

打完另外的斷點後, 重置調試器會變成單步(只執行斷點)的調試。

第 5 步：檢查變量值

使用watch

能夠看出watch裏能夠填表達式。

第 6 步：應用修正

您已找到錯誤的潛在解決方法。剩下的工做就是編輯代碼後從新運行演示頁面來測試修正效果。 您沒必要離開 DevTools 就能應用修正。 您能夠直接在 DevTools UI 內編輯 JavaScript 代碼。 當即試一試：

1. 在 DevTools 的 Sources 面板上的代碼編輯器中，將 var sum = addend1 + addend2 替換爲 var sum = parseInt(addend1) + parseInt(addend2);。它就是您當前暫停位置上面那行代碼。

2. 按 Command+S (Mac) 或 Ctrl+S（Windows、Linux）保存更改。代碼的背景色變爲紅色，這表示在 DevTools 內更改了腳本。

3. 點擊 Deactivate breakpoints 停用斷點。它變爲藍色，表示處於活動狀態。 若是進行了此設置，DevTools 會忽略您已設置的任何斷點。

4. 點擊 Resume script execution

5. 使用不一樣的值測試演示頁面。如今演示頁面應能正確計算求和

切記，此工做流程只對運行在瀏覽器中的代碼應用修正。 它不會爲全部運行您的頁面的用戶修正代碼。 要實現該目的，您須要修正運行在提供頁面的服務器上的代碼。

注意要按一次保存

後續步驟

恭喜！如今您已掌握了在 DevTools 中調試 JavaScript 的基礎知識。

本教程只向您介紹了兩種設置斷點的方法。DevTools 還提供了許多其餘方法，其中包括：

• 僅在知足您指定的條件時觸發的條件斷點。

• 發生已捕獲或未捕獲異常時觸發的斷點。

• 當請求的網址與您提供的子字符串匹配時觸發的 XHR 斷點。