[分享] 透過 DevTools 在 Android Chrome 除錯

之前提到三種手機瀏覽器上除錯的方式：

• 透過 WebIDE 在 Android Firefox 除錯
• 透過 DevTools 在 Android Chrome 除錯（本篇）
• 透過 Web Inspector 在 iOS 上的 Safari 除錯

本篇將會介紹使用 DevTools 在 Android 上的 Chrome 瀏覽器除錯的方法。

首先你電腦上的 Chrome 必須是 32 版之後，而 Android 則必須是 4.0 之後的版本。
你可以在電腦上開啟『關於 Google Chrome』檢查版本。
在手機上則是進入『設定 > 關於手機』就可以看到 Android 版本。

此外，還需注意，電腦上 Chrome 的版本，要比手機的 Chrome 版本新，或一致。
可以打開手機 Chrome 的『設定 > 關於 Chrome』與電腦上的版本比對。

接著確定『設定 > 開發人員選項 > USB 偵錯』有開啟。

沒有開發人員選項的話，先進入『設定 > 關於手機』，點七下『版本號碼』。

如果是 Windows 的使用者，你還需要先安裝 OEM 驅動程式。

一切就緒之後，現在你可以把你的 Android 手機接上電腦了！
然後，在電腦上的 Chrome 開啟一個新分頁，連上 chrome://inspect 網址。
確定『Discover USB devices』有打勾，一切順利的話，你會看到手機上 Chrome 的分頁。

此時，可以直接點下想除錯的分頁下方的『Inspect』，就可以用 DevTools 開始 Debug。而且這個工具甚至可以直接在電腦上控制手機上瀏覽器的動作，非常方便！

參考資料：

• Remote Debugging on Android with Chrome
• Remote debugging on Android with Chrome DevTools