Chrome調(diào)試相關(guān)

Chrome調(diào)試工具是日常項目中常用到的洲愤，但面對Command + Shift + i(window:F12)開啟調(diào)試面板柬赐，總有些不被知曉的功能被遺漏。本著工欲善其事州藕，必先利其器的想法酝陈，扒點歷史存貨，也從官網(wǎng)系統(tǒng)學(xué)習(xí)一下Chrome較為完善的功能.

Elements Panel

所見即所得,主要用于顯示編輯html及style樣式

DOM Inspect:

1. 鼠標(biāo)選中锈死，右鍵inspect
2. 菜單底部可快速定位父級元素
3. 選中元素Enter,then press Tab可快速選擇屬性待牵，進行編輯

DOM樣式修改：

1. html雙擊修改，style單擊修改偎行，tabor enter確認(rèn)修改
2. 查看歷史修改贰拿，可通過以下操作：
   • In the Styles pane, click on the file that you modified. DevTools takes you to the Sources panel.
   • Right-click on the file.
   • Select Local modifications.

演示地址：

歷史修改查看

Set DOM breakpoints

按照DOM Inspect提示選中元素后膨更，可右鍵設(shè)置DOM breakpoints：

1. Subtree Modifications: 加在父級上的斷點，用來監(jiān)聽子元素的內(nèi)容增刪
2. Attribute Modifications:加在元素上的斷點隐孽，用來監(jiān)聽元素的屬性變化
3. Node Removal:加在元素上的斷點菱阵，用來監(jiān)聽元素是否被刪除

斷點事件觸發(fā)缩功，會有如下提示

breakpoint-reason.png

以上斷點雖然都在DOM元素上添加嫡锌，實則仍為監(jiān)聽JS

Console Panel

Shortcut: Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).

Console：輸出控制臺，前端調(diào)試后花園蛛倦，內(nèi)容輸出顯示啦桌，或者直接執(zhí)行javascript代碼

Write Console

1. javascript文件中執(zhí)行console.log('some function or string')

2. 控制臺直接輸入命令執(zhí)行

   ?

Console API

1. console.group:內(nèi)容輸出成組

   // 輸出在控制臺的內(nèi)容成組,可實現(xiàn)多層級甫男，以及折疊效果（需要配合console.groupCollapsed）
   console.group('group start'); //group開始
   console.log('group content 1'); // group 內(nèi)容1
   ... // group 其他內(nèi)容
   console.groupEnd(); //group結(jié)束
   

   效果如下:

group.png

2. console.error():輸出錯誤

   function connectToServer() {
       console.error("Error: %s (%i)", "Server is  not responding",500);
   }
   connectToServer();
   

3. console.warn():輸出警告

   if(a.childNodes.length < 3 ) {
       console.warn('Warning! Too few nodes (%d)', a.childNodes.length);
   }
   

4. console.assert:輸出斷言,不影響后續(xù)的函數(shù)執(zhí)行,斷言可以viewexception stack trace.

track-exceptions-exception-stack-trace.jpg

Writes an error message to the console if the assertion is false. If the assertion is true, nothing happens.

MDN - Console.assert()

console.assert(list.childNodes.length < 500, "Node count is > 500");

1. console.table:表格

   ［官方示例](https://developers.google.com/web/tools/chrome-devtools/debug/console/structured-data?hl=en)

2. console.time(arg),console.timeEnd(arg):查看函數(shù)執(zhí)行時間又跛。

   console.time("Array initialize");
   var array= new Array(1000000);
   for (var i = array.length - 1; i >= 0; i--) {
       array[i] = new Object();
   };
   console.timeEnd("Array initialize");
   

   結(jié)果：

track-executions-time-duration.png

3. console.trace可追蹤執(zhí)行路徑

   function foo() {
     function bar() {
       console.trace();
     }
     bar();
   }
   
   foo();
   

   The output in the console looks something like this:

   
   
   api-trace2.png

完整Console文檔在這里：Console API Reference

Console Format

1. 基本Format.如上慨蓝，內(nèi)容輸出可進行格式化輸出.Console支持的輸出列表：

   Specifier	Output
   %s	Formats the value as a string
   %i or %d	Formats the value as an integer
   %f	Formats the value as a floating point value
   %o	Formats the value as an expandable DOM element. As seen in the Elements panel
   %O	Formats the value as an expandable JavaScript object
   %c	Applies CSS style rules to the output string as specified by the second parameter

2. 格式化輸出CSS樣式

   // 控制臺可直接輸出帶有樣式的內(nèi)容
   console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
   

   ?

3. 格式化DOM元素為對象:

   By default, DOM elements are logged into the console as representation of their HTML, but sometimes you want to access the DOM element as JavaScript object and inspect its properties. You can use the %o string specifier to do that (see above), or use console.dir to achieve the same:

   console.dir(document.body.firstElementChild)
   

   ?

Print stack traces

以上console.trace可實現(xiàn)路徑追蹤，在報錯中静暂，我們可以通過Error輸出打印

1. Error.stack:error 的stack屬性可以輸出執(zhí)行路徑

track-exceptions-error-stack.jpg

?

Tips:

1. 控制臺輸入clear()可快速實現(xiàn)清屏
2. 同上清屏功能洽蛀，可以在自己的JS代碼中執(zhí)行console.clear(),解除控制臺各種問題

Source Panel

Source：顧名思義郊供，加載的資源這里都能找得到。此部分主要介紹斷點驮审。

Set Breakpoint

1. 方法一：Source內(nèi)容區(qū)設(shè)置

   • 主體內(nèi)容區(qū)域需要設(shè)置斷點的行號前點擊疯淫，對應(yīng)的行即設(shè)置好了。以此類推未斑。
   • 刷新瀏覽器币绩，根據(jù)頁面邏輯以此會在斷點處暫停執(zhí)行缆镣，用于`debug

2. 方法二：js文件中設(shè)置

   • 在js文件中需要執(zhí)行斷點操作的code line前加上debugger

     function sum(a, b){
       debugger;
       return a + b;
     }
     

Breakpoint conditional斷點執(zhí)行條件

右鍵設(shè)置的斷點，選擇Edit breakpoint輸入執(zhí)行斷點的條件

adding-condition.png

Breakpoint Step

0.gif

• Pause/Resume script execution：暫停/恢復(fù)腳本執(zhí)行（程序執(zhí)行到下一斷點停止）诉瓦。
• Step over next function call：執(zhí)行到下一步的函數(shù)調(diào)用（跳到下一行）睬澡。
• 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è)置云稚。

Call Stack

可以通過勾選Async實現(xiàn)異步查找事件依賴關(guān)系静陈，方便debug。官方建議避免使用匿名函數(shù)鲸拥。

Near the top of the sidebar is the Call Stack section. When the code is paused at a breakpoint, the call stack shows the execution path, in reverse chronological order, that brought the code to that breakpoint. This is helpful in understanding not just where the execution is now, but how it got there, an important factor in debugging.

The call stack

image_15.png

An initial onclick event at line 50 in the index.html file called thesetone() function at line 18 in the dgjs.js JavaScript file, which then called the setall() function at line 4 in the same file, where execution is paused at the current breakpoint.

可以通過右鍵在對應(yīng)的腳本（如第三方）文件中設(shè)置blackbox關(guān)進小黑屋刑赶，防止迷惑debug.官方是通過tools的setting進行全局設(shè)置。

Data manipulation更改執(zhí)行數(shù)值

暫停break金踪，控制臺輸出需要變更的值牵敷，強制更改值即可繼續(xù)按照所需執(zhí)行.

image_17.png

針對Workspaces 和 Sourcemaps開啟的權(quán)限劣领，見下。

Set Up Persistence with DevTools Workspaces

Set Up CSS & JS Preprocessors

參考鏈接

• Chrome DevTools官方文檔
• Console API Reference

• 一探前端開發(fā)中的JS調(diào)試技巧