聊一聊如何基于Chrome Devtools 進(jìn)行遠(yuǎn)程調(diào)試
看來遠(yuǎn)程調(diào)試是一大痛點(diǎn)。介紹了一個(gè)基于 Chrome Devtools 的遠(yuǎn)程調(diào)試工具，可以讓前端開發(fā)者更好地調(diào)試遠(yuǎn)程 web 頁面。今日文章由騰訊前端工程師 @Linkpan 分享。
Devtools-Remote-Debugger 正如其名，是一個(gè)基于最新版 Chrome Devtools 開發(fā)者工具構(gòu)建的 Web 遠(yuǎn)程調(diào)試工具。它能夠讓 Web 開發(fā)者使用最熟悉的 devtools 調(diào)試工具來遠(yuǎn)程調(diào)試 Web 項(xiàng)目。
GitHub 項(xiàng)目地址：https://github.com/Nice-PLQ/devtools-remote-debugger
先來看下遠(yuǎn)程調(diào)試的效果
簡單來說，實(shí)現(xiàn)遠(yuǎn)程調(diào)試需要具備三個(gè)條件：
通過原生 Javascript 實(shí)現(xiàn) CDP 的協(xié)議規(guī)范，構(gòu)建出 sdk.js (文件名稱任意)，并在被調(diào)試頁面中加載該 js
構(gòu)建出 Chrome Devtools 前端產(chǎn)物，并部署為 web 頁面
實(shí)現(xiàn) websocket 協(xié)議轉(zhuǎn)發(fā)
Chrome Devtools 與目標(biāo)頁面之間的協(xié)議交互是用 websocket 來通信的。通過實(shí)現(xiàn)一個(gè) websocket 轉(zhuǎn)發(fā)的中間服務(wù)層，其作用是將 devtools 的協(xié)議消息轉(zhuǎn)發(fā)給目標(biāo)頁面處理，或?qū)⒛繕?biāo)頁面的協(xié)議消息轉(zhuǎn)發(fā)給 devtools 處理。大概的示意圖如下
為什么需要遠(yuǎn)程調(diào)試
外網(wǎng)用戶反饋一些頁面異常，比如某些操作沒響應(yīng)（大概率 JS 報(bào)錯(cuò)）, 上報(bào)日志不一定能排除問題
本地開發(fā)時(shí)沒有問題，但在某些真機(jī)上表現(xiàn)不對
測試同學(xué)反饋 web 在某個(gè)機(jī)型某個(gè)系統(tǒng)版本上有 bug，然而我們沒有同等條件下的機(jī)器來復(fù)現(xiàn)（測試團(tuán)隊(duì)與開發(fā)團(tuán)隊(duì)在不同地域）
如何使用遠(yuǎn)程調(diào)試
根據(jù)項(xiàng)目 README 說明構(gòu)建出 sdk.js 代碼，該 SDK 是 CDP 的協(xié)議實(shí)現(xiàn)。然后在需要調(diào)試的 Web 項(xiàng)目 HTML 中加載該文件
npm run start部署遠(yuǎn)程調(diào)試后端 Node 服務(wù)建立連接后，在調(diào)試管理端打開 Chrome Devtools 開發(fā)者工具來調(diào)試目標(biāo)頁面
不管是從調(diào)試能力、調(diào)試效果還是調(diào)試體驗(yàn)來說，都遠(yuǎn)比常規(guī)的 VConsole 或其他調(diào)試工具要好。目前，已實(shí)現(xiàn)的功能如下，基本上能夠覆蓋常用的調(diào)試能力，同時(shí)也擴(kuò)展了調(diào)試協(xié)議，實(shí)現(xiàn)了頁面實(shí)時(shí)預(yù)覽能力。
1、調(diào)試管理端
展示當(dāng)前可調(diào)試的頁面信息
2、Element
HTML 實(shí)時(shí)查看、屬性編輯
Style、Computed 樣式預(yù)覽
hover 元素高亮
元素審查
Screencast
3、Console
JS 代碼執(zhí)行
JS 運(yùn)行時(shí)錯(cuò)誤堆棧預(yù)覽
DOM 元素片段
查看
console.log/warn調(diào)用堆棧
4、Source
JS 運(yùn)行時(shí)錯(cuò)誤代碼文件定位及索引
查看 HTML、JS、CSS 源文件代碼
源代碼格式化預(yù)覽
5、Network
異步請求抓包（Fetch、XHR）
HTML、JS、CSS 靜態(tài)資源請求抓包
6、Application
Local Storage
Session Storage
Cookies
7、Screenshot（擴(kuò)展協(xié)議）
頁面實(shí)時(shí)預(yù)覽
引用
Chrome DevTools Protocol：https://chromedevtools.github.io/devtools-protocol/
ChromeDevTools/devtools-frontend：https://github.com/ChromeDevTools/devtools-frontend
GitHub 項(xiàng)目地址：https://github.com/Nice-PLQ/devtools-remote-debugger