2016年4月3日 星期日

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

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

本篇將會介紹使用 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。而且這個工具甚至可以直接在電腦上控制手機上瀏覽器的動作,非常方便!

參考資料:

沒有留言: