Chrome Devtools 高級調試指南（新）

時間 2019-11-05

標籤 chrome devtools 高級調試指南欄目 Chrome 简体版

原文原文鏈接

前言

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

經常使用命令和調試
黑盒腳本：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更改斷點的類型： vue

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

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

3. 黑盒腳本：`Blackbox Script`

剔除多餘腳本斷點。jquery

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

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

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

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

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

5. 本地覆蓋：`local overrides`

使用咱們本身的本地資源覆蓋網頁所使用的資源。web

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

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

該項能夠自動修改除XHR異步請求的資源，下載的文件若未格式化，能夠點左下角。chrome

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中會監聽到並顯示你的頁面。 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