在設計師與前端開發人員的努力下，一個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