Chrome DevTools 遠程調試安卓網頁的原理

作爲前端開發，我們每天都會用 Chrome DevTools 調試 Chrome 的網頁，但其實它還可以遠程調試安卓手機的網頁。

那 Chrome Devtools 如何遠程調試安卓網頁呢？它的實現原理是什麼？

今天我們就來了解一下：

遠程調試安卓網頁

用數據線把安卓手機和電腦連接起來，在手機設置裏打開 USB 調試：

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

這時候下面就會出現一個提示：請在設備上接受 debugging 會話

在手機上點擊確定，就會建立調試會話：

下面就會列出所有可以調試的網頁：

瀏覽器裏的網頁，或者 APP 調試包的 webview 的網頁都會列出來。

點擊 inspect 就可以調試了：

可以審查元素：

可以打斷點：

也可以用 Performance 分析性能：

各種調試 PC 網頁的功能基本都支持。這樣就可以愉快的調試安卓的移動端網頁了。

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

這是因爲調試的目標可能是任意 chrome 版本，那麼 Chrome Devtools 自然也要用相應的版本纔行，所以就需要動態下載。

而動態下載的 devtools 網頁是在 google 域名下的，需要科學上網纔行。

科學上網之後，就可以正常的下載 Chrome DevTools 來做調試，也就不會白屏或 404 了。

但也不是每次都要科學上網，一個調試目標只需要下載一次 Chrome Devtools 的代碼，之後就可以一直用了。

我們瞭解了 Chrome DevTools 怎麼調試安卓的網頁，那它的原理是什麼呢？

Chrome DevTools 被設計成了和 Chrome 分離的架構，兩者之間通過 WebSocket 通信，設計了專門的通信協議：Chrome DevTools Protocol。

這樣只要實現對接 CDP 協議的 ws 服務端，就可以用 Chrome DevTools 來調試，所以 Chrome DevTools 可以用來調試瀏覽器的網頁、調試 Node.js，調試 Electron 等。

那自然也就可以遠程調試安卓手機的網頁了，只要開啓了 USB 調試，那手機和電腦就可以做網絡通信，從而實現基於 CDP 的調試。

這個 CDP 的調試協議是 json 格式的，如果想看它傳輸了什麼也是可以的：

下載金絲雀版本的 chrome：

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

然後你就可以在 Protocol Monitor 面板裏看到所有的 CDP 協議的數據交互了：

這就是調試的實現原理。

Chrome DevTools 和 Chrome 是分離的架構，兩者通過 WebSocket 通信，通信協議是 Chrome DevTools Protocol，可以在金絲雀版本的 Protocol Monitor 裏看到 CDP 的數據交互。

因爲這樣的實現原理，Chrome DevTools 可以調試很多目標，其中就包括 USB 設備。

打開 USB 調試之後，在 chrome://inspect 頁面就可以看到可調試的網頁了，點擊對應的網頁就可以調試。

要注意的是調試的目標瀏覽器要和用的 Chrome DevTools 版本一一對應纔行，所以第一次調試會先下載 Chrome DevTools，這需要訪問 google 的域名，如果沒有科學上網，會有白屏和 404 的問題。

理解了調試的原理，Chrome DevTools 調試安卓網頁的流程，就可以愉快的遠程調試安卓手機的網頁了。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/F9b9pzAJYEJ0YHnqL0C7Ag