移動端Web開發調試之Weinre調試教程

標籤：weinre調試   weinre教程   weinre下載   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  //安裝weinreweinre --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）的行動裝置 App，因此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

 

移動端Web開發調試之Weinre調試教程