Web行動裝置 App調試工具——Weinre

標籤：

 

    如今人們也越來越習慣在手機上瀏覽網頁，而在手機上這些針對案頭瀏覽器設計的網頁經常慘不忍睹。Web應用開發人員需要針對手機進行介面的重新設計，但是手機上並沒有稱心如意的調試工具（如Firebug、web inspector），重新設計介面的工作往往事半功倍。本文介紹的調試工具Weinre 就是解決這一問題的優秀調試工具。

Weinre是什嗎？

Weinre代表We b In spector Re mote，是一種遠端偵錯工具。舉個例子，在電腦上可以即時 的更改手機上對應網頁的頁面元素、樣式表，或是查看Javascript變數，同時還可以看到手機上頁面的錯誤和警告資訊. 所示中的例子，通過在console中運行“document.body.style.backgroundcolor = ‘green‘;” 即時改變了手機上網頁的背景色。

圖1: 案頭的debug用戶端與手機上的對應頁面

使用一種工具之前，瞭解它的原理和結構是很有協助的。Weinre作為一種遠端偵錯工具，在結構上分為三層：

• 目標頁面（target）：被調試的頁面，頁面已嵌入weinre的遠程js，下文會介紹；
• Debug用戶端（client）：本地的Web Inspector調試用戶端；
• Debug服務端（agent）：一個HTTP Server，為目標頁面與Debug用戶端建立通訊。

三層結構如所示：

圖2：Weinre組成結構

Weinre的debug用戶端是基於Web Inspector開發，而Web Inspector只與以WebKit為核心的瀏覽器安全色，所以Weinre的用戶端只能用Chrome或者Safari開啟。

  運行Weinre 準備工作

weinre目前支援Windows與MacOS， 本文中以Windows版為例。

Weinre調試需要nodejs的架構支援，需要先安裝nodejs平台

Nodejs：http://nodejs.org/download/

   

    nodejs配置

鍵入命令：npm express 斷行符號等待安裝express........

鍵入命令：npm jade 斷行符號等待安裝jade........

鍵入命令：npm mysql斷行符號等待安裝mysql........

........安裝什麼組件，取決於環境搭建需求

預設情況下上述組件都是安裝在C:\Program Files\nodejs\node_modules檔案夾下 這也是nodejs相關組件的自動尋找路徑

 

    weinre安裝

1、運行cmd，開啟命令提示字元。

2、將目錄轉至nodejs安裝目錄下。

3、鍵入命令：npm -g install weinre 斷行符號等待安裝weinre。

安裝完成

 

4、鍵入命令：weinre -httpPort 8008 -boundHost -all- 斷行符號等待啟動weinre

連接埠號碼隨意，只要不被佔用

 

這行命令在本機啟動了weinre的Debug服務端，連接埠為8008。開啟Chrome或Safari，訪問localhost:8008，就可以看到weinre的基本資料。(設定boundHost為-all-，就可以通過IP訪問Debug服務端，這點很重要)

 

 

中的"debug client user interface"是weinre的Debug用戶端，點擊進入後可以看到目前還沒有被測試的目標網頁。

 

 

如何讓網頁可以被localhost:8081上的weinre檢測到呢？很簡單，只要往網頁面上添加一個js檔案就可以了。如果原生IP為192.168.23.10，那麼就添加如下的js檔案。target-script.js可以獲得從Debug服務端傳來的資訊，更改當前頁面的樣式；也可以運行傳來的js，並返回結果。

 

<script src=http://192.168.23.10:8008/target/target-script.js></script>

 

一般放到head中或者body後都可以

對於dojo這樣的非同步載入模組，上面的靜態嵌入的js就會不相容，在有dojo等非同步載入模組的環境下，請在非同步載入全部完成後載入target-script.js

 

開啟添加了這個指令碼的網頁後，可以看見在Debug 的用戶端的裡檢測到了新的目標頁面。

選擇要測試的頁面後，用手機開啟頁面，就可以通過PC在Elements和console中進行調試了

Web行動裝置 App調試工具——Weinre