webapp開發調試環境--weinre配置

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

weinre的配置和使用方法：


一.配置環境

1. 首先保證你安裝了nodejs環境，如果沒有，先去官網下載安裝。

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

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

4. 在cmd中運行weinre --httpPort 8081 -boundHost -all- ，啟動weinre：在調試過程中保持cmd窗口不關閉



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

點擊debug client user interface:

5.  PC端在本地搭建服務器

weinre已經包含了一個http服務器，它的根目錄就是C:UsersAdministratorAppDataRoaming pm ode_modulesweinreweb。該目錄下放置目標頁面。為了組織好你的目標頁面，可以在當前目錄下新建一個文件夾，如www。



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

注意：此句是關鍵：weinre --httpPort 8081 -boundHost -all-  一定要這樣寫，區分大小寫

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



另外建議不要用默認的8080端口，改成8081.。因為eclipse在運行項目的時候會用到8080端口，如果把weinre的端口設置成了8080，再啟動eclipse的時候，eclipse提示端口沖突運行不起來，可以嘗試以下辦法關掉占用的8080端口：

 -boundHost -all- ：這句是保證用127.0.0.1:8081, localhost:8081, 192.168.0.20:8081(192.168.0.20是我的本地局域網IP地址)都可以訪問，沒有這句或者少了-boundHost 或者Host沒有首字母大寫，都不能保證 192.168.0.20:8081可以訪問，這點狠重要，因為在手機上只可以訪問 192.168.0.20:8081

二.使用weinre調試

1.  PC端訪問調試端頁面:192.168.0.20:8081 。
2. 手機訪問PC服務器目標文件


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


2.手機訪問放在服務器內的目標頁面：
注意：手機需要連接無線wifi，wifi的地址需要和電腦的IP為同一個網段。比如公司所有電腦在一個局域網，其中一臺電腦作為服務器發射出無線wifi，手機直接連接上此wifi，就可以訪問weinre服務器了。

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

           該方法需要在調試的頁面中增加一個js：

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

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

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

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



這時再返回PC看看http://192.168.0.20:8081/client/頁面，就出現了手機上訪問的目標頁面地址：



點擊鏈接，變成綠色，點擊上方的elements，就可以調試啦，也就出現了最開始的截圖效果：



更改下屬性，看看手機上的效果吧~~

注意：當對html文件有更改時，更改的內容不會同步到手機端，必須在PC也訪問該頁面，進行刷新后，手機端才會同步更新的內容。

總結：

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈