前言
本文暫未涉及Performance面板的內容。 後續會單獨出一篇，以下是目錄：
- 常用命令和調試
- 黑盒腳本：Blackbox Script
- 控制檯內置指令
- 遠程調試WebView
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，檢查文件，編輯更改。
該項可以自動修改除XHR異步請求的資源，下載的文件若未格式化，可以點左下角。
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的簡寫 語法：
<code>$('a').href;
$('[test-id="logo-img"]').src;
$('#movie_player').click();
複製代碼/<code>
控制檯還會預先查詢對應的標籤，十分貼心。 還可以觸發事件，如暫停播放：
此函數還支持第二個參數startNode，該參數指定從中搜索元素的“元素”或Node。此參數的默認值為document
2. $$（選擇器，[startNode]）：全選擇器
document.querySelectorAll的簡寫，返回一個數組標籤元素 語法：
<code>$$('.button')
複製代碼/<code>
可以用過循環實現切換全選
或者打印屬性
此函數還支持第二個參數startNode，該參數指定從中搜索元素的“元素”或Node。此參數的默認值為document 用法：
<code>var images = $$('img', document.querySelector('.devsite-header-background'));
for (each in images) {
console.log(images[each].src);
}
複製代碼/<code>
3. $x(path, [startNode])：xpath選擇器
$x(path)返回與給定xpath表達式匹配的DOM元素數組。
例如，以下代碼返回
頁面上的所有元素：
<code>$x("//p")
複製代碼/<code>
以下代碼返回
包含
<code>$x("//p[a]")
複製代碼/<code>
xpath多用於爬蟲抓取，前端的同學可能不熟悉。
4. getEventListeners（object）：獲取指定對象的綁定事件
getEventListeners(object)返回在指定對象上註冊的事件偵聽器。返回值是一個對象，其中包含每個已註冊事件類型（例如，click或keydown）的數組。每個數組的成員是描述為每種類型註冊的偵聽器的對象。 用法:
<code>getEventListeners(document);
複製代碼/<code>
相對於到監聽面板裡查事件，這個API便捷多了。
5. 花式console
除了不同等級的warn和error打印外
還有其它非常實用的打印。
1. 變量打印：%s、%o、%d、和%c
<code>const text = "文本1"
console.log(`打印${text}`)
複製代碼/<code>
除了標準的ES6語法，實際上還支持四種字符串輸出。 分別是：
<code>console.log("打印 %s", text)
複製代碼/<code>- %s：字符串
- %o：對象
- %d：數字或小數
還有比較特殊的%c，可用於改寫輸出樣式。
<code>console.log('%c 文本1', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue')
複製代碼/<code>
當然，你也可以結合其它一起用(注意佔位的順序)。
<code>const text = "文本1"
console.log('%c %s', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue', text)
複製代碼/<code>
你還可以這麼玩：
<code>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');
複製代碼/<code>
2. 打印對象的小技巧
當我們需要打印多個對象時，經常一個個輸出。且看不到對象名稱，不利於閱讀：
以前我的做法是這麼打印：
<code>console.log('hello', hello);
console.log('world', world);
複製代碼/<code> 這顯然有點笨拙繁瑣。其實，輸出也支持對象解構：
<code>console.log({hello, world});
複製代碼/<code>
3. 布爾斷言打印：console.assert()
當你需要在特定條件判斷時打印日誌，這將非常有用。
- 如果斷言為false，則將一個錯誤消息寫入控制檯。
- 如果斷言是true，沒有任何反應。
語法
<code>console.assert（assertion，obj）
複製代碼/<code>
用法
<code>const value = 1001
console.assert(value===1000,"value is not 1000")
複製代碼/<code>
4. 給console編組：console.group()
當你需要將詳細信息分組或嵌套在一起以便能夠輕鬆閱讀日誌時，可以使用此功能。
<code>console.group('用戶列表');
console.log('name: 張三');
console.log('job: 前端');
// 內層
console.group('地址');
console.log('Street: 123 街');
console.log('City: 北京');
console.log('State: 在職');
console.groupEnd(); // 結束內層
console.groupEnd(); // 結束外層
複製代碼/<code>
5. 測試執行效率：console.time()
沒有Performance API 精準，但勝在使用簡便。
<code>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");
複製代碼/<code>
6. 輸出表格：console.table()
這個適用於打印數組對象。。。
<code>let languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);
複製代碼/<code>
7. 打印DOM對象節點：console.dir()
打印出該對象的所有屬性和屬性值. console.dir()和console.log()的作用區別並不明顯。若用於打印字符串，則輸出一摸一樣。
<code>console.log（"Why，hello!"）；
console.dir（"Why，hello!"）;
複製代碼/<code>
在輸出對象時也僅是顯示不同（log識別為字符串輸出，dir直接打印對象。）。
唯一顯著區別在於打印dom對象上：
<code>console.log(document)
console.dir(document)
複製代碼/<code>
一個打印出純標籤，另一個則是輸出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中會監聽到並顯示你的頁面。 4. 點擊頁面下的inspect，就可以實時看到手機上WebView頁面的顯示狀態了。（第一次使用可能會白屏，這是因為需要去https://chrome-devtools-frontend.appspot.com那邊下載文件）
除了inspect標籤，還有 Focus tab:
- 它會自動觸發Android設備上的相同操作
其他應用裡的WebView也可以，例如這是某個應用裡的遊戲，用的也是網頁：
7.調試Node.js
具體可以查看阿里雲社區的這篇：
Node.js應用程序故障排除手冊-正確啟用Chrome DevTools
Ps: 屬於我的知識盲區，就不搬運造次了。
Practical Chrome Devtools —
Common commands & Debugging Mobile web specialist —
Remote Debugging Console Utilities API Reference Console API Reference
❤️ 看完一件事
如果你覺得這篇內容對你挺有啟發，我想邀請你幫我一個小忙：
- 點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
閱讀更多 Echa攻城獅 的文章
