學(xué)習(xí)如何使用Chrome DevTools調(diào)試JavaScript

不再使用console.log！ 學(xué)會(huì)在Chrome Developer Tools中使用斷點(diǎn)來(lái)調(diào)試代碼。

作為一名新的開(kāi)發(fā)人員，發(fā)現(xiàn)和修復(fù)bug挺難的。 您可能會(huì)試圖隨意使用 console.log() 來(lái)調(diào)試代碼使代碼正常工作。 不要再這樣了

這篇文章是關(guān)于正確調(diào)試的方法！ 您將了解如何使用Chrome開(kāi)發(fā)人員工具來(lái)設(shè)置斷點(diǎn)并逐步完成代碼。這是更有效的在代碼中查找和修復(fù)bug的方法。

本教程將向您展示如何調(diào)試一個(gè)具體bug，您學(xué)到的方法將有助于您調(diào)試以后遇到的的JavaScript錯(cuò)誤。

Step 1:重現(xiàn)錯(cuò)誤

重現(xiàn)錯(cuò)誤是調(diào)試的***步。 “再現(xiàn)錯(cuò)誤”意味著找到一系列持續(xù)導(dǎo)致錯(cuò)誤出現(xiàn)的動(dòng)作。 您可能需要重復(fù)該錯(cuò)誤多次，所以嘗試消除任何不必要的步驟。

按照以下說(shuō)明重現(xiàn)您將在本教程中解決的bug。

• 這是我們將在本教程中使用的網(wǎng)頁(yè)。 確保在新標(biāo)簽頁(yè)中打開(kāi)此頁(yè)面： 打開(kāi)本頁(yè) .

• 在 Number 1 輸入 5 .

• 在 Number 2 輸入 1 .

• 點(diǎn)擊 Add Number 1 and Number 2.

• 看看輸入和按鈕下方的標(biāo)簽。 顯示 5 + 1 = 51 .

哎呦。結(jié)果是錯(cuò)的。 結(jié)果應(yīng)該是6。 這是您要修復(fù)的錯(cuò)誤。

Step 2: 用斷點(diǎn)暫停代碼

DevTools允許您在執(zhí)行過(guò)程中暫停代碼，并在此時(shí)檢查 所有 變量的值。 暫停代碼的工具稱(chēng)為 斷點(diǎn) 。 現(xiàn)在就試試：

• 返回例子并按Command + Option + I（Mac）或Control + Shift + I（Windows，Linux）打開(kāi)DevTools。

• 點(diǎn)擊 Sources 面板.

• 點(diǎn)擊 Event Listener Breakpoints 打開(kāi)該面板. DevTools 展示了所有事件的列表, 例如 Animation 和 Clipboard .

• 然后 找到 Mouse 事件類(lèi)別, 點(diǎn)擊 打開(kāi)該列表

• 選中 click 復(fù)選框.

• 返回例子 ，再次點(diǎn)擊 Add Number 1 and Number 2 。DevTools暫停代碼，高亮顯示 Sources 面板中一行代碼。如下：

function onClick() {`

為什么?

當(dāng)你選中 click’ , 你為所有 click 事件設(shè)置了一個(gè)基于事件的斷點(diǎn)。 當(dāng) 任意 節(jié)點(diǎn)被點(diǎn)擊, 并且該節(jié)點(diǎn)有一個(gè) click 事件, DevTools 自動(dòng)暫停在該節(jié)點(diǎn)的 click 事件.

步驟3：跳到下一行

錯(cuò)誤的一個(gè)常見(jiàn)原因是腳本以錯(cuò)誤的順序執(zhí)行。 通過(guò)代碼，您可以一行一行遍歷代碼執(zhí)行，并確定其與預(yù)期執(zhí)行不同的位置。 現(xiàn)在就試試：

• 在DevTools的 Sources 面板上，單擊 Step into next function call 

Step into next function call 按鈕

該按鈕允許您逐步執(zhí)行 onClick（） 函數(shù)，一次一個(gè)函數(shù)。 當(dāng)DevTools突出顯示以下代碼行時(shí)停止：

if (inputsAreEmpty()) {

• 現(xiàn)在點(diǎn)擊 Step over next function call 按鈕 :

Step over next function call 按鈕DevTools執(zhí)行 inputsAreEmpty（） 而不進(jìn)入它。 注意DevTools如何跳過(guò)這幾行代碼。 這是因?yàn)?nbsp;inputsAreEmpty（） 返回false，所以 if 語(yǔ)句的代碼塊沒(méi)有執(zhí)行。

• 這是跳過(guò)函數(shù)基本思想。 如果您查看“get-started.js”中的代碼，您可以看到該錯(cuò)誤可能在“updateLabel（）”函數(shù)中的某個(gè)位置。 您可以使用其他類(lèi)型的斷點(diǎn)來(lái)暫停代碼逐步靠近錯(cuò)誤的位置，而不是逐步遍歷每行代碼。

Step 4: 設(shè)置另外的斷點(diǎn)

行斷點(diǎn)是最常見(jiàn)的斷點(diǎn)類(lèi)型。 當(dāng)你想暫停某一行代碼，使用行代碼斷點(diǎn)。 現(xiàn)在就試試：

• 看看 updateLabel（） 中的***一行代碼，如下所示：

  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

  在這段代碼的左邊，你可以看到這行代碼的行號(hào)： 32 。 點(diǎn)擊 32 。 DevTools將一個(gè)藍(lán)色的圖標(biāo)放在 32 的頂部。 這就意味著這行上有一個(gè)行代碼斷點(diǎn)。 DevTools現(xiàn)在總是在執(zhí)行該代碼行之前暫停。

• 點(diǎn)擊 Resume script execution 按鈕:

Resume script execution 按鈕

該腳本將繼續(xù)執(zhí)行，直到到達(dá)設(shè)置斷點(diǎn)的代碼行為止。

• 看看已經(jīng)執(zhí)行的`updateLabel（）'中的代碼行。 DevTools打印出“addend1”，“addend2”和“sum”的值。

“sum”的值看起來(lái)很可疑。 它似乎被當(dāng)做一個(gè)字符串，它應(yīng)該是一個(gè)數(shù)字。 這可能是錯(cuò)誤的原因。

Step 5: Check variable values

步驟5：檢查變量值

錯(cuò)誤的另一個(gè)常見(jiàn)原因是當(dāng)變量或函數(shù)產(chǎn)生與預(yù)期不同的值。 許多開(kāi)發(fā)人員使用 console.log（） 來(lái)查看變量如何變化，但由于兩個(gè)原因， console.log（） 可能是乏味和無(wú)效的。 一個(gè)，你可能需要手動(dòng)編輯你的代碼，大量的調(diào)用 console.log（） 。 二，您可能不知道哪個(gè)變量與錯(cuò)誤有關(guān)，所以您可能需要打印許多變量。

一個(gè)DevTools替代 console.log（） 是Watch表達(dá)式。 使用監(jiān)視表達(dá)式來(lái)監(jiān)視變量隨時(shí)間的變化。 顧名思義，Watch表達(dá)式不僅限于變量。 您可以在Watch表達(dá)式中存儲(chǔ)任何有效的JavaScript表達(dá)式。 現(xiàn)在就試試：

• 在 Sources 面板, 點(diǎn)擊 Watch 。

• 點(diǎn)擊 Add Expression

Add Expression 按鈕

• 輸入 typeof sum .

• 按回車(chē)。 DevTools顯示“typeof sum：”string“`。 冒號(hào)右側(cè)的值是您的觀察表達(dá)式的結(jié)果。

如預(yù)測(cè)那樣, sum 被當(dāng)做string類(lèi)型 。

console.log() 的另一個(gè)替代方法是控制臺(tái)。 使用控制臺(tái)來(lái)評(píng)估任意的JavaScript語(yǔ)句。 開(kāi)發(fā)人員通常使用控制臺(tái)在調(diào)試時(shí)覆蓋變量值。 在您的情況下，控制臺(tái)可以幫助找到啊修復(fù)bug的方法。 現(xiàn)在就試試：

*如果您沒(méi)有打開(kāi)控制臺(tái)抽屜，請(qǐng)按Esc鍵將其打開(kāi)。 它將在您的DevTools窗口的底部打開(kāi)。

*在控制臺(tái)中，輸入 parseInt（addend1）+ parseInt（addend2） 。

*按回車(chē)。 DevTools執(zhí)行該語(yǔ)句并打印出“6”，這是您期望演示生成的結(jié)果。

Step 6: 修復(fù)

您已經(jīng)確定了該bug的潛在修復(fù)方法。 剩下的是通過(guò)編輯代碼并重新運(yùn)行演示來(lái)嘗試修復(fù)。 您不需要離開(kāi)DevTools來(lái)修復(fù)bug。 您可以直接在DevTools UI中編輯JavaScript代碼。 現(xiàn)在就試試：

1. 在DevTools的 Sources 面板，用 var sum = parseInt(addend1) + parseInt(addend2); 替換 var sum = addend1 + addend2 ，這是您當(dāng)前暫停的一行。

2. 按Command + S（Mac）或Control + S（Windows，Linux）保存更改。 代碼的背景更改為紅色，表示腳本已在DevTools中更改。

3. 點(diǎn)擊 Deactivate breakpoints

Deactivate breakpoints 按鈕

它變藍(lán)色表示它是激活的。DevTools忽略您設(shè)置的任何斷點(diǎn)。

• 點(diǎn)擊 Resume script execution

Resume script execution 按鈕

嘗試使用不同的變量，現(xiàn)在sums可以正確計(jì)算了。