[Android] 好用的 Chrome 瀏覽器之開發人員工具 – USB 網頁偵錯功能 (Chrome for Android Remote Debugging)

Standard

最近在 Android 上終於推出繁體中文的 Chrome 測試版瀏覽器,除了不支援 Flash 外,其他部分個人認為都比內建或其他 Android 網頁瀏覽器來的好用。不過只支援 Android 4.0 。

其中更包含「開發人員工具」,讓開發手機版網頁的人可以方便地在電腦上用 Developer Tools 來針對手機上的網頁進行除錯。本篇文章就來簡單介紹一下使用方法。

測試環境:

手機:

SAMSUNG i9100 SII (Android 4.0.3)

Chrome Beta 0.18.4409.2396

電腦:

Windows 7 64bit

已安裝好 Android 驅動程式

首先,在手機上須設定開啟 USB 偵錯。位置在 設定→開發人員工具 裡面。

然後打開 Chrome Beta,進去 設定→開發人員工具,將「啟用 USB 網頁偵錯功能」打開:

而電腦端需有 Android SDK,因為我們要使用其中的 adb.exe 。

還沒有的朋友可以在官方網站下載,解壓縮到特定目錄,本例為 F:\android-sdk\ 。

備好上述工具後,用 USB 線將 Android 手機與電腦連接,

然後打開「命令提示字元」(cmd.exe),切換至 android-sdk 目錄,然後進到 platform-tools 子目錄,鍵入:

adb.exe devices

如果有正確抓到手機裝置的話,應該會列出像下面資訊:

List of devices attached
001ase655ac97e device

然後是重頭戲,設定 USB 網頁偵錯功能:

F:\android-sdk\platform-tools>adb.exe forward tcp:9222 localabstract:chrome_devtools_remote

然後打開瀏覽器,連到 http://localhost:9222 試試看吧!

可以看看介面,就如同 Chrome 電腦版的開發人員工具喔!

就不多介紹操作方法了,真的很方便!

例如我在 Elements 中選擇這個 div 元素:

這時手機 Chrome 瀏覽器中也會顯示這個區塊被選擇了:

 

當然也可以即時在電腦上進行修改 CSS 樣式、增加或刪除元素等等的操作,手機 Chrome 瀏覽器上也會立即呈現喔!

更少不了好用的 Console 工具,一樣可以用 console.log 偵錯,或是即時輸入 javascript 執行。

例如在電腦上試著輸入 alert 來輸出 “Hello World from PC” 印出對話框:

手機上也馬上就蹦出來了:

 

 

 

這邊還有個介紹影片,有興趣了解的可以看看:

https://www.youtube.com/watch?feature=player_embedded&v=s4zpL4VBbuU

 

 

 

利用 Android 的 Chrome 瀏覽器工具,往後進行手機網頁製作時就更方便囉!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *