webapp調試工具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，也是功能很強大的。這裏不一一介紹了。