Weinre遠(yuǎn)程調(diào)試工具

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

Weinre是什么？

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

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

運(yùn)行原理

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客戶端建立通信。

獲取Weinre

在任何的支持 Node.js 環(huán)境的系統(tǒng)下通過包管理器（npm）即可安裝Weinre

npm install -g weinre

使用Weinre進(jìn)行遠(yuǎn)程調(diào)試

1 啟動 WeinreDe bug 服務(wù)端

weinre --httpPort 8080 --boundHost -all-

2 通過PC瀏覽器（WebKit內(nèi)核）打開 WeinreDe bug 客戶端

Open in your pc browser http://localhost[Your IP]:8080

3 在你需要調(diào)試的頁面加上通信用的腳本

4 在手機(jī)上訪問你的測試頁面，在電腦上進(jìn)入到 WeinreDe bug 客戶端 看是否通信成功，如果一切沒問題，可見到如下的頁面

Open in your pc browser http://localhost[Your IP]:8080/client/#anonymous

5 最后跟你平時一樣實(shí)時調(diào)試你的頁面吧，是不是很爽。