2012年7月6日 星期五

Mobile Web Debug工具

目前 Adobe Shadow還不提供Linux版的工具
如果在Linux上開發還有一些其他的debug方法
一.Chrome USB DEBUG
1.環境需求
電腦:需安裝Android SDK
Device:Android 4.0以上版本+安裝Chrome
2.流程
1.打開Android上 Chrome的 usb debug
2.device usb連接電腦
3.電腦上在cmd下執行
adb devices 檢查是否有device抓到
如果沒有看到device,可試著執行
adb kill-server
然後重新插入device
4.電腦上執行
 adb forward tcp:3138 localabstract:chrome_devtools_remote
5.電腦上打開chrome開啟網頁 localhost:3138 會顯示清單,選取要debug的頁面.如果沒有請refresh一下 6.點選要debug的頁面 即可對device做debug
二.Weinre Adobe Shadow是針對Weinre再包裝的產品,可以直接在電腦上安裝weirne使用 PC環境設定 1.安裝 需先安裝nodejs與npm再以npm安裝weinre

npm -g install weinre
2.執行weinre 設定使用的ip與port 執行
weinre --hostPort 1234 --boundHost 192.168.11.80
使用 1.device端 使用chrome開啟:http://192.168.11.80:1234 頁面上找到target demo,click
2.pc端 使用chrome開啟:http://192.168.11.80:1234 頁面上找到 Access Point/debug client user interface,click 開出畫面 看到target 有連結 click即可使用 參考網頁: http://kuro.tw/blog/2012/02/21/weinre-debug-mobile-web
三.PhoneGap線上weinre debug 1.開啟 http://debug.phonegap.com/ 2.依照步驟,輸入自訂的id並取得script tag 插入要debug的網頁內 3.開啟 在電腦的Chrome開啟 http://debug.phonegap.com/client/#自訂id

沒有留言: