webapp開發(fā)調(diào)試環(huán)境--weinre配置

    用谷歌調(diào)試工具中的手機(jī)模擬器模擬手機(jī)進(jìn)行webapp的開發(fā)，與真機(jī)上的效果還是有些偏差，opera手機(jī)模擬器的效果亦不佳。有時(shí)在pc上開發(fā)出來的webapp效果良好，在部分真機(jī)上就出現(xiàn)了偏差，這時(shí)候就需要我們進(jìn)行微調(diào)。
    在pc上微調(diào)后發(fā)布到測(cè)試環(huán)境再在手機(jī)上看效果，開發(fā)很慢，效率很低。這時(shí)候就想著有一個(gè)可以在手機(jī)上調(diào)試的工具，可以隨時(shí)更改參數(shù)隨時(shí)看到手機(jī)上的效果，免去發(fā)布再測(cè)試、模糊估計(jì)參數(shù)不精準(zhǔn)的麻煩，weinre就是一個(gè)這樣的工具。
    weinre可以在PC上遠(yuǎn)程調(diào)試手機(jī)上的頁面，和pc瀏覽器的調(diào)試工具類似，在pc上選擇代碼中的某個(gè)標(biāo)簽，對(duì)應(yīng)在手機(jī)網(wǎng)頁上的部分就會(huì)被高亮選中，在pc上更改屬性參數(shù)，可以立即在手機(jī)上看到效果，如下圖：
    

weinre的配置和使用方法：


一.配置環(huán)境

1. 首先保證你安裝了nodejs環(huán)境，如果沒有，先去官網(wǎng)下載安裝。

2. nodejs v0.10已經(jīng)集成了npm，所以可以直接使用npm安裝，在cmd中直接輸入：npm install weinre -g。

3. 安裝完成后，你會(huì)在目錄C:UsersAdministratorAppDataRoaming pm ode_modules下看到weinre，這便是它的主目錄了。

4. 在cmd中運(yùn)行weinre --httpPort 8081 -boundHost -all- ，啟動(dòng)weinre：在調(diào)試過程中保持cmd窗口不關(guān)閉



打開瀏覽器訪問192.168.0.20:8081(192.168.0.20是我的本地局域網(wǎng)IP地址，這里需要改成你的)，如果出現(xiàn)如下頁面，就說明安裝成功：

點(diǎn)擊debug client user interface:

5.  PC端在本地搭建服務(wù)器

weinre已經(jīng)包含了一個(gè)http服務(wù)器，它的根目錄就是C:UsersAdministratorAppDataRoaming pm ode_modulesweinreweb。該目錄下放置目標(biāo)頁面。為了組織好你的目標(biāo)頁面，可以在當(dāng)前目錄下新建一個(gè)文件夾，如www。



試試在PC上訪問192.168.0.20:8081/demo/weinre-demo.html

注意：此句是關(guān)鍵：weinre --httpPort 8081 -boundHost -all-  一定要這樣寫，區(qū)分大小寫

--httpPort 8081 ：設(shè)置訪問端口，如果沒有這句默認(rèn)情況下是8080端口。Port首字母必須大寫，不大寫則設(shè)置端口不成功，仍未默認(rèn)的8080：



另外建議不要用默認(rèn)的8080端口，改成8081.。因?yàn)閑clipse在運(yùn)行項(xiàng)目的時(shí)候會(huì)用到8080端口，如果把weinre的端口設(shè)置成了8080，再啟動(dòng)eclipse的時(shí)候，eclipse提示端口沖突運(yùn)行不起來，可以嘗試以下辦法關(guān)掉占用的8080端口：

 -boundHost -all- ：這句是保證用127.0.0.1:8081, localhost:8081, 192.168.0.20:8081(192.168.0.20是我的本地局域網(wǎng)IP地址)都可以訪問，沒有這句或者少了-boundHost 或者Host沒有首字母大寫，都不能保證 192.168.0.20:8081可以訪問，這點(diǎn)狠重要，因?yàn)?span style="background-color:rgb(149,55,52)">在手機(jī)上只可以訪問 192.168.0.20:8081

二.使用weinre調(diào)試

1.  PC端訪問調(diào)試端頁面:192.168.0.20:8081 。
2. 手機(jī)訪問PC服務(wù)器目標(biāo)文件


1.  PC端訪問調(diào)試端頁面:192.168.0.20:8081/client#anonymous
#anonymous為默認(rèn)的ID，可以改為自定義的ID，這個(gè)可以用于多用戶調(diào)試，參考：http://wyqbailey.diandian.com/post/2011-11-09/20511143


2.手機(jī)訪問放在服務(wù)器內(nèi)的目標(biāo)頁面：
注意：手機(jī)需要連接無線wifi，wifi的地址需要和電腦的IP為同一個(gè)網(wǎng)段。比如公司所有電腦在一個(gè)局域網(wǎng)，其中一臺(tái)電腦作為服務(wù)器發(fā)射出無線wifi，手機(jī)直接連接上此wifi，就可以訪問weinre服務(wù)器了。

為了讓需要調(diào)試的頁面被weinre檢測(cè)到，需要添加Debug Target，有兩種方法：
　　　　(1)、Target Script  

           該方法需要在調(diào)試的頁面中增加一個(gè)js：

        (192.168.0.20是我的本地局域網(wǎng)IP地址，這里需要改成你的)　　　
　    添加后在移動(dòng)設(shè)備中訪問該頁面即可，如果調(diào)試的頁面比較少可以使用這個(gè)方法，如果多的話推薦第二種方法

　　　　(2)、Target Bookmarklet(此方法我沒弄成功，如果你們知道怎么弄得，再共享下)
　　　　該方法是將一段js保存到移動(dòng)設(shè)備的書簽中，可以在 http://192.168.0.20:8081/ 找到這段js：

　　　　將這段js保存到名為Debug書簽中，然后使用移動(dòng)設(shè)備訪問我想要調(diào)試的頁面，比如說 http://iinterest.net，最后點(diǎn)擊Debug書簽就OK了。

下面看下效果，這里我用weinre自帶的demo頁面做示例：
手機(jī)連接wifi后訪問:192.168.0.20:8081/demo/weinre-demo.html



這時(shí)再返回PC看看http://192.168.0.20:8081/client/頁面，就出現(xiàn)了手機(jī)上訪問的目標(biāo)頁面地址：



點(diǎn)擊鏈接，變成綠色，點(diǎn)擊上方的elements，就可以調(diào)試?yán)玻簿统霈F(xiàn)了最開始的截圖效果：



更改下屬性，看看手機(jī)上的效果吧~~

注意：當(dāng)對(duì)html文件有更改時(shí)，更改的內(nèi)容不會(huì)同步到手機(jī)端，必須在PC也訪問該頁面，進(jìn)行刷新后，手機(jī)端才會(huì)同步更新的內(nèi)容。

總結(jié)：

此種方法雖然可以在手機(jī)上實(shí)時(shí)看到調(diào)試的效果，但每次都需要把本地的靜態(tài)文件移到weinre服務(wù)器下，然后對(duì)目標(biāo)頁面加上js頭部，遇到只有jsp沒有本地靜態(tài)html的頁面，要么把jsp頁面全部或部分轉(zhuǎn)化成html然后放到weinre服務(wù)器要么不轉(zhuǎn)化閉著眼睛估計(jì)參數(shù)修改后發(fā)布再看效果......有一定的局限
(我試過將本地靜態(tài)文件的地址和weinre服務(wù)器的地址合并為同一個(gè)，這樣就不用經(jīng)常拷貝新版本，但發(fā)現(xiàn)weinre安裝的默認(rèn)路徑是C:UsershpAppDataRoaming pm ode_modules，不知道怎么更改此路徑o(

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)