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

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

Elements Panel

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

DOM Inspect:

鼠標(biāo)選中，右鍵inspect
菜單底部可快速定位父級(jí)元素
選中元素Enter,then press Tab可快速選擇屬性，進(jìn)行編輯

DOM樣式修改：

html雙擊修改，style單擊修改，tabor enter確認(rèn)修改
查看歷史修改，可通過以下操作：
- 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：

Subtree Modifications: 加在父級(jí)上的斷點(diǎn)，用來監(jiān)聽子元素的內(nèi)容增刪
Attribute Modifications:加在元素上的斷點(diǎn)，用來監(jiān)聽元素的屬性變化
Node Removal:加在元素上的斷點(diǎn)，用來監(jiān)聽元素是否被刪除

斷點(diǎn)事件觸發(fā)，會(huì)有如下提示

breakpoint-reason.png

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

Console Panel

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

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

Write Console

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

?

Console API

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

// 輸出在控制臺(tái)的內(nèi)容成組,可實(shí)現(xiàn)多層級(jí)，以及折疊效果（需要配合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

console.error():輸出錯(cuò)誤

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:輸出斷言,不影響后續(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");

console.table:表格

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

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

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

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

基本Format.如上，內(nèi)容輸出可進(jìn)行格式化輸出.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樣式

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

格式化DOM元素為對(duì)象:

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可實(shí)現(xiàn)路徑追蹤，在報(bào)錯(cuò)中，我們可以通過Error輸出打印

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

track-exceptions-error-stack.jpg

Tips:

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

Source Panel

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

Set Breakpoint

方法一：Source內(nèi)容區(qū)設(shè)置
- 主體內(nèi)容區(qū)域需要設(shè)置斷點(diǎn)的行號(hào)前點(diǎn)擊，對(duì)應(yīng)的行即設(shè)置好了。以此類推。
- 刷新瀏覽器，根據(jù)頁面邏輯以此會(huì)在斷點(diǎn)處暫停執(zhí)行，用于`debug
方法二：js文件中設(shè)置
- 在js文件中需要執(zhí)行斷點(diǎn)操作的code line前加上debugger
```
function sum(a, b){
  debugger;
  return a + b;
}
```

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

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

adding-condition.png

Breakpoint Step

0.gif

Pause/Resume script execution：暫停/恢復(fù)腳本執(zhí)行（程序執(zhí)行到下一斷點(diǎn)停止）。
Step over next function call：執(zhí)行到下一步的函數(shù)調(diào)用（跳到下一行）。
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)閉/開啟所有斷點(diǎn)（不會(huì)取消）。
Pause on exceptions：異常情況自動(dòng)斷點(diǎn)設(shè)置。

Call Stack

可以通過勾選Async實(shí)現(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.

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

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

暫停break，控制臺(tái)輸出需要變更的值，強(qiáng)制更改值即可繼續(xù)按照所需執(zhí)行.