Chrome Devtools 高級調試指南(新)

前言

本文暫未涉及Performance面板的內容。
後續會單獨出一篇，以下是目錄：

常用命令和調試

黑盒腳本：Blackbox Script

控制臺內置指令

遠程調試WebView

1、Chrome Devtools 的用處

前端開發：開發預覽、遠程調試、性能調優、bug跟蹤、斷點調試等

後端開發：網絡抓包、開發調試Response

測試：服務端API數據是否正確、審查頁面元素樣式及布局、頁面加載性能分析、自動化測試

其他：安裝擴展插件，如AdBlock、Gliffy、Axure等

2、菜單面板拆解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更改斷點的類型：

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

3、黑盒腳本：Blackbox Script

剔除多餘腳本斷點。

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

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

4. 事件監聽器：Event Listener Breakpoints

點擊Sources面板

展開Event Listener Breakpoints

選擇監聽事件類別，觸發事件啟用斷點

如上圖：監聽了鍵盤輸入事件，就會跳到斷點處。
5、本地覆蓋：Local overrides

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

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

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

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

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

比如：

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

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>元素的所有元素：
1、變量列印：%s、%o、%d、和%c

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

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

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

還有比較特殊的%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()

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

語法

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:

其他應用裡的WebView也可以，例如這是某個應用裡的遊戲，用的也是網頁：

參考資料

Practical Chrome Devtools — Common commands & Debugging

Mobile web specialist — Remote Debugging

Console Utilities API Reference

Console API Reference

●編號1074，輸入編號直達本文

●輸入m獲取文章目錄

Web開發