在 PC 端,我們可以使用 Firebug 或者 Chrome 開發人員工具友善的調試網站或者 Web 應用。但是,當我們想在移動端調試站點或者應用的時候,這些工具就派不上用場了。是以,移動開發人員都希望能有 Mobile 版本的 Firebug 或者 Chrome 開發人員工具。 Weinre 就是這樣一款工具,可以幫助我們調試移動網站及 PhoneGap 應用。

Weinre 簡介
在使用 Weinre 之前,我們先了解一下 Weinre 的基本概念。
的全稱是 Web Inspector Remote(遠端 Web 調試工具),功能和 Firebug、Webkit Inspector 類似,可以幫助我們在 PC 端遠端調試運作在移動裝置浏覽器内的 Web 頁面或應用,能夠即時調試 DOM 元素、 CSS 樣式 和 JavaScript 等。
使用 Weinre 的目的是調試運作在移動裝置浏覽器内的 Web 站點或者應用,我們稱這個移動裝置即為調試目标(Debug Target)。由于在移動裝置上直接進行調試操作不便,Weinre 幫助我們使用桌面傳統的 webkit 環境(比如 Web Inspector 或者 Google Chrome 的開發者工具)來進行調試,我們稱這個桌面調試環境為調試用戶端(Debug Client)。
Weinre 為了能夠同步桌面的調試用戶端和移動裝置上的調試目标,需要你搭建一個調試伺服器(Debug Server)。是以,在使用 Weinre 進行遠端裝置調試時,包含了上面的三種元素:
- 調試伺服器:調試伺服器起到代理的作用,用來同步調試目标和調試用戶端之間的指令;
- 調試用戶端:這是 Web Inspector 界面,即開發者在浏覽器中進行調試的界面;
- 調試目标:需要調試的頁面,也指用于運作被調試 Web 内容的的浏覽器所在的移動裝置。
Weinre 的調試目标和用戶端都運作在浏覽器中,而調試伺服器則以 HTTP 伺服器方式作為二者的中介運作。在 Patrick Mueller 關于 Weinre 的手冊中,解釋了這種關系。更詳細的解釋可見:
http://muellerware.org/papers/weinre/manual.html http://muellerware.org/papers/weinre/manual.html。
Weinre 的安裝和運作
Weinre 的調試伺服器是基于 Node.js 實作的,是以在安裝 Weinre 之前先要安裝
Node運作環境。
可以通過 Node 包管理工具安裝:
npm -g install weinre
安裝好以後就可以啟動 Weinre 了,Weinre 提供了6個可選的啟動參數,其中下面兩個參數一般會修改,其它的用預設值就可以了。
- --httpPort 調試伺服器運作的端口,預設的 8080,如果這個端口有在用,可以改為其它端口;
- --boundHost 調試伺服器綁定的 IP 位址,也可以是域名,預設是 localhost,還可以設定為 -all-,表示綁定到所有目前機器可以通路的接口。如下所示:
weinre --boundHost -all-
這些配置也可以在 Weinre 根目錄下建立 server.properties 檔案配置,内容如下所示:
boundHost: -all-
httpPort: 8081
reuseAddr: true
readTimeout: 1
deathTimeout: 5
需要注意的是,指令行設定的參數會覆寫檔案配置的參數。
Weinre 的使用
成功啟動 Weinre 後就可以使用綁定的 IP 或者域名加上端口通路 Weinre 伺服器了(我們這裡以
http://localhost:8081為例)。在 Webkit 核心的浏覽器(例如 Chrome、Safari 等)中打開 Weinre 伺服器首頁:
在伺服器首頁有兩項内容很重要:
- A 連結到調試用戶端頁面,打開後預設到遠端面闆,如下圖所示。
- B 目标代碼,這段代碼要加入到需要調試的頁面中,也可以用書簽的方式動态加入。
遠端面闆總共有四部分:
- A 面闆切換,用過 Chrome 或者 Safari 開發者工具的對這個界面肯定很熟悉。
- B 連接配接到調試伺服器的頁面,即可以調試的頁面。
- C 連接配接到調試伺服器的用戶端,目前隻有一個。
- D 調試伺服器屬性,綁定的端口和調試伺服器能夠響應式的 IP 位址清單。
遠端面闆以外,還有元素面闆、資源面闆、網絡面闆、時間線面闆和控制台,後面這幾個 Web 開發人員都很熟悉的,就不一一介紹了。
Weinre 支援的平台
支援的調試用戶端(運作調試界面的浏覽器):
- Google Chrome
- Apple Safari
- 其它基于 WebKit 的浏覽器
支援的調試目标(需要調試的網站或應用的界面):
- Android 浏覽器應用
- iOS Mobile Safari 應用
- PhoneGap/Cordova
- other
不支援的調試目标:
- iOS 3.1.3 及更早版本
- webOS 1.45 及更早版本