Web開發(fā)者經(jīng)常使用Firefox的firebug或者Chrome的開發(fā)人員工具進行Web調(diào)試,包括針對JavaScript,DOM元素和CSS樣式的調(diào)試。但是,當(dāng)我們期望為移動Web站點或應(yīng)用進行調(diào)試時,這些工具就很難派上用場。
weinre就是一個幫助我們在桌面來遠程調(diào)試運行在移動設(shè)備瀏覽器內(nèi)的Web頁面或應(yīng)用的調(diào)試工具。weinre是WEb INspector REmote的簡寫,現(xiàn)在是Apache的一個開源項目,托管在github。
下面將介紹如此在日常工作使用它。
首先,我們要下載weinre的jar包——項目官方已經(jīng)找不到該jar文件,網(wǎng)上能夠找到,這里建議搭建個獨立的web服務(wù)器,jar運行后是一個本地的服務(wù)器,和web服務(wù)器差不多~~
然后通過運行dos命令來啟動它(請注意在你的電腦上已經(jīng)安裝有JDK)。運行命令如下,需要把路徑改成你的實際文件位置:
java -jar d:\tools\weinre-jar\weinre.jar –httpPort 8081 –boundHost -all- (httpPort是指定服務(wù)端口,boundHost參數(shù)說明可以使用IP訪問,all參數(shù)代表支持所有的host)。
訪問localhost:8081,如果看到如下的頁面,說明weinre已經(jīng)啟動成功:
輸入debug client user interface地址(調(diào)試客戶端UI地址)。本例中即:http://localhost:8081/client/#anonymous,其中#anonymous是默認的調(diào)試id(debug id)。如果這個weinre調(diào)試服務(wù)器只是由你一個人使用,那么你可以使用默認的debug id:anonymous。 啟動的weinre調(diào)試客戶端ui如下圖:
在需要調(diào)試的頁面加入中以下腳本:,注意把localhost換成手機能夠訪問的真實IP地址。當(dāng)手機訪問這個頁面時,weinre客戶端就會檢測到目標(biāo)設(shè)備,然后就可以對它進行調(diào)試了。
因為手機上不方便截圖,我這里就用兩個瀏覽器窗口來展示效果,其實手機上的效果跟右邊是一樣的。
靜態(tài)頁面并不能滿足我們的需求,很多實際效果比如touch事件,滾動事件,鍵盤輸入事件等,都需要在真實的環(huán)境下測試,這時就需要用到模擬器。就像我們測試ie6一樣,AVD模擬器可以類比于PC上的虛擬機,當(dāng)我們需要測試某一特定的機型時,我們可以新建一個AVD,進行一系列的測試。不過使用AVD的前提是已經(jīng)部署好android的開發(fā)環(huán)境,這個需要JDK + android SDK + Eclipse + ADT,還是稍微有點繁瑣。
在PC上,我們可以很方便地配host,但是手機上如何配host,這是一個問題。
這里主要使用fiddler和遠程代理,實現(xiàn)手機配host的操作,具體操作如下:
更多建議: