Android在Chrome做Debug封包方法

以前我 debug Android 網頁或手機上的站台時，多半都先想到 Fiddler 或其他代理工具。但有些情境只是想快速看手機 Chrome 開的頁面、Console、Network，其實直接插 USB 用 Chrome DevTools 遠端除錯就很夠了。

這種方法適合什麼情境

我覺得它很適合：

1. 手機版網頁版面跑掉。
2. 手機瀏覽器 JavaScript 報錯。
3. 想看手機上實際發出的 Network 請求。
4. 想直接 inspect 手機上的 DOM。

如果你的需求只是除錯手機版網站，這比開 Android Studio 輕很多。

基本準備

通常要先準備這幾件事：

1. Android 手機開啟開發者選項。
2. 啟用 USB 偵錯。
3. 用 USB 線接到電腦。
4. 手機同意這台電腦的除錯授權。

如果其中一步沒做，Chrome 很可能看不到裝置。

Chrome DevTools 遠端除錯流程

1. 手機用 Chrome 打開要測的頁面。
2. 電腦端 Chrome 輸入 chrome://inspect/#devices。
3. 確認有看到你的 Android 裝置與目前開啟的分頁。
4. 點擊 inspect，就能直接開 DevTools。

進去之後基本上和桌面版除錯很像，可以看：

1. Elements。
2. Console。
3. Network。
4. Sources。

這招的好處

1. 直接看手機真實渲染結果。
2. 不用猜是某個 mobile browser 行為差異。
3. 可以直接看到裝置上的 Console 與請求。

尤其有些 CSS、viewport、觸控事件問題，在桌面模擬器看不出來，接真機差很多。

和代理工具的差異

Fiddler、mitmproxy 這類工具比較偏封包攔截與代理分析，對 App 或跨域請求調查很有幫助；但如果你只是想 debug Chrome 打開的網頁，DevTools 遠端除錯會直接很多。

所以兩者不是誰取代誰，而是解不同問題。

後來又看到的方向

如果之後要更深入分析 HTTPS 流量或非瀏覽器 App 封包，我也有先記下 mitmproxy：

mitmproxy - an interactive HTTPS proxy

如何使用 mitmproxy 來監看手機上的 apps 連線到哪些網站 | 隨便寫寫

參考

遠程調試 Android 設備使用入門 | Tools for Web Developers | Google Developers

星塵 AskeinG: [分享] 透過 DevTools 在 Android Chrome 除錯