Chrome調試相關

Chrome調試工具是日常項目中常用到的，但面對Command + Shift + i(window:F12)開啟調試面板，總有些不被知曉的功能被遺漏。本著工欲善其事，必先利其器的想法，扒點歷史存貨，也從官網系統學習一下Chrome較為完善的功能.

Elements Panel

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

DOM Inspect:

鼠標選中，右鍵inspect
菜單底部可快速定位父級元素
選中元素Enter,then press Tab可快速選擇屬性，進行編輯

DOM樣式修改：

html雙擊修改，style單擊修改，tabor enter確認修改
查看歷史修改，可通過以下操作：
- 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提示選中元素后，可右鍵設置DOM breakpoints：

Subtree Modifications: 加在父級上的斷點，用來監聽子元素的內容增刪
Attribute Modifications:加在元素上的斷點，用來監聽元素的屬性變化
Node Removal:加在元素上的斷點，用來監聽元素是否被刪除

斷點事件觸發，會有如下提示

breakpoint-reason.png

以上斷點雖然都在DOM元素上添加，實則仍為監聽JS

Console Panel

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

Console：輸出控制臺，前端調試后花園，內容輸出顯示，或者直接執行javascript代碼

Write Console

javascript文件中執行console.log('some function or string')
控制臺直接輸入命令執行

?

Console API

console.group:內容輸出成組

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

效果如下:

group.png

console.error():輸出錯誤

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

console.warn():輸出警告

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

console.assert:輸出斷言,不影響后續的函數執行,斷言可以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");

console.table:表格

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

console.time(arg),console.timeEnd(arg):查看函數執行時間。

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");

結果：

track-executions-time-duration.png

console.trace可追蹤執行路徑
```
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

基本Format.如上，內容輸出可進行格式化輸出.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

格式化輸出CSS樣式

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

格式化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可實現路徑追蹤，在報錯中，我們可以通過Error輸出打印

Error.stack:error 的stack屬性可以輸出執行路徑

track-exceptions-error-stack.jpg

Tips:

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

Source Panel

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

Set Breakpoint

方法一：Source內容區設置
- 主體內容區域需要設置斷點的行號前點擊，對應的行即設置好了。以此類推。
- 刷新瀏覽器，根據頁面邏輯以此會在斷點處暫停執行，用于`debug
方法二：js文件中設置
- 在js文件中需要執行斷點操作的code line前加上debugger
```
function sum(a, b){
  debugger;
  return a + b;
}
```

Breakpoint conditional斷點執行條件

右鍵設置的斷點，選擇Edit breakpoint輸入執行斷點的條件

adding-condition.png

Breakpoint Step

0.gif

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：異常情況自動斷點設置。

Call Stack

可以通過勾選Async實現異步查找事件依賴關系，方便debug。官方建議避免使用匿名函數。

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.

可以通過右鍵在對應的腳本（如第三方）文件中設置blackbox關進小黑屋，防止迷惑debug.官方是通過tools的setting進行全局設置。

Data manipulation更改執行數值

暫停break，控制臺輸出需要變更的值，強制更改值即可繼續按照所需執行.