由淺入深說一說怎么樣在 Chrome DevTools 中調(diào)試 JavaScript。

一、案發(fā)現(xiàn)場

為了方便理解，我寫了一個小demo。

點擊打開demo；

在num1中輸入6；

在num2中輸入9；

點擊 num1+num2，按鈕下方的標(biāo)簽顯示 69，結(jié)果應(yīng)為 15，這就是我們需要斷點調(diào)試找出的 BUG 。

二、熟悉一下 Sources 面板

DevTools 可為更改 CSS、分析頁面加載性能和監(jiān)控網(wǎng)絡(luò)請求等不同的任務(wù)提供許多不同的工具。 我們就在 Sources 面板中調(diào)試 JavaScript。

通過按 Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux），打開 DevTools。 此快捷方式可打開 Console 面板。點擊 Sources 面板。

Sources 面板包含 3 個部分：

文件預(yù)覽 窗口。 此處列出頁面請求的每個文件。

代碼編輯 窗口。 在 文件預(yù)覽 窗口中選擇文件后，此處會顯示該文件的具體內(nèi)容。

JavaScript 調(diào)試 窗口。 包含檢查頁面 JavaScript 的各種工具。 如果 DevTools 窗口布局較窄，此窗口會顯示在 代碼編輯 窗口下方。

三、使用斷點暫停代碼

調(diào)試上面這種問題的常用方法是將多個 console.log() 語句插入代碼，以便在執(zhí)行腳本的時候檢查相關(guān)變量的值。

雖然 console.log() 方法可以完成任務(wù)，但斷點可以更快完成此任務(wù)。 斷點可在執(zhí)行代碼的過程中暫停代碼，并在此時及時檢查所有相關(guān)變量的值。 與 console.log() 方法相比，斷點具有一些優(yōu)勢：

1. 使用 console.log()，需要手動打開源代碼，查找相關(guān)代碼，插入 console.log() 語句，然后重新加載此頁面，才能在控制臺中看到這些消息。 使用斷點，無需了解代碼結(jié)構(gòu)即可暫停相關(guān)代碼。
2. 在 console.log()語句中，您需要明確指定要檢查的每個值。 使用斷點，DevTools 會在暫停時及時顯示所有變量值。簡言之，與 console.log() 方法相比，斷點可以更快地查找和修正 BUG 。

接下來我們開始思考一開始拋出的程序的運作方式，我們可以根據(jù)經(jīng)驗推測出，我們在點擊num1+num2按鈕的時候觸發(fā)的 click 事件肯定和 6+9=69 計算不正確有關(guān)系。 因此，我們可能需要在 click 偵聽器運行的時候暫停代碼。
Event Listener Breakpoints 可以完成此任務(wù)：

在 JavaScript 調(diào)試 窗口中，點擊 Event Listener Breakpoints 前面的展開按鈕。 可以看見 Animation、Canvas、Clipboard 等一系列事件；

在頁面輸入框中輸入num1和num2的值；

展開 Mouse 事件，每個事件旁都有一個復(fù)選框。勾選 click 復(fù)選框。 DevTools 現(xiàn)在可以在任何 click 事件偵聽器運行時自動暫停。

點擊頁面中的num1+num2按鈕。此時頁面如下圖：

這是因為我裝的瀏覽器插件導(dǎo)致的定位不準(zhǔn)，最好在無痕模式進行操作。不過也不影響，我們點擊一下最左邊頁面上的藍色按鈕，再點擊中間的打括號（格式化代碼），就可以定位準(zhǔn)確并且格式化好代碼：

四、檢查變量的值

1. Scope窗口

在某代碼行暫停時，Scope 窗格會顯示當(dāng)前定義的局部和全局變量，以及各變量值。 其中還會顯示閉包變量（如果適用）。 雙擊變量值可進行編輯。 如果不在任何代碼行暫停，則 Scope 窗格為空。

2. Watch監(jiān)聽變量變化

Watch 標(biāo)簽可監(jiān)視變量值隨時間變化的情況。 并且，監(jiān)視不僅限于監(jiān)視變量。 我們可以將任何有效的 JavaScript 表達式存儲在監(jiān)視表達式中。 我們嘗試這樣：
- 點擊 Watch 標(biāo)簽。
- 點擊 右邊的 + 添加表達式。
- 輸入 typeof n。 按 Enter 鍵。（這里代碼是打包后的，n表示num1輸入框的值）
- DevTools 會顯示 typeof n: "string"。 冒號右側(cè)的值就是監(jiān)視表達式的結(jié)果。

3. 控制臺

控制臺除了查看 console.log() 消息以外，還可以使用控制臺對任意 JavaScript 語句求值。 對于調(diào)試，可以使用控制臺測試 BUG 的潛在解決方法:

在 Console 中，輸入 `parseInt(n) + parseInt(u)`。 此語句有效，因為我們會在特定代碼行暫停，其中 `n`（num1的值） 和 `u`（num2的值） 在范圍內(nèi)。

按 Enter 鍵。 DevTools 對語句求值并打印輸出 15，即我們預(yù)計demo頁面會產(chǎn)生的結(jié)果。

五、嘗試修改

上一步我們已找到解決 BUG 的方法。 接下來就是嘗試通過編輯代碼并重新運行demo來使用修正方法。 我們可以在 代碼編輯 窗口直接修改代碼：

在 代碼編輯 窗口中，將代碼格式化關(guān)掉，然后修改代碼，將 n+u 換成 parseInt(n)+parseInt(u) 。

按 Command+S (Mac) 或 Control+S（Windows、Linux）以保存更改。

點擊 Deactivate breakpoints 取消激活斷點。 其將變?yōu)樗{色，表示處于活動狀態(tài)。 在完成此設(shè)置后，DevTools 會忽略您已設(shè)置的任何斷點。

點擊num1+num2按鈕，則會看見正確的結(jié)果啦！

Tips: 這樣做只能修正在瀏覽器中運行的代碼， 不能為訪問您頁面的所有用戶修正代碼。 為此，我需要修改自己服務(wù)器上的代碼。

六、介紹其他幾種斷點

1. 代碼行斷點

直接點擊

這是使用最多的一種斷點方式，在知道需要檢查的確切代碼區(qū)域時，可以使用代碼行斷點。 DevTools 始終會在執(zhí)行此代碼行之前暫停。

debugger

在代碼中調(diào)用 debugger 可在該行暫停。 此操作相當(dāng)于使用代碼行斷點，只是此斷點是在代碼中設(shè)置，而不是在 DevTools 界面中設(shè)置。

console.log('a');
console.log('b');
debugger;
console.log('c');

條件代碼斷點
如果知道需要調(diào)查的確切代碼區(qū)域，但只想在其他一些條件成立時進行暫停，則可使用條件代碼行斷點。若要設(shè)置條件代碼行斷點：

1. 點擊 Sources 標(biāo)簽。
2. 打開包含您想要中斷的代碼行的文件。
3. 轉(zhuǎn)至代碼行。
4. 代碼行的左側(cè)是行號列。
5. 右鍵點擊行號列。
6. 選擇 Add conditional breakpoint。
7. 代碼行下方將顯示一個對話框。
8. 在對話框中輸入條件。
9. 按Enter 鍵激活斷點。 行號列頂部將顯示一個橙色圖標(biāo)。

2. DOM更新斷點

如果想要暫停更改 DOM 節(jié)點或其子級的代碼，可以使用 DOM 更改斷點。若要設(shè)置 DOM 更改斷點：

• 點擊 Elements 標(biāo)簽。
• 轉(zhuǎn)至要設(shè)置斷點的元素。
• 右鍵點擊此元素。
• 將鼠標(biāo)指針懸停在Break on 上，然后選擇 Subtree modifications、Attribute modifications 或 Node removal。
  

Subtree

• modifications： 在移除或添加當(dāng)前所選節(jié)點的子級，或更改子級內(nèi)容時觸發(fā)這類斷點。在子級節(jié)點屬性發(fā)生變化或?qū)Ξ?dāng)前所選節(jié)點進行任何更改時不會觸發(fā)這類斷點。
• Attributes modifications：在當(dāng)前所選節(jié)點上添加或移除屬性，或?qū)傩灾蛋l(fā)生變化時觸發(fā)這類斷點。
• Node Removal：在移除當(dāng)前選定的節(jié)點時會觸發(fā)。

4. XHR/Fetch斷點

如果想在 XHR 的請求網(wǎng)址包含指定字符串時中斷，可以使用 XHR 斷點。 DevTools 會在 XHR 調(diào)用 send() 的代碼行暫停。

注：此功能還可用于 Fetch 請求。

例如，在您發(fā)現(xiàn)您的頁面請求的是錯誤網(wǎng)址，并且您想要快速找到導(dǎo)致錯誤請求的 AJAX 或 Fetch 源代碼時，這類斷點很有用。

若要設(shè)置 XHR 斷點：

• 點擊 Sources 標(biāo)簽。
• 展開 XHR Breakpoints 窗格。
• 點擊 Add breakpoint。
• 輸入要對其設(shè)置斷點的字符串。 DevTools 會在 XHR 的請求網(wǎng)址的任意位置顯示此字符串時暫停。
• 按 Enter 鍵以確認(rèn)。
  

這樣就可以攔截包含getUserInfo字符串的請求，如果添加一個空的，則可以攔截所有請求！

5. 事件偵聽器斷點

如果想要暫停觸發(fā)事件后運行的事件偵聽器代碼，可以使用事件偵聽器斷點。 您可以選擇 click 等特定事件或所有鼠標(biāo)事件等事件類別。

我們一開始使用的例子就是事件偵聽器斷點，這里就不演示了。

6. 異常斷點

如果想要在引發(fā)已捕獲或未捕獲異常的代碼行暫停，可以使用異常斷點。

• 點擊 Sources 標(biāo)簽。
• 點擊 Pause on exceptions 引發(fā)異常時暫停 {:.devtools-inline}。 啟用后，此按鈕變?yōu)樗{色。
• （可選）如果除未捕獲異常以外，還想在引發(fā)已捕獲異常時暫停，則勾選 Pause On Caught Exceptions 復(fù)選框。
  

7.函數(shù)斷點

如果想要在調(diào)用特定函數(shù)時暫停，可以調(diào)用 debug(functionName)，其中 functionName 是要調(diào)試的函數(shù)。 您可以將 debug() 插入您的代碼（如 console.log() 語句），也可以從 DevTools 控制臺中進行調(diào)用。 debug() 相當(dāng)于在第一行函數(shù)中設(shè)置代碼行斷點。

function sum(a, b) {
 let result = a + b; // DevTools 會在此行暫停
 return result;
}
debug(sum); // 傳遞函數(shù)對象，而不是字符串。
sum();

如果想要調(diào)試的函數(shù)不在范圍內(nèi)，DevTools 會引發(fā) ReferenceError。

(function () {
 function hey() {
 console.log('hey');
 }
 function yo() {
 console.log('yo');
 }
 debug(yo); // 這行可以成功調(diào)用
 yo();
})();
debug(hey); // 這一行不能成功調(diào)用 hey() 不在作用域內(nèi)

如果是從 DevTools 控制臺中調(diào)用 debug()，則很難確保目標(biāo)函數(shù)在范圍內(nèi)。所以一般還不如直接使用代碼行斷點！

到此這篇關(guān)于在Chrome DevTools中調(diào)試JavaScript的實現(xiàn)的文章就介紹到這了,更多相關(guān)Chrome DevTools調(diào)試JavaScript內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論