作為前端開(kāi)發(fā)，我們每天都會(huì)用 Chrome DevTools 調(diào)試 Chrome 的網(wǎng)頁(yè)，但其實(shí)它還可以遠(yuǎn)程調(diào)試安卓手機(jī)的網(wǎng)頁(yè)。

那 Chrome Devtools 如何遠(yuǎn)程調(diào)試安卓網(wǎng)頁(yè)呢？它的實(shí)現(xiàn)原理是什么？

今天我們就來(lái)了解一下：

遠(yuǎn)程調(diào)試安卓網(wǎng)頁(yè)

用數(shù)據(jù)線把安卓手機(jī)和電腦連接起來(lái)，在手機(jī)設(shè)置里打開(kāi) USB 調(diào)試：

然后在 chrome 打開(kāi) chrome://inspect 頁(yè)面，勾選 Discover USB devices（默認(rèn)是勾選的）：

這時(shí)候下面就會(huì)出現(xiàn)一個(gè)提示：請(qǐng)?jiān)谠O(shè)備上接受 debugging 會(huì)話

在手機(jī)上點(diǎn)擊確定，就會(huì)建立調(diào)試會(huì)話：

下面就會(huì)列出所有可以調(diào)試的網(wǎng)頁(yè)：

瀏覽器里的網(wǎng)頁(yè)，或者 APP 調(diào)試包的 webview 的網(wǎng)頁(yè)都會(huì)列出來(lái)。

點(diǎn)擊 inspect 就可以調(diào)試了：

可以審查元素：

可以打斷點(diǎn)：

也可以用 Performance 分析性能：

各種調(diào)試 PC 網(wǎng)頁(yè)的功能基本都支持。這樣就可以愉快的調(diào)試安卓的移動(dòng)端網(wǎng)頁(yè)了。

不過(guò)這個(gè)過(guò)程你可能會(huì)遇到這樣的問(wèn)題，打開(kāi)的窗口是空白的或者是 404:

這是因?yàn)檎{(diào)試的目標(biāo)可能是任意 chrome 版本，那么 Chrome Devtools 自然也要用相應(yīng)的版本才行，所以就需要?jiǎng)討B(tài)下載。

而動(dòng)態(tài)下載的 devtools 網(wǎng)頁(yè)是在 google 域名下的，需要科學(xué)上網(wǎng)才行。

科學(xué)上網(wǎng)之后，就可以正常的下載 Chrome DevTools 來(lái)做調(diào)試，也就不會(huì)白屏或 404 了。

但也不是每次都要科學(xué)上網(wǎng)，一個(gè)調(diào)試目標(biāo)只需要下載一次 Chrome Devtools 的代碼，之后就可以一直用了。

我們了解了 Chrome DevTools 怎么調(diào)試安卓的網(wǎng)頁(yè)，那它的原理是什么呢？

Chrome DevTools 的原理

Chrome DevTools 被設(shè)計(jì)成了和 Chrome 分離的架構(gòu)，兩者之間通過(guò) WebSocket 通信，設(shè)計(jì)了專(zhuān)門(mén)的通信協(xié)議：Chrome DevTools Protocol。

這樣只要實(shí)現(xiàn)對(duì)接 CDP 協(xié)議的 ws 服務(wù)端，就可以用 Chrome DevTools 來(lái)調(diào)試，所以 Chrome DevTools 可以用來(lái)調(diào)試瀏覽器的網(wǎng)頁(yè)、調(diào)試 Node.js，調(diào)試 Electron 等。

那自然也就可以遠(yuǎn)程調(diào)試安卓手機(jī)的網(wǎng)頁(yè)了，只要開(kāi)啟了 USB 調(diào)試，那手機(jī)和電腦就可以做網(wǎng)絡(luò)通信，從而實(shí)現(xiàn)基于 CDP 的調(diào)試。

這個(gè) CDP 的調(diào)試協(xié)議是 json 格式的，如果想看它傳輸了什么也是可以的：

下載金絲雀版本的 chrome：

在 Chrome DevTools 的 more tools 里打開(kāi) Protocol Monitor 面板：

然后你就可以在 Protocol Monitor 面板里看到所有的 CDP 協(xié)議的數(shù)據(jù)交互了：

這就是調(diào)試的實(shí)現(xiàn)原理。

總結(jié)

Chrome DevTools 和 Chrome 是分離的架構(gòu)，兩者通過(guò) WebSocket 通信，通信協(xié)議是 Chrome DevTools Protocol，可以在金絲雀版本的 Protocol Monitor 里看到 CDP 的數(shù)據(jù)交互。

因?yàn)檫@樣的實(shí)現(xiàn)原理，Chrome DevTools 可以調(diào)試很多目標(biāo)，其中就包括 USB 設(shè)備。

打開(kāi) USB 調(diào)試之后，在 chrome://inspect 頁(yè)面就可以看到可調(diào)試的網(wǎng)頁(yè)了，點(diǎn)擊對(duì)應(yīng)的網(wǎng)頁(yè)就可以調(diào)試。

要注意的是調(diào)試的目標(biāo)瀏覽器要和用的 Chrome DevTools 版本一一對(duì)應(yīng)才行，所以第一次調(diào)試會(huì)先下載 Chrome DevTools，這需要訪問(wèn) google 的域名，如果沒(méi)有科學(xué)上網(wǎng)，會(huì)有白屏和 404 的問(wèn)題。

理解了調(diào)試的原理，Chrome DevTools 調(diào)試安卓網(wǎng)頁(yè)的流程，就可以愉快的遠(yuǎn)程調(diào)試安卓手機(jī)的網(wǎng)頁(yè)了。