此文章翻譯自developers.google.com/web/tools/chrome-devtools/javascript/reference芭届，是對(duì) chrome 下調(diào)試 javascript 的工具和方法介紹谍憔。

調(diào)試 js 需要結(jié)合瀏覽器斷點(diǎn)操作徙融，具體可見(jiàn)我的上一篇文章：?使用斷點(diǎn)調(diào)試代碼示罗。

打上斷點(diǎn)之后龙亲，需要操作對(duì)應(yīng)圖標(biāo)進(jìn)行調(diào)試锨阿，圖標(biāo)如下：

從左到右分別是：

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

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

Step into next function call：進(jìn)入當(dāng)前函數(shù)鸥诽。

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

Deactive/Active all breakpoints：關(guān)閉/開(kāi)啟所有斷點(diǎn)（不會(huì)取消）箕憾。

Pause on exceptions：異常情況自動(dòng)斷點(diǎn)設(shè)置牡借。

Pause/Resume script execution（ F8）

在斷點(diǎn)暫停后，點(diǎn)擊恢復(fù)腳本執(zhí)行袭异，直到下一個(gè)斷點(diǎn)為止钠龙。

長(zhǎng)按圖標(biāo)，會(huì)出現(xiàn)灰色的播放按鈕，鼠標(biāo)移上去再松開(kāi)左鍵碴里，會(huì)忽略所有的斷點(diǎn)沈矿，強(qiáng)制渲染完整的頁(yè)面。

Step over next function call （F10）

當(dāng)在一行代碼中暫停咬腋，代碼里包含一個(gè)與正在調(diào)試的問(wèn)題無(wú)關(guān)的函數(shù)時(shí)羹膳，可以點(diǎn)擊此圖標(biāo)直接解析該函數(shù)，而不是進(jìn)入函數(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 處暫停。點(diǎn)擊 '跳過(guò)下個(gè)函數(shù)調(diào)用' 圖標(biāo)寇壳，瀏覽器會(huì)解析被跳過(guò)的函數(shù)里的所有代碼（這里是 B 和 C）醒颖，然后在 D 處再次暫停。

Step into next function call?（ F11）

當(dāng)斷點(diǎn)找到了要 debug 的確切函數(shù)壳炎，點(diǎn)擊圖標(biāo)進(jìn)入此函數(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

}

此時(shí)在 A 處打點(diǎn)暫停了匿辩，而 A 處就是與問(wèn)題相關(guān)的函數(shù)腰耙，點(diǎn)擊進(jìn)入函數(shù)里，會(huì)在 B 處暫停撒汉，再次點(diǎn)擊會(huì)在 C 處暫停沟优，同時(shí) B 處會(huì)顯示 'name' 變量的值。

Step out of current function （Shift + F8）

進(jìn)入到一個(gè)與正在 debug 的問(wèn)題無(wú)關(guān)的函數(shù)后睬辐，可以點(diǎn)擊此圖標(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 處再次暫停丰刊。

Run all code up to a certain line

如果你在 debug 一個(gè)很長(zhǎng)的函數(shù)隘谣，里面包含了很多與問(wèn)題無(wú)關(guān)的代碼，需要區(qū)分出來(lái)啄巧。

首先在函數(shù)里設(shè)置第一個(gè)斷點(diǎn)寻歧，執(zhí)行至?xí)和＃缓笾绕停腥N方法 debug ：

? ? 1码泛、使用 step into function 逐行解析查看結(jié)果，會(huì)浪費(fèi)不少時(shí)間澄耍；

? ? 2噪珊、根據(jù)結(jié)果判斷哪些是無(wú)用的代碼晌缘，越過(guò)它們?cè)僭O(shè)置下一個(gè)斷點(diǎn)，使用 resume script 執(zhí)行到下一個(gè)斷點(diǎn)痢站；

? ? 3磷箕、根據(jù)結(jié)果判斷哪些是無(wú)用的代碼，在下一個(gè)需要暫停的地方阵难，右鍵行數(shù)岳枷，選擇 “continue to here”，瀏覽器會(huì)直接解析到那一行并暫停呜叫，推薦的方法嫩舟。

View the current call stack

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

如果要查看異步函數(shù)椎工，可以勾選 Async 。（在 windows 版本中沒(méi)有此選項(xiàng)蜀踏，默認(rèn)顯示異步函數(shù)）维蒙。

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

Copy stack trace

在 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)

Restart the top function of the call stack

在調(diào)試函數(shù)的過(guò)程中斑响，想回到函數(shù)的開(kāi)頭重新 debug 的時(shí)候，可以在 Call Stack 面板中對(duì)應(yīng)的函數(shù)上右鍵钳榨，選擇?Restart Frame 而無(wú)需在開(kāi)頭打斷點(diǎn)舰罚。Call Stack 面板里是斷點(diǎn)函數(shù)以及所涉及到的其他函數(shù)，最頂端的函數(shù)是當(dāng)前的斷點(diǎn)函數(shù)薛耻。

例如：

function factorial(n) {

????var product = 0; // B

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

????product += i;

};

return product; // A

}

現(xiàn)在在 A 處暫停营罢，點(diǎn)擊 Restart Frame 之后，會(huì)在 B 處暫停饼齿。

Ignore a script or pattern of scripts

在 debug 過(guò)程中饲漾，可以選擇忽略部分腳本，不在 Call Stack 中顯示缕溉，在 step into function 的時(shí)候也不會(huì)進(jìn)入被忽略的腳本考传。

例如：

function animate() {

????prepare();

????lib.doFancyStuff(); // A

????render();

}

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

在編輯區(qū)操作： 在 Source Tab 中雙擊打開(kāi)文件 -> 在文件編輯區(qū)右鍵伙菊，選擇?Blackbox script 败玉。

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

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

Change thread context

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

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

View and edit local, closure, and global properties

在斷點(diǎn)暫停時(shí)财剖，可以在 Scope 面板里查看和編輯局部悠夯、閉包和全局范圍內(nèi)的屬性和變量的值。不會(huì)顯示不可枚舉的屬性躺坟。

雙擊一個(gè)屬性值可以輸入新的值沦补。

Run snippets of debug code from any page

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

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

具體可查看?從任何頁(yè)面運(yùn)行代碼片段

Watch the values of custom JavaScript expressions

在 debug 過(guò)程中菠剩，如果希望重點(diǎn)觀察某些變量的值（而不是在 Scope 面板里層層點(diǎn)開(kāi)）易猫，可以加入 Watch 面板。Watch 面板里的值會(huì)在執(zhí)行代碼時(shí)自動(dòng)刷新具壮。

'+' 圖標(biāo)創(chuàng)建新的 expression准颓；右邊是刷新圖標(biāo)，手動(dòng)刷新變量的值嘴办；鼠標(biāo)移動(dòng)到變量上瞬场，在右側(cè)會(huì)出現(xiàn)刪除圖標(biāo)。

Make a minified file readable

可以將最小化了的代碼還原成對(duì)人友好的形式涧郊。

點(diǎn)擊代碼編輯區(qū)域左下角的 '{}' 圖標(biāo)贯被。

Edit a script

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

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