1. `Chrome Devtools` 的用處

前端開發：開發預覽、遠程調試、性能調優、bug跟蹤、斷點調試等
後端開發：網絡抓包、開發調試Response
測試：服務端API數據是否正確、審查頁面元素樣式及佈局、頁面加載性能分析、自動化測試
其他：安裝擴展插件，如AdBlock、Gliffy、Axure等

2. 菜單面板拆解

Elements - 頁面dom元素
Console - 控制檯
Sources - 頁面靜態資源
Network - 網絡
Performance - 設備加載性能分析
Application - 應用信息，PWA/Storage/Cache/Frames
Security - 安全分析
Audits - 審計，自動化測試工具

3. 常用命令和調試

1. 呼出快捷指令面板：`cmd + shift + p`

在Devtools打開的情況下，鍵入cmd + shift + p將其激活，然後開始在欄中鍵入要查找的命令或輸入"?"號以查看所有可用命令。

…: 打開文件
:: 前往文件
@：前往標識符（函數，類名等）
!: 運行腳本文件
>: 打開某菜單功能

1.性能監視器：`> performance monitor`

將顯示性能監視器以及相關信息，例如CPU，JS堆大小和DOM節點。

2.FPS實時監控性能：`> FPS`選擇第一項

3.截圖單個元素：`> screen` 選擇 `Capture node screenhot`

2. `DOM` 斷點調試

當你要調試特定元素的DOM中的更改時，可以使用此選項。這些是DOM更改斷點的類型：

Subtree modifications: 子節點刪除或添加時
Attributes modifications: 屬性修改時
Node Removal: 節點刪除時

如上圖：監聽form標籤，在input框獲得焦點時，觸發斷點調試

3. 黑盒腳本：`Blackbox Script`

剔除多餘腳本斷點。

例如第三方（Javascript框架和庫，廣告等的堆棧跟蹤）。

爲避免這種情況並集中精力處理核心代碼，在Sources或網絡選項卡中打開文件，右鍵單擊並選擇Blackbox Script

4. 事件監聽器：`Event Listener Breakpoints`

點擊Sources面板
展開Event Listener Breakpoints
選擇監聽事件類別，觸發事件啓用斷點

如上圖：監聽了鍵盤輸入事件，就會跳到斷點處。

5. 本地覆蓋：`Local overrides`

使用我們自己的本地資源覆蓋網頁所使用的資源。

類似的，使用DevTools的工作區設置持久化，將本地的文件夾映射到網絡，在chrome開發者功能裏面對css樣式的修改，都會直接改動本地文件，頁面重新加載，使用的資源也是本地資源，達到持久化的效果。

創建一個文件夾以在本地添加替代內容；
打開Sources >; Overrides >; Enable local Overrides，選擇本地文件夾
打開Elements，編輯樣式，自動生成本地文件。
返回Sources，檢查文件，編輯更改。

6. 擴展：`Local overrides` 模擬 `Mock` 數據

來自：chrome 開發者工具 - local overrides

對於返回json 數據的接口，可以利用該功能，簡單模擬返回數據。

比如：

api 爲: http://www.xxx.com/api/v1/list
在根目錄下，新建文件www.xxx.com/api/v1/list，list文件中的內容，與正常接口返回格式相同

對象或者數組類型，從而覆蓋掉原接口請求

4. 控制檯內置指令

可以執行常見任務的功能，例如選擇DOM元素，觸發事件，監視事件，在DOM中添加和刪除元素等。

這像是Chrome自身實現的jquery加強版。

1. `$(selector, [startNode])`：單選擇器

document.querySelector的簡寫
語法：

$('a').href;
$('[test-id="logo-img"]').src;
$('#movie_player').click();

控制檯還會預先查詢對應的標籤，十分貼心。
還可以觸發事件，如暫停播放：

此函數還支持第二個參數startNode，該參數指定從中搜索元素的“元素”或Node。此參數的默認值爲document

2. `$$(選擇器，[startNode])`：全選擇器

document.querySelectorAll的簡寫，返回一個數組標籤元素
語法：

$$('.button')

可以用過循環實現切換全選

或者打印屬性

此函數還支持第二個參數startNode，該參數指定從中搜索元素的“元素”或Node。此參數的默認值爲document
用法：

var images = $$('img', document.querySelector('.devsite-header-background'));
   for (each in images) {
       console.log(images[each].src);
}

3. `$x(path, [startNode])`：xpath選擇器

$x(path)返回與給定xpath表達式匹配的DOM元素數組。

例如，以下代碼返回<p>頁面上的所有元素：

$x("//p")

以下代碼返回<p>包含<a>元素的所有元素：

$x("//p[a]")

xpath多用於爬蟲抓取，前端的同學可能不熟悉。

4. `getEventListeners(object)`：獲取指定對象的綁定事件

getEventListeners(object)返回在指定對象上註冊的事件偵聽器。返回值是一個對象，其中包含每個已註冊事件類型（例如，click或keydown）的數組。每個數組的成員是描述爲每種類型註冊的偵聽器的對象。
用法:

getEventListeners(document);

相對於到監聽面板裏查事件，這個API便捷多了。

5. 花式`console`

除了不同等級的warn和error打印外

還有其它非常實用的打印。

1. 變量打印：`%s`、`%o`、`%d`、和`%c`

const text = "文本1"
console.log(`打印${text}`)

除了標準的ES6語法，實際上還支持四種字符串輸出。
分別是：

console.log("打印 %s", text)

%s：字符串
%o：對象
%d：數字或小數

還有比較特殊的%c，可用於改寫輸出樣式。

console.log('%c 文本1', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue')

當然，你也可以結合其它一起用(注意佔位的順序)。

const text = "文本1"
console.log('%c %s', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue', text)

你還可以這麼玩：

console.log('%c Auth ', 
            'color: white; background-color: #2274A5', 
            'Login page rendered');
console.log('%c GraphQL ', 
            'color: white; background-color: #95B46A', 
            'Get user details');
console.log('%c Error ', 
            'color: white; background-color: #D33F49', 
            'Error getting user details');

2. 打印對象的小技巧

當我們需要打印多個對象時，經常一個個輸出。且看不到對象名稱，不利於閱讀：

以前我的做法是這麼打印：

console.log('hello', hello);
console.log('world', world);

這顯然有點笨拙繁瑣。其實，輸出也支持對象解構：

console.log({hello, world});

3. 布爾斷言打印：`console.assert()`

當你需要在特定條件判斷時打印日誌，這將非常有用。

如果斷言爲false，則將一個錯誤消息寫入控制檯。
如果斷言是true，沒有任何反應。

語法

console.assert（assertion，obj）

用法

const value = 1001
console.assert(value===1000,"value is not 1000")

4. 給`console` 編組：`console.group()`

當你需要將詳細信息分組或嵌套在一起以便能夠輕鬆閱讀日誌時，可以使用此功能。

console.group('用戶列表');
console.log('name: 張三');
console.log('job: ?前端');
// 內層
console.group('地址');
console.log('Street: 123 街');
console.log('City: 北京');
console.log('State: 在職');
console.groupEnd(); // 結束內層
console.groupEnd(); // 結束外層

5. 測試執行效率：`console.time()`

沒有Performance API精準，但勝在使用簡便。

let i = 0;
console.time("While loop");
while (i < 1000000) {
  i++;
}
console.timeEnd("While loop");
console.time("For loop");
for (i = 0; i < 1000000; i++) {
  // For Loop
}
console.timeEnd("For loop");

6. 輸出表格：`console.table()`

這個適用於打印數組對象

let languages = [
    { name: "JavaScript", fileExtension: ".js" },
    { name: "TypeScript", fileExtension: ".ts" },
    { name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);

7. 打印 `DOM` 對象節點：`console.dir()`

打印出該對象的所有屬性和屬性值.
console.dir()和console.log()的作用區別並不明顯。若用於打印字符串，則輸出一摸一樣。

console.log（"Why，hello!"）；
console.dir（"Why，hello!"）;

在輸出對象時也僅是顯示不同（log識別爲字符串輸出，dir直接打印對象）。

唯一顯著區別在於打印dom對象上：

console.log(document)
console.dir(document)

一個打印出純標籤，另一個則是輸出DOM樹對象。

6. 遠程調試`WebView`

使用Chrome開發者工具在原生Android應用中調試WebView。

配置WebViews進行調試。
在 WebView類上調用靜態方法setWebContentsDebuggingEnabled

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

手機打開usb調試，插上電腦。
在Chrome地址欄輸入：Chrome://inspect

正常的話在App中打開WebView時，chrome中會監聽到並顯示你的頁面。
點擊頁面下的inspect，就可以實時看到手機上WebView頁面的顯示狀態了。（第一次使用可能會白屏，這是因爲需要去https://chrome-devtools-frontend.appspot.com那邊下載文件）

除了inspect標籤，還有Focus tab:

它會自動觸發Android設備上的相同操作

[參考資料]

Practical Chrome Devtools — Common commands & Debugging

Mobile web specialist — Remote Debugging

Console Utilities API Reference

Console API Reference

Chrome Devtools 高級調試指南（新）總結

1. Chrome Devtools 的用處

2. 菜單面板拆解

3. 常用命令和調試

1. 呼出快捷指令面板：cmd + shift + p

1.性能監視器：> performance monitor

2.FPS實時監控性能：> FPS選擇第一項

3.截圖單個元素：> screen 選擇 Capture node screenhot

2. DOM 斷點調試

3. 黑盒腳本：Blackbox Script

4. 事件監聽器：Event Listener Breakpoints

5. 本地覆蓋：Local overrides

6. 擴展：Local overrides 模擬 Mock 數據

4. 控制檯內置指令

1. $(selector, [startNode])：單選擇器

2. $$(選擇器，[startNode])：全選擇器

3. $x(path, [startNode])：xpath選擇器

4. getEventListeners(object)：獲取指定對象的綁定事件

5. 花式console

1. 變量打印：%s、%o、%d、和%c