dwi2的碎念

不能只是曬網

開發Mobile Web的Remote Debugging工具

| Comments

Web developer應該都相當熟知Firebug, Chrome的開發人員工具以及Safari的Web Inspector這類工具, 無論是JavaScript除錯或是調整版面layout都非常實用, 但在開發mobile web app時, 行動裝置多半沒有提供這類原生開發輔助工具該怎麼辦呢?

iOS 6 Safari

從iOS 6開始, Mobile Safari提供遠端debugging的功能, 讓mobile web開發者可以透過Mac上的Safari Web Inspector直接檢視. 使用方式如下:

  1. 要有一台Mac電腦

  2. 開啟iOS 6裝置上的設定, 選取Safari頁籤, 選取進階 iOS 6 Safari設定

  3. 網頁檢視器設定調成開啟狀態 開啟iOS 6 Safari的網頁檢視器

  4. 在Mobile Safari內開啟你要檢視或除錯的網站

  5. 將iOS裝置連接上Mac電腦, 開啟Safari, 在開發人員選單下會出現你的iOS裝置及開啟中的網站頁籤, 選取它的網站頁籤就可以開始檢視/除錯該網站了 Mac上Safari的開發人員選單

Web Inspector提供的功能相當全面, 包含console檢視, DOM檢視, networking事件的時間軸檢視, 甚至可以設break point. 更多detail可以參考Apple的開發者文件

iOS 6以前Safari或其他瀏覽器

至於在iOS 6以前的Safari版本或是其他瀏覽器要怎麼進行遠端除錯呢? 可以使用weinre這個工具, 但weinre這套工具需要的前置作業比較多, 要事先將一支weinre提供的debug target script插入要除錯的網站頁面之中, 同時要在電腦上安裝weinre的debug server(事實上是一個用node js開發的web server), 因為它的運作原理就是利用這隻debug target script攔截console及其他相關資訊, 導到電腦上debug server, 然後再用電腦上的瀏覽器連上debug server檢視mobile web的資訊.

這套工具我沒有實際操作過, 詳細使用方式請上weinre官網查詢

此外, Adobe也提供一個服務叫做Edge Inspect, 可以讓開發者即時在行動裝置上檢視及除錯開發中的mobile web app, 其實就是利用weinre這套工具, 不過是由Adobe幫你host weinre server.

Android 上的Web debugging console

Android會把瀏覽器的console導到Android logging system上, 因此只要直接利用adb logcat搭配filter就可以輕鬆的檢視Android上各瀏覽器的console.

這個方法需要安裝Android SDK以及對應Android裝置的driver, 詳細安裝方法請參考Android官網

Android SDK安裝好, 並且將Android裝置以usb連上電腦之後, 可以用以下的命令查詢裝置連接狀況:

adb devices

如果出現類似下面的輸出訊息

List of devices attached
emulator-5554  device

表示adb已經連接上Android裝置, 接下來用

adb logcat

就可以倒log出來看, 不過這樣會被大量的Android訊息淹沒

adb是開發環境跟Android裝置的橋樑, logcat是adb的工具之一, 顧名思義就是把Android system message倒出來到電腦上給開發者看的工具. Android的log的開頭會有priority和tag的標籤, 格式如下

<priority>/<tag>

實際上看到的log開頭可能會類似這樣

I/ActivityManager(  585): Starting activity: Intent { action=android.intent.action...}

tag就是輸出此log的activity名稱, priority是log的層級, 有以下7種:

V — Verbose (lowest priority)
D — Debug
I — Info
W — Warning
E — Error
F — Fatal
S — Silent (highest priority, on which nothing is ever printed)

我們只需要看瀏覽器activity, Debug層級以上輸出的log即可. Android上主流瀏覽器有三種,

  • Android native browser
  • Chrome
  • Firefox

Chrome的web console的activity名為chromium, Firefox的web console的activity為GeckoConsole, Android native browser則有兩種activity名, Android 1.6版及以前為browser, 2.1版及以後為WebCore

adb logcat的使用說明在此, 命令格式如下

[adb] logcat [<option>] ... [<filter-spec>] ...

其中filter的格式為

[tag]:[priority]

因此要用adb logcat看Android上三大瀏覽器的web console同時過濾掉其他android log, 可以用以下命令

adb logcat browser:D WebCore:D chromium:D GeckoConsole:D *:S

Android上的Chrome DevTools

2013/4/16更新

Android上的Chrome也有提供類似Mobile Safari Web Insector的功能 - Chrome DevTools, 讓開發者用PC上的Chrome開發者工具直接檢視行動版Chrome的內容. 這個工具一樣要先在電腦上安裝Android SDK, 同時Android裝置上Chrome的USB偵錯功能要打開, 這個選項在Chrome的設定->開發人員工具->啟用USB網頁偵錯功能

開啟之後將USB連接Android裝置及電腦(可以在adb shell輸入adb devices檢查裝置連線狀況), 然後在adb shell內輸入以下command:

adb forward tcp:9222 localabstract:chrome_devtools_remote

其中tcp:後面接的port可以更換, 不一定要用9222 port. 接下來開啟電腦上的Chrome, 連上本機網路位址localhost:9222, 就可以看到熟悉的Chrome開發人員工具了! 只不過這次檢視的是在Android裝置上Chrome顯示的網頁. 細節可以參考這篇

小結

最近我也是因為工作關係才接觸到Mobile Safari Web Inspector和adb logcat, 多虧這些工具讓我節省不少寶貴的開發時間, 畢竟如果要在沒有console的環境下給JavaScript除錯實在是瞎子摸象啊!

Comments