在 PC 端，我們可以使用 Firebug 或者 Chrome 開發人員工具方便的調試網站或者 Web 應用。但是，當我們想在移動端調試站點或者應用的時候，這些工具就派不上用場了。因此，移動開發人員都希望能有 Mobile 版本的 Firebug 或者 Chrome 開發人員工具。Weinre 就是這樣一款工具，可以幫助我們調試移動網站及 PhoneGap 應用。
- 推薦8款很棒的測試網站速度的免費工具
- 12款很棒的瀏覽器兼容性測試工具推薦
- 構建殺手級應用 JavaScript 工具和技術
- 推薦25款提高網站可用性和轉化率的工具
- 2012年最佳 Web 前端開發工具和框架
Weinre 簡介
在使用 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。
Weinre 的安裝和運行
Weinre 的調試服務器是基於 Node.js 實現的，因此在安裝 Weinre 之前先要安裝 Node 運行環境。安裝 Weinre 有兩種方式，使用 npm 或者下載二進制文件進行安裝。
使用二進制包安裝的命令如下：
npm -g install http://example.com/path/to/apache-cordova-weinre-X.Y.Z-bin.tar.gz
還可以通過 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 及更早版本
- OverAPI.com – 史上最全開發人員在線速查手冊
- Regexper：牛逼的 JavaScript 正則可視化工具
- 今日推薦：值得一試的8個 Web 開發工具和資源
- CSS Matic：網頁設計師必備的終極 CSS 工具箱
- 強大的矢量圖形庫：Raphael JS 中文文檔及教程
本文鏈接：使用 Weinre 調試移動網站及 PhoneGap 應用
編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源
hide
