weinre配置

現在人們也愈來愈習慣在手機上瀏覽網頁，而在手機上這些針對桌面瀏覽器設計的網頁常常慘不忍睹。Web應用開發者須要針對手機進行界面的從新設計，可是手機上並無趁心如意的調試工具（如Firebug、web inspector），從新設計界面的工做每每事半功倍。本文介紹的調試工具Weinre 就是解決這一問題的優秀調試工具。

 

weinre的參數
node weinre -h

對於下載的weinre二進制包
node weinre  --httpPort 18080 --boundHost 192.168.1.100

下載weinre.jar包
http://code.google.com/p/hyves-hybrid/source/browse/trunk/other/weinre/weinre.jar?r=103

npm下載
http://nodejs.org/dist/npm/

weinre下載地址
http://people.apache.org/~pmuellr/weinre/builds/2.0.0-pre-HH0SN197/

網絡調試
http://debug.phonegap.com/client/#anonymous

Weinre是什麼？

Weinre表明We b In spector Re mote，是一種遠程調試工具。舉個例子，在電腦上能夠即時 的更改手機上對應網頁的頁面元素、樣式表，或是查看Javascript變量，同時還能夠看到手機上頁面的錯誤和警告信息. 下圖所示中的例子，經過在console中運行「document.body.style.backgroundcolor = 'green';」 即時改變了手機上網頁的背景色。

 

圖1: 桌面的debug客戶端與手機上的對應頁面

 

 

使用一種工具以前，瞭解它的原理和結構是頗有幫助的。Weinre做爲一種遠程調試工具，在結構上分爲三層：

• 目標頁面（target）：被調試的頁面，頁面已嵌入weinre的遠程js，下文會介紹；
• Debug客戶端（client）：本地的Web Inspector調試客戶端；
• Debug服務端（agent）：一個HTTP Server，爲目標頁面與Debug客戶端創建通訊。

三層結構以下圖所示：

 

 

圖2：Weinre組成結構

 

 

Weinre的debug客戶端是基於Web Inspector開發，而Web Inspector只與以WebKit爲核心的瀏覽器兼容，因此Weinre的客戶端只能用Chrome或者Safari打開。

 

運行Weinre

首先須要下載 weinre， weinre目前支持Windows與MacOS， 本文中以Windows版爲例。 下載完成以後，啓動weinre的Debug服務端。在下載的weinre.jar所在文件夾中運行如下命令：

java -jar weinre.jar --httpPort 8081 --boundHost -all-

這行命令在本機啓動了weinre的Debug服務端，端口爲8081。打開Chrome或Safari，訪問localhost:8081，就能夠看到weinre的基本信息。(設置boundHost爲-all-，就能夠經過IP訪問Debug服務端，這點很重要)

 

 

上圖中的"debug client user interface"是weinre的Debug客戶端，點擊進入後能夠看到目前尚未被測試的目標網頁。

 

 

如何讓網頁能夠被localhost:8081上的weinre檢測到呢？很簡單，只要往網頁面上添加一個js文件就能夠了。若是本機的IP爲192.168.0.5，那麼就添加以下的js文件。target-script.js能夠得到從Debug服務端傳來的信息，更改當前頁面的樣式；也能夠運行傳來的js，並返回結果。

 

<script src="http://192.168.0.5:8081/target/target-script.js"></script>

 

注意，對於dojo這樣的異步加載模塊，上面的靜態嵌入的js就會不兼容，在有dojo等異步加載模塊的環境下，請在異步加載所有完成後加載target-script.js

 

dojo.addOnLoad(function(){
    ...
    dojo.create("script",{
     src: "http://192.168.0.5:8081/target/target-script.js"
    }, dojo.body());
   })

 

打開添加了這個腳本的網頁後，能夠看見在Debug 的客戶端的裏檢測到了新的目標頁面。

 

 

以後咱們就能在Elements與Console中調試遠程的頁面了。

Debug客戶端中對應的HTML元素：

 

同時也能夠查看js對象：