Android Chrome 開發者工具
平常在PC上開發網頁,常常會使用到Chrome瀏覽器的開發者工具,看看錯誤訊息,或進行測試。
但如果這個錯誤是僅發生在手機上,PC開網頁都正常,那該如何debug呢?
Chrome 提供了 Remote Debugging Devices
的功能,方便我們使用PC版的 Chrome 連線到手機上做 debug。
請參考以下方式:
- 確認電腦可以使用 adb 連線至手機
手機的話要接 USB 線且打開 USB debugging
的功能,
模擬器的話就不用了,這時執行 adb devices
確認電腦有連線到手機/模擬器:
adb devices
List of devices attached
emulator-5554 device
- 使用桌面版 Chrome 連線至手機
先開啟模擬器上的瀏覽器,瀏覽至要 debug 的網頁:
這時打開桌面版的 Chrome,瀏覽至 chrome://inspect/#devices
,
這邊會列出來目前已連線的手機上的 web view session
(有時候即使手機上目前是顯示桌面,但只要那個瀏覽器還在背景執行,這邊就還是可以看到那個 webview)
這時點下 inspect
連結,就可以看到平常 developer tool
的畫面,
不過這時 debug 的是手機/模擬器上的 webview 囉!