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

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 及更早版本