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

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

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

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

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

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

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

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

訪問(wèn)localhost:8081，如果看到如下的頁(yè)面，說(shuō)明weinre已經(jīng)啟動(dòng)成功：

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

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

因?yàn)槭謾C(jī)上不方便截圖，我這里就用兩個(gè)瀏覽器窗口來(lái)展示效果，其實(shí)手機(jī)上的效果跟右邊是一樣的。

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

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

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

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

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

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