三、開發(fā)調(diào)試

（1） weinre遠(yuǎn)程實時調(diào)試

Web開發(fā)者經(jīng)常使用Firefox的firebug或者Chrome的開發(fā)人員工具進(jìn)行Web調(diào)試，包括針對JavaScript，DOM元素和CSS樣式的調(diào)試。但是，當(dāng)我們期望為移動Web站點或應(yīng)用進(jìn)行調(diào)試時，這些工具就很難派上用場。

weinre就是一個幫助我們在桌面來遠(yuǎn)程調(diào)試運(yùn)行在移動設(shè)備瀏覽器內(nèi)的Web頁面或應(yīng)用的調(diào)試工具。weinre是WEb INspector REmote的簡寫，現(xiàn)在是Apache的一個開源項目，托管在github。

下面將介紹如此在日常工作使用它。

首先，我們要下載weinre的jar包——項目官方已經(jīng)找不到該jar文件，網(wǎng)上能夠找到，這里建議搭建個獨立的web服務(wù)器，jar運(yùn)行后是一個本地的服務(wù)器，和web服務(wù)器差不多~~

然后通過運(yùn)行dos命令來啟動它（請注意在你的電腦上已經(jīng)安裝有JDK）。運(yùn)行命令如下，需要把路徑改成你的實際文件位置：

java -jar d:\tools\weinre-jar\weinre.jar –httpPort 8081 –boundHost -all- （httpPort是指定服務(wù)端口，boundHost參數(shù)說明可以使用IP訪問，all參數(shù)代表支持所有的host）。

訪問localhost:8081，如果看到如下的頁面，說明weinre已經(jīng)啟動成功：

輸入debug client user interface地址（調(diào)試客戶端UI地址）。本例中即：http://localhost:8081/client/#anonymous，其中#anonymous是默認(rèn)的調(diào)試id（debug id）。如果這個weinre調(diào)試服務(wù)器只是由你一個人使用，那么你可以使用默認(rèn)的debug id：anonymous。 啟動的weinre調(diào)試客戶端ui如下圖：

在需要調(diào)試的頁面加入中以下腳本：，注意把localhost換成手機(jī)能夠訪問的真實IP地址。當(dāng)手機(jī)訪問這個頁面時，weinre客戶端就會檢測到目標(biāo)設(shè)備，然后就可以對它進(jìn)行調(diào)試了。

因為手機(jī)上不方便截圖，我這里就用兩個瀏覽器窗口來展示效果，其實手機(jī)上的效果跟右邊是一樣的。

（2） AVD模擬器調(diào)試

靜態(tài)頁面并不能滿足我們的需求，很多實際效果比如touch事件，滾動事件，鍵盤輸入事件等，都需要在真實的環(huán)境下測試，這時就需要用到模擬器。就像我們測試ie6一樣，AVD模擬器可以類比于PC上的虛擬機(jī)，當(dāng)我們需要測試某一特定的機(jī)型時，我們可以新建一個AVD，進(jìn)行一系列的測試。不過使用AVD的前提是已經(jīng)部署好android的開發(fā)環(huán)境，這個需要JDK + android SDK + Eclipse + ADT，還是稍微有點繁瑣。

（3）手機(jī)抓包與配host

在PC上，我們可以很方便地配host，但是手機(jī)上如何配host，這是一個問題。

這里主要使用fiddler和遠(yuǎn)程代理，實現(xiàn)手機(jī)配host的操作，具體操作如下：

1. 首先，保證PC和移動設(shè)備在同一個局域網(wǎng)下；
2. PC上開啟fiddler，并在設(shè)置中勾選“allow remote computers to connect”
   
3. 手機(jī)上設(shè)置代理，代理IP為PC的IP地址，端口為8888（這是fiddler的默認(rèn)端口）。通常手機(jī)上可以直接設(shè)置代理，如果沒有，可以去下載一個叫ProxyDroid的APP來實現(xiàn)代理的設(shè)置。
4. 此時你會發(fā)現(xiàn)，用手機(jī)上網(wǎng)，走的其實是PC上的fiddler，所有的請求包都會在fiddler中列出來，配合willow使用，即可實現(xiàn)配host，甚至是反向代理的操作。