摘要：關(guān)閉開啟所有斷點不會取消。進入到一個與正在的問題無關(guān)的函數(shù)后，可以點擊此圖標(biāo)解析函數(shù)剩下的代碼，跳出函數(shù)到下一行。例如現(xiàn)在在處暫停，之后，瀏覽器解析函數(shù)剩下的代碼，然后在處再次暫停。是全局的，在瀏覽器的所有標(biāo)簽頁都能找到和運行。

此文章翻譯自 https://developers.google.com...，是對 chrome 下調(diào)試 javascript 的工具和方法介紹。

調(diào)試 js 需要結(jié)合瀏覽器斷點操作，具體可見我的上一篇文章：https://segmentfault.com/a/11...。

打上斷點之后，需要操作對應(yīng)圖標(biāo)進行調(diào)試，圖標(biāo)如下：

從左到右分別是：

Pause/Resume script execution：暫停/恢復(fù)腳本執(zhí)行（程序執(zhí)行到下一斷點停止）。

Step over next function call：執(zhí)行到下一步的函數(shù)調(diào)用（執(zhí)行當(dāng)前斷點所在行，跳到下一行且暫停）。

Step into next function call：進入當(dāng)前函數(shù)，在第一行暫停。

Step out of current function：跳出當(dāng)前執(zhí)行函數(shù)。

Deactive/Active all breakpoints：關(guān)閉/開啟所有斷點（不會取消）。

Pause on exceptions：異常情況自動斷點設(shè)置。

在斷點暫停后，點擊恢復(fù)腳本執(zhí)行，直到下一個斷點為止。

長按圖標(biāo)，會出現(xiàn)灰色的播放按鈕，鼠標(biāo)移上去再松開左鍵，會忽略所有的斷點，強制渲染完整的頁面。

當(dāng)在一行代碼中暫停，代碼里包含一個與正在調(diào)試的問題無關(guān)的函數(shù)時，可以點擊此圖標(biāo)直接解析該函數(shù)，而不是進入函數(shù)內(nèi)部逐行執(zhí)行debug操作。

例如，當(dāng)你在 debug 以下代碼：

function updateHeader() {

    var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

};

function getName() {

    var name = app.first + " " + app.last; // B

    return name; // C

}

假設(shè)現(xiàn)在是在 A 處暫停。點擊 "跳過下個函數(shù)調(diào)用" 圖標(biāo)，瀏覽器會解析被跳過的函數(shù)里的所有代碼（這里是 B 和 C），然后在 D 處再次暫停。

當(dāng)斷點找到了要 debug 的確切函數(shù)，點擊圖標(biāo)進入此函數(shù)內(nèi)部，逐行查看分析里面的變量值和方法。

例如：

function updateHeader() {

    var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

};

function getName() {

    var name = app.first + " " + app.last; // B

    return name; // C

}

此時在 A 處打點暫停了，而 A 處就是與問題相關(guān)的函數(shù)，點擊進入函數(shù)里，會在 B 處暫停，再次點擊會在 C 處暫停，同時 B 處會顯示 "name" 變量的值。

進入到一個與正在 debug 的問題無關(guān)的函數(shù)后，可以點擊此圖標(biāo)解析函數(shù)剩下的代碼，跳出函數(shù)到下一行。

例如：

function updateHeader() {

var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

};

function getName() {

    var name = app.first + " " + app.last; // B

    return name; // C

}

現(xiàn)在在 B 處暫停，step out 之后，瀏覽器解析 getName() 函數(shù)剩下的代碼（C），然后在 D 處再次暫停。

如果你在 debug 一個很長的函數(shù)，里面包含了很多與問題無關(guān)的代碼，需要區(qū)分出來。

首先在函數(shù)里設(shè)置第一個斷點，執(zhí)行至?xí)和＃缓?，有三種方法 debug ：

1、使用 step into function 逐行解析查看結(jié)果，會浪費不少時間；

2、根據(jù)結(jié)果判斷哪些是無用的代碼，越過它們再設(shè)置下一個斷點，使用 resume script 執(zhí)行到下一個斷點；

3、根據(jù)結(jié)果判斷哪些是無用的代碼，在下一個需要暫停的地方，右鍵行數(shù)，選擇 “continue to here”，瀏覽器會直接解析到那一行并暫停，推薦的方法。

在一行代碼里暫停時，可以在 Call Stack 面板查看是哪些棧將你帶到了當(dāng)前斷點（到達當(dāng)前函數(shù)調(diào)用了哪些函數(shù)）。如果不是在一行代碼里暫停， Call Stack 面板是沒有內(nèi)容的。

如果要查看異步函數(shù)，可以勾選 Async 。（在 windows 版本中沒有此選項，默認(rèn)顯示異步函數(shù)）。

點擊函數(shù)會跳到此函數(shù)調(diào)用的地方。藍色箭頭是當(dāng)前查看的函數(shù)。

在 Call Stack 面板里右鍵，選擇 Copy stack trace 可以將面板里的 stack 信息復(fù)制到 clipboard。

復(fù)制的信息格式如下（函數(shù)名稱、在代碼里的行數(shù)）：

getNumber1(get-started.js:35)

inputsAreEmpty(get-started.js:22)

onClick(get-started.js:15)

在調(diào)試函數(shù)的過程中，想回到函數(shù)的開頭重新 debug 的時候，可以在 Call Stack 面板中對應(yīng)的函數(shù)上右鍵，選擇 Restart Frame 而無需在開頭打斷點。Call Stack 面板里是斷點函數(shù)以及所涉及到的其他函數(shù)，最頂端的函數(shù)是當(dāng)前的斷點函數(shù)。

例如：

function factorial(n) {

    var product = 0; // B

    for (var i = 1; i <= n; i++) {

    product += i;

};

return product; // A

}

現(xiàn)在在 A 處暫停，點擊 Restart Frame 之后，會在 B 處暫停。

在 debug 過程中，可以選擇忽略部分腳本，不在 Call Stack 中顯示，在 step into function 的時候也不會進入被忽略的腳本。

例如：

function animate() {

    prepare();

    lib.doFancyStuff(); // A

    render();

}

A是你確認(rèn)與當(dāng)前問題無關(guān)的第三方庫，那就可以將它關(guān)入黑盒子里忽略掉。

在編輯區(qū)操作： 在 Source Tab 中雙擊打開文件 -> 在文件編輯區(qū)右鍵，選擇 Blackbox script 。

在Call Stack 面板操作： 在 Call Stack 面板中找到對應(yīng)的腳本 -> 右鍵選擇 Blackbox script 。

在控制臺設(shè)置黑盒： 控制臺右上角找到 "Customize and control DevTools" 圖標(biāo)（或按F1） -> 選擇 Blackboxing tab -> 點擊 Add pattern -> 在對話框中輸入腳本名字或腳本名字的正則表達式 -> 點擊 Add。

在網(wǎng)站有 web workers 或者 service workers 線程的時候，需要分別查看主線程和這兩個線程的 context ，可以在 Threads 面板切換。

上圖藍色箭頭處是當(dāng)前線程的 context ， 可以點擊切換其他線程。

在斷點暫停時，可以在 Scope 面板里查看和編輯局部、閉包和全局范圍內(nèi)的屬性和變量的值。不會顯示不可枚舉的屬性。

雙擊一個屬性值可以輸入新的值。

如果在調(diào)試中，需要一次次在控制臺輸入相同的內(nèi)容的話，可以使用 Snippets（代碼片段） 功能減少重復(fù)勞動。代碼片段是您在DevTools中編寫、存儲和運行的可執(zhí)行腳本。

Snippets 是全局的，在瀏覽器的所有標(biāo)簽頁都能找到和運行。

具體可查看 https://developers.google.com...。

在 debug 過程中，如果希望重點觀察某些變量的值（而不是在 Scope 面板里層層點開），可以加入 Watch 面板。Watch 面板里的值會在執(zhí)行代碼時自動刷新。

"+" 圖標(biāo)創(chuàng)建新的 expression；右邊是刷新圖標(biāo)，手動刷新變量的值；鼠標(biāo)移動到變量上，在右側(cè)會出現(xiàn)刪除圖標(biāo)。

可以將最小化了的代碼還原成對人友好的形式。

點擊代碼編輯區(qū)域左下角的 "{}" 圖標(biāo)。

如果要嘗試修復(fù) bug ， 不需要切換到編輯器修改，再刷新當(dāng)前頁面。你可以直接在代碼編輯區(qū)域修改代碼然后保存看看修改后的效果。如果是最小化了的代碼，可以先還原成對人友好的格式。

tips：確定修改方向之后，記得在編輯器代碼里修改保存。

操作： 修改代碼 -> 按 Command + S （mac）或 Ctrl + S （windows, Linux）保存修改 -> 查看效果。