移動端Web開發除錯之Weinre除錯教程
在設計師與前端開發人員的努力下,一個WebApp出爐了,可是測試人員說了一堆的問題:某某機型下頁面表現不一致,某某系統下頁面如何如何,某某系統瀏覽器下頁面怎麼怎麼滴。看著滿滿的測試彙總文件,我們曾經在一個又一個知名或不知名的手機終端上重複著這些工作:仔細的排查程式碼,alert可疑的變數,甚至不惜重構來嘗試解決這種不一致的問題。雖然說Android 4.0+以上的移動裝置支援桌面版Chrome遠端除錯,而且在Android 4.4以下也僅限於預覽Chrome手機版瀏覽器內部效果,我們無法在問題瀏覽器下實時聯調。此時我們往往無奈地將這些問題歸為瀏覽器相容性bug。我們暗暗思想著,要是手機端瀏覽器有個類似Firebug的除錯工具就好了!現實不是!移動網際網路時代,瀏覽器發展的趨勢、瀏覽器除錯工具發展的未來一定是基於移動端除錯的便利性、遠端除錯的廣泛支援。我們大膽預言,支援多終端跨裝置跨瀏覽器的遠端除錯工具將會越來越多。
Weinre(WebInspector Remote)是一款基於Web Inspector(Webkit)的遠端除錯工具,藉助於網路,可以在PC上直接除錯執行在移動裝置上的遠端頁面,中文意思是遠端Web檢查器,有了Weinre,在PC上可以即時修改目標網頁的HTML/CSS/Javascript,除錯過程可實時顯示移動裝置上頁面的預覽效果,並同步顯示裝置頁面的錯誤和警告資訊,可以檢視網路資源的資訊,不過weinre不支援斷點除錯。該專案目前是 Apache Cordova 的一部分。
weinre工作原理
兩張圖讀懂Weinre的工作機制:
上述三層結構示意圖的含義:
Debug客戶端(client):本地的WebInspector,遠端除錯客戶端。
Debug服務端(agent):本地的HTTPServer,為Debug目標頁面與Debug客戶端建立通訊。
Debug目標頁面(target):被除錯的頁面,頁面已嵌入weinre的遠端js。
客戶端、目標頁面與Debug服務端之間使用XMLHttpRequest (XHR)進行HTTP通訊,你通常的使用情形是將Debug客戶端與服務端搭建在桌面開發環境,Debug目標頁面放在移動裝置。
由於Weinre的debug客戶端是基於Web Inspector開發,而Web Inspector只相容WebKit核心的瀏覽器,所以只能在Chrome/Safari瀏覽器開啟Weinre客戶端進行除錯。
我在Chrome 38/39版本測試時開啟Debug客戶端出現頁面白板,原因未知,瞭解原因的歡迎留言給我。換為Safari瀏覽器開啟則正常。
Weinre系統支援性
iOS 3.1.3或更低版本不支援
webOS 1.45或更早版本不支援
Debug客戶端支援的平臺
weinre的Mac程式(自帶客戶端) - Mac OSX 10.6 64-bit
Google Chrome 8及以上版本瀏覽器
Apple Safari 5及以上版本瀏覽器
Debug目標頁面支援的平臺
Android 2.2+系統瀏覽器
Android 2.2+ 中的phonegap
iOS 4+ 的safari瀏覽器
BlackBerry v6.x 模擬器
webOS
chrome8+
safari5+
關於Weinre的Java版本下載地址無法訪問的問題,借用skyhh同學的話,是由於weinre被PhoneGap收購,PhoneGap又被Adobe收購,Adobe收購PhoneGap後,把PhoneGap捐給了Apache,Apache把PhoneGap放在Cordova的專案中。Weinre也從最初的Java移植到了當前的JavaScript。在GitHub上搜索weinre的結果中前兩個就是官方的Weinre專案。
先說第二個專案,是Apache後來推出的JavaScript版本weinre,需要在nodejs環境下安裝使用,使用npm包管理工具也可以直接下載安裝。
安裝與服務啟動命令如下:
npm -g install weinre //安裝weinre
weinre --boundHost [hostname | ip address |-all-] --httpPort [port] //啟動weinre
機器上有nodejs開發環境的同學到此即配置完畢,沒有nodejs環境的繼續往下看。
第一個專案pmuellr/weinre是Java版的,目前專案已經轉移到 http://people.apache.org/~pmuellr/weinre/
進入後找到二進位制jar包的非官方打包地址 http://people.apache.org/~pmuellr/weinre/builds/
進入後找到1.6.1版本下載解壓得到weinre.jar即可使用。
直接貼出1.6.1版本的jar包下載地址:http://people.apache.org/~pmuellr/weinre/builds/1.x/1.6.1/
其餘的專案有的是Grunt下的解決方案,感興趣的可GitHub自行檢視。
安裝Java版本的weinre需要有Java開發環境。
首先安裝JDK,並設定環境變數。
新建系統變數JAVA_HOME,設為安裝目錄D:\Program Files\Java\jdk1.6.0_43
新建/編輯系統變數classpath,設定為.;%JAVA_HOME%\lib;(注意前面的點與分號)
新建/編輯系統變數Path,設為;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
然後開啟命令提示符,輸入java –version 如果出現版本號,則表示安裝配置正確。
然後進入weinre的解壓路徑,在命令提示符視窗執行以下命令:
java -jar weinre.jar --httpPort 8910--boundHost -all-
然後在Safari瀏覽器位址列輸入http://localhost:8910/,若開啟如下所示頁面,則表明weinre服務啟動成功。
說明:weinre預設使用8080埠,伺服器主機名預設使用localhost,需要修改可在上述命令中進行設定,比如可以繫結為開發機器的內網IP地址。為了能在本地使用localhost開啟,又能在移動裝置或本地環境用IP地址開啟Weinre除錯工具,我們需要設定boundHost為"-all-",同時要確保除錯頁面所在裝置與當前開發環境(包括Debug客戶端和Debug服務端)都處於同一網段內。Weinre繫結埠一定不能與本地環境已監聽的埠衝突,確保繫結的是閒置埠,例如我設定的是8910。
Weinre還提供了下面的啟動引數:
--help : 顯示Weinre的Help
--httpPort [portNumber] : 設定Weinre使用的埠號, 預設是8080
--boundHost [hostname| ip address | -all-] : 預設是'localhost', 這個引數是為了限制可以訪問Weinre Server的裝置, 設定為-all-或者指定ip, 那麼任何裝置都可以訪問Weinre Server。
--verbose [true | false] : 如果想看到更多的關於Weinre執行情況的輸出, 那麼可以設定這個選項為true, 預設為false;
--debug [true | false] : 這個選項與--verbose類似, 會輸出更多的資訊。預設為false。
--readTimeout [seconds] : Server傳送資訊到Target/Client的超時時間, 預設為5s。
--deathTimeout [seconds] : 預設為3倍的readTimeout, 如果頁面超過這個時間都沒有任何響應, 那麼就會斷開連線。
更多引數可以訪問http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html
MAC OS X系統更為簡便,無須命令列,直接執行app即可啟動weinre,後續的步驟和windows相同。
Debug服務端所在的內網IP地址可以在命令提示符中輸入ipconfig命令檢視
然後我們使用服務端所在IP地址加埠訪問:http://本地ip:Port
例如:http://192.8.104.20:8910/,如下圖所示
TargetScript
將上圖中Target Script部分的js地址加入到你要除錯的目標頁面內。例如:
<script src="http://192.8.104.20:8910/target/target-script-min.js#anonymous"></script>
然後在移動裝置開啟新增過這個指令碼的網頁,例如我的頁面放在本地環境並使用埠8888監聽,所以在移動端瀏覽器需要輸入:
。並在桌面環境Safari瀏覽器開啟Debug 客戶端使用者介面。如下圖:
http://192.8.104.20:8888/newyear2015/crack.html
如果桌面電腦用USB資料線連線了移動裝置,但Debug客戶端依然顯示為weinre:targetnot connected,如下圖所示:
這時你可以嘗試以下方法:
1. 檢查是否通過USB資料線連線成功(安裝驅動)。
2. 檢查Debug客戶端桌面環境是否和移動裝置處於同一個區域網網段,尤其是WiFi方式上網的情況,一定要防止Wifi自動連線到其他網路中。
3. 嘗試將Target Script 指令碼放在html檔案的尾部。
4. 檢查Debug除錯客戶端使用者介面的Client id是否與目標頁面內target script 中的client id一致。
Target Bookmarklet
使用此方法可以將標籤中的程式碼注入到目標頁面程式碼中。以下是JavaScript程式碼段:
javascript:(function(e){e.setAttribute("src","http://192.8.104.20::8910/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);
該程式碼段可以通過在手機端瀏覽器訪問對應的url方式獲取。例如這裡是:
http://192.8.104.20:8910/target/target-script-min.js
然後儲存為裝置書籤中。
以後如果需要除錯頁面,開啟頁面後,點選Debug書籤就可以在桌面環境開始除錯了。
PhoneGapWebApp除錯
PhoneGap WebApp也就是執行在移動裝置Webview之內(Android:webview,iOS:uiwebview)的移動應用,因此weinre除錯只需要在要除錯的目標頁面中加入weinre指令碼程式碼即可。
另外可以安裝使用GapDebug應用,GapDebug是一款跨平臺的移動裝置除錯工具,支援拖拽式一鍵安裝,支援重啟App後Debug狀態恢復,支援斷點除錯,支援Windows和Mac OS系統,官方地址
https://www.genuitec.com/products/gapdebug/
多使用者除錯
Debug客戶端使用者介面#號後是一個除錯客戶端的id,用於在多使用者除錯時,識別各自不同的除錯專案。
在同一區域網的網段內,大家可以共享weinre除錯環境。有一臺電腦作為Debug伺服器,其他成員只需要一個自己的client id就可以在自己的電腦上開始真機除錯了。使用方法同上,這裡不再贅述。
Debug客戶端中除錯方法
如果除錯裝置連線成功,會顯示如下狀態:
Elements面板
可以修改html和CSS程式碼,無須重新整理頁面,即可在目標裝置頁面上實時預覽效果。
Resources面板
包括Databases、Local Storage和Session Storage資訊,若目標頁面用到了快取,則可以在此看到資料。
Network面板
由於weinre是基於XMLHttpRequest進行監聽的,所以網路面板只顯示通過XML HTTPRequest的請求載入的資料,也就是Ajax方式載入的資源。
Timeline面板
Console面板
第三方Weinre服務
技術團隊可以按照上述步驟搭建一個本地的weinre除錯環境,供團隊內部使用。除了自建weinre伺服器,也可以使用第三方提供的weinre服務。
目前國外的有PhoneGap提供的weinre遠端服務,使用者可以訪問下述網址參看使用者遠端除錯介面
http://debug.build.phonegap.com/
方法和上面自建weinre服務沒什麼區別,這裡就不多說了。
其他除錯工具
除了介紹過的Chrome 遠端除錯工具DevTools、weinre遠端除錯,目前的還有Adobe公司推出的跨平臺除錯工具Adobe Edge Inspect CC,以及國內網易前端工程師@聽奏同學開發的iOS系統專用除錯工具MIHTool,也是功能很強大的。這裡不一一介紹了。
參考文章:
weinre – Running http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html