如今人們也越來越習(xí)慣在手機上瀏覽網(wǎng)頁，而在手機上這些針對桌面瀏覽器設(shè)計的網(wǎng)頁經(jīng)常慘不忍睹。Web應(yīng)用開發(fā)者需要針對手機進(jìn)行界面的重新設(shè)計，但是手機上并沒有稱心如意的調(diào)試工具（如Firebug、web inspector），重新設(shè)計界面的工作往往事半功倍。本文介紹的調(diào)試工具Weinre就是解決這一問題的優(yōu)秀調(diào)試工具。

Weinre是什么？

Weinre代表We b In spector Re mote，是一種遠(yuǎn)程調(diào)試工具。舉個例子，在電腦上可以即時 的更改手機上對應(yīng)網(wǎng)頁的頁面元素、樣式表，或是查看Javascript變量，同時還可以看到手機上頁面的錯誤和警告信息. 下圖所示中的例子，通過在console中運行“document.body.style.backgroundcolor = 'green';” 即時改變了手機上網(wǎng)頁的背景色。

圖1: 桌面的debug客戶端與手機上的對應(yīng)頁面

使用一種工具之前，了解它的原理和結(jié)構(gòu)是很有幫助的。Weinre作為一種遠(yuǎn)程調(diào)試工具，在結(jié)構(gòu)上分為三層：

• 目標(biāo)頁面（target）：被調(diào)試的頁面，頁面已嵌入weinre的遠(yuǎn)程js，下文會介紹；
• Debug客戶端（client）：本地的Web Inspector調(diào)試客戶端；
• Debug服務(wù)端（agent）：一個HTTP Server，為目標(biāo)頁面與Debug客戶端建立通信。

三層結(jié)構(gòu)如下圖所示：

圖2：Weinre組成結(jié)構(gòu)

Weinre的debug客戶端是基于Web Inspector開發(fā)，而Web Inspector只與以WebKit為核心的瀏覽器兼容，所以Weinre的客戶端只能用Chrome或者Safari打開。

運行Weinre

首先需要下載weinre， weinre目前支持Windows與MacOS， 本文中以Windows版為例。 下載完成之后，啟動weinre的Debug服務(wù)端。在下載的weinre.jar所在文件夾中運行以下命令：

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

這行命令在本機啟動了weinre的Debug服務(wù)端，端口為8081。打開Chrome或Safari，訪問localhost:8081，就可以看到weinre的基本信息。(設(shè)置boundHost為-all-，就可以通過IP訪問Debug服務(wù)端，這點很重要)

上圖中的"debug client user interface"是weinre的Debug客戶端，點擊進(jìn)入后可以看到目前還沒有被測試的目標(biāo)網(wǎng)頁。

如何讓網(wǎng)頁可以被localhost:8081上的weinre檢測到呢？很簡單，只要往網(wǎng)頁面上添加一個js文件就可以了。如果本機的IP為192.168.0.5，那么就添加如下的js文件。target-script.js可以獲得從Debug服務(wù)端傳來的信息，更改當(dāng)前頁面的樣式；也可以運行傳來的js，并返回結(jié)果。

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

注意，對于dojo這樣的異步加載模塊，上面的靜態(tài)嵌入的js就會不兼容，在有dojo等異步加載模塊的環(huán)境下，請在異步加載全部完成后加載target-script.js

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

打開添加了這個腳本的網(wǎng)頁后，可以看見在Debug 的客戶端的里檢測到了新的目標(biāo)頁面。

之后我們就能在Elements與Console中調(diào)試遠(yuǎn)程的頁面了。

Debug客戶端中對應(yīng)的HTML元素：

同時也可以查看js對象：

?

?

轉(zhuǎn)自：http://blog.csdn.net/dojotoolkit/article/details/6280924

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/jackljf/archive/2012/05/16/3589390.html

總結(jié)

以上是生活随笔為你收集整理的Web移动应用调试工具——Weinre的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。