沐鳴下載_使用 Weinre 調試移動網站及 PhoneGap 應用

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