作為前端開發(fā)，我們每天都會用 Chrome DevTools 調(diào)試 Chrome 的網(wǎng)頁，但其實它還可以遠程調(diào)試安卓手機的網(wǎng)頁。

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

今天我們就來了解一下：

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

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

然后在 chrome 打開 chrome://inspect 頁面，勾選 Discover USB devices（默認是勾選的）：

這時候下面就會出現(xiàn)一個提示：請在設(shè)備上接受 debugging 會話

在手機上點擊確定，就會建立調(diào)試會話：

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

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

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

可以審查元素：

可以打斷點：

也可以用 Performance 分析性能：

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

不過這個過程你可能會遇到這樣的問題，打開的窗口是空白的或者是 404:

這是因為調(diào)試的目標(biāo)可能是任意 chrome 版本，那么 Chrome Devtools 自然也要用相應(yīng)的版本才行，所以就需要動態(tài)下載。

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

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

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

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

Chrome DevTools 的原理

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

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

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

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

下載金絲雀版本的 chrome：

在 Chrome DevTools 的 more tools 里打開 Protocol Monitor 面板：

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

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

總結(jié)

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

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

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

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

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