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>元素的所有元素：

$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)

還有比較特殊的%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也可以，例如這是某個應用裡的遊戲，用的也是網頁：

🐸往期我的原創好文推薦

微前端的部署最佳實踐（k8s + ingress）

微前端框架是怎麼導入加載子應用的  【3000字精讀】

熬夜準備的一個React項目升級Vite的指南

尤雨溪的5KB petite-vue源碼解析

熬夜寫的解析掘金新版本編輯器源碼

Vite和Webpack的核心差異

CSS是如何發起攻擊的?

使用require.context，實現去路由中心化管理

一行代碼實現display"過渡動畫"原理

在React中實現和Vue一樣舒適的keep-alive

Node.js結合ProtoBuffer,從零實現一個redis! [一萬字]

使用Node.js驅動Redis,實現一個消息隊列！

8000字總結的前端性能優化

前端工程師學Docker ？看這篇就夠了   【零基礎入門 原創】

深度：手寫一個WebSocket協議    [7000字]

精讀:10個案例讓你徹底理解React hooks的渲染邏輯

原創：如何自己實現一個簡單的webpack

5000字解析：前端五種跨平臺技術

如何優化你的超大型React應用 【原創精讀】

前端面試官:你知道source-map的原理是什麼嗎？

原創：帶你從零看清Node源碼createServer和負載均衡整個過程

Express version 4.17核心源碼解析

通過Node.js的Cluster模塊源碼，深入PM2原理

大前端時代，淺談JavaScript開發重型跨平臺應用以及架構

為什麼我們要熟悉這些通信協議？【精讀】

看完兩件事

如果你覺得這篇內容對你挺有啟發，我想邀請你幫我幾件小事

1.點個「在看、贊、關注」，讓更多人也能看到這篇內容（點了「在看」，bug -1 😊）

2.關注微信公眾號「前端巔峰」，讓我持續為你推送精選好文

我是Peter譚,一位小廠前端開發工程師，喜歡搞架構，對性能優化，跨平臺開發有一定研究，還喜歡做自媒體，區塊鏈。歡迎關注我