Chrome 瀏覽器 Javascript 調試參考

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

調試 js 須要結合瀏覽器斷點操做，具體可見個人上一篇文章：https://segmentfault.com/a/11...。

---

一、調試圖標概覽

打上斷點以後，須要操做對應圖標進行調試，圖標以下：

從左到右分別是：

Pause/Resume script execution：暫停/恢復腳本執行（程序執行到下一斷點中止）。

Step over next function call：執行到下一步的函數調用（執行當前斷點所在行，跳到下一行且暫停）。

Step into next function call：進入當前函數，在第一行暫停。

Step out of current function：跳出當前執行函數。

Deactive/Active all breakpoints：關閉/開啓全部斷點（不會取消）。

Pause on exceptions：異常狀況自動斷點設置。

---

Pause/Resume script execution（ F8）

在斷點暫停後，點擊恢復腳本執行，直到下一個斷點爲止。

長按圖標，會出現灰色的播放按鈕，鼠標移上去再鬆開左鍵，會忽略全部的斷點，強制渲染完整的頁面。

---

Step over next function call （F10）

當在一行代碼中暫停，代碼裏包含一個與正在調試的問題無關的函數時，能夠點擊此圖標直接解析該函數，而不是進入函數內部逐行執行debug操做。

例如，當你在 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

}

假設如今是在 A 處暫停。點擊 '跳過下個函數調用' 圖標，瀏覽器會解析被跳過的函數裏的全部代碼（這裏是 B 和 C），而後在 D 處再次暫停。

---

Step into next function call （ F11）

當斷點找到了要 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

}

此時在 A 處打點暫停了，而 A 處就是與問題相關的函數，點擊進入函數裏，會在 B 處暫停，再次點擊會在 C 處暫停，同時 B 處會顯示 'name' 變量的值。

---

Step out of current function （Shift + F8）

進入到一個與正在 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

}

如今在 B 處暫停，step out 以後，瀏覽器解析 getName() 函數剩下的代碼（C），而後在 D 處再次暫停。

---

二、調試區域其餘功能概覽

Run all code up to a certain line

若是你在 debug 一個很長的函數，裏面包含了不少與問題無關的代碼，須要區分出來。

首先在函數裏設置第一個斷點，執行至暫停，而後，有三種方法 debug ：

一、使用 step into function 逐行解析查看結果，會浪費很多時間；

二、根據結果判斷哪些是無用的代碼，越過它們再設置下一個斷點，使用 resume script 執行到下一個斷點；

三、根據結果判斷哪些是無用的代碼，在下一個須要暫停的地方，右鍵行數，選擇 「continue to here」，瀏覽器會直接解析到那一行並暫停，推薦的方法。

---

View the current call stack

在一行代碼裏暫停時，能夠在 Call Stack 面板查看是哪些棧將你帶到了當前斷點（到達當前函數調用了哪些函數）。若是不是在一行代碼裏暫停， Call Stack 面板是沒有內容的。

若是要查看異步函數，能夠勾選 Async 。（在 windows 版本中沒有此選項，默認顯示異步函數）。

點擊函數會跳到此函數調用的地方。藍色箭頭是當前查看的函數。

---

Copy stack trace

在 Call Stack 面板裏右鍵，選擇 Copy stack trace 能夠將面板裏的 stack 信息複製到 clipboard。

複製的信息格式以下（函數名稱、在代碼裏的行數）：

getNumber1(get-started.js:35)

inputsAreEmpty(get-started.js:22)

onClick(get-started.js:15)

---

Restart the top function of the call stack

在調試函數的過程當中，想回到函數的開頭從新 debug 的時候，能夠在 Call Stack 面板中對應的函數上右鍵，選擇 Restart Frame 而無需在開頭打斷點。Call Stack 面板裏是斷點函數以及所涉及到的其餘函數，最頂端的函數是當前的斷點函數。

例如：

function factorial(n) {

    var product = 0; // B

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

    product += i;

};

return product; // A

}

如今在 A 處暫停，點擊 Restart Frame 以後，會在 B 處暫停。

---

Ignore a script or pattern of scripts

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

例如：

function animate() {

    prepare();

    lib.doFancyStuff(); // A

    render();

}

A是你確認與當前問題無關的第三方庫，那就能夠將它關入黑盒子裏忽略掉。

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

在Call Stack 面板操做： 在 Call Stack 面板中找到對應的腳本 -> 右鍵選擇 Blackbox script 。

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

---

Change thread context

在網站有 web workers 或者 service workers 線程的時候，須要分別查看主線程和這兩個線程的 context ，能夠在 Threads 面板切換。

上圖藍色箭頭處是當前線程的 context ， 能夠點擊切換其餘線程。

---

View and edit local, closure, and global properties

在斷點暫停時，能夠在 Scope 面板裏查看和編輯局部、閉包和全局範圍內的屬性和變量的值。不會顯示不可枚舉的屬性。

雙擊一個屬性值能夠輸入新的值。

---

Run snippets of debug code from any page

若是在調試中，須要一次次在控制檯輸入相同的內容的話，可使用 Snippets（代碼片斷） 功能減小重複勞動。代碼片斷是您在DevTools中編寫、存儲和運行的可執行腳本。

Snippets 是全局的，在瀏覽器的全部標籤頁都能找到和運行。

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

---

Watch the values of custom JavaScript expressions

在 debug 過程當中，若是但願重點觀察某些變量的值（而不是在 Scope 面板裏層層點開），能夠加入 Watch 面板。Watch 面板裏的值會在執行代碼時自動刷新。

'+' 圖標建立新的 expression；右邊是刷新圖標，手動刷新變量的值；鼠標移動到變量上，在右側會出現刪除圖標。

---

Make a minified file readable

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

點擊代碼編輯區域左下角的 '{}' 圖標。

---

Edit a script

若是要嘗試修復 bug ， 不須要切換到編輯器修改，再刷新當前頁面。你能夠直接在代碼編輯區域修改代碼而後保存看看修改後的效果。若是是最小化了的代碼，能夠先還原成對人友好的格式。

tips：肯定修改方向以後，記得在編輯器代碼裏修改保存。

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