weinre配置詳細版

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