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

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

為了方便理解，我寫了一個(gè)小demo。

點(diǎn)擊打開demo；

在num1中輸入6；

在num2中輸入9；

點(diǎn)擊 num1+num2，按鈕下方的標(biāo)簽顯示 69，結(jié)果應(yīng)為 15，這就是我們需要斷點(diǎn)調(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 面板。點(diǎn)擊 Sources 面板。

Sources 面板包含 3 個(gè)部分：

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

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

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

三、使用斷點(diǎn)暫停代碼

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

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

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

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

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

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

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

點(diǎn)擊頁面中的num1+num2按鈕。此時(shí)頁面如下圖：

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

四、檢查變量的值

1. Scope窗口

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

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

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

3. 控制臺

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

在 Console 中，輸入 `parseInt(n) + parseInt(u)`。 此語句有效，因?yàn)槲覀儠谔囟ùa行暫停，其中 `n`（num1的值） 和 `u`（num2的值） 在范圍內(nèi)。

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

五、嘗試修改

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

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

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

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

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

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

六、介紹其他幾種斷點(diǎn)

1. 代碼行斷點(diǎn)

直接點(diǎn)擊

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

debugger

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

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

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

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

2. DOM更新斷點(diǎn)

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

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

Subtree

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

4. XHR/Fetch斷點(diǎn)

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

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

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

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

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

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

5. 事件偵聽器斷點(diǎn)

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

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

6. 異常斷點(diǎn)

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

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

7.函數(shù)斷點(diǎn)

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

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)。所以一般還不如直接使用代碼行斷點(diǎn)！

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

最新評論