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

標籤：weinre   webapp   調試   

    用Google調試工具中的手機模擬器類比手機進行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:\Users\Administrator\AppData\Roaming\npm\node_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:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\web。該目錄下放置目標頁面。為了組織好你的目標頁面，可以在目前的目錄下建立一個檔案夾，如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：

    <script src="http://192.168.0.20:8081/target/target-script-min.js#anonymous" type="text/javascript"></script>

        (192.168.0.20是我的本地區域網路IP地址，這裡需要改成你的)　　　
　    添加後在行動裝置中訪問該頁面即可，如果調試的頁面比較少可以使用這個方法，如果多的話推薦第二種方法

　　　　(2)、Target Bookmarklet(此方法我沒弄成功，如果你們知道怎麼弄得，再共用下)
　　　　該方法是將一段js儲存到行動裝置的書籤中，可以在 http://192.168.0.20:8081/ 找到這段js：

javascript:(function(e){e.setAttribute("src","http://localhost:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

　　　　將這段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:\Users\hp\AppData\Roaming\npm\node_modules，不知道怎麼更改此路徑o(╯□╰)o，如果你們知道可以進行嘗試下)
建議開發webapp時，在PC上全程開發，發布測試版後對手機上錯亂的介面且無法利用PC調試的部分用此方法進行調試。


對於手機端訪問PC上的靜態檔案，還可以有以下兩種方法（只能訪問看效果不能Just-in-Time 偵錯）：
1. 利用nginx
開啟nginx設定檔：

重啟nginx，手機串連無線網，訪問：192.168.0.20/static/login-register/login.html試試吧~
(192.168.0.20是我的本地區域網路IP地址，後面的是在我配置的路徑D:\woqu_work_svn\m下的檔案路徑，這裡需要改成你的)　
注意：手機需要串連無線wifi，wifi的地址需要和電腦的IP為同一個網段。比如公司所有電腦在一個區域網路，其中一台電腦作為伺服器發射出無線wifi，手機直接連接上此wifi，就可以訪問weinre伺服器了。

2. 將靜態檔案上傳至自己的伺服器空間

比如，可以將靜態檔案上傳至SAE（新浪雲）或自己的網域名稱空間，然後手機訪問網域名稱地址（這樣做當然是可以訪問的了O(∩_∩)O~） 


建議：
1.webapp開發的時候，將可以串連的頁面加上跳轉連結，這樣我們在手機上訪問測試的連結時，就可以在訪問的頁面跳轉到其他頁面，而不用測試一個頁面輸入一個連結地址，可以輸入一次測試多個頁面。而對可以串連的頁面加上跳轉連結對後台人員的更改也沒有影響。
2.另外對於從html改到jsp的頁面，如果在後期前端人員在jsp上有改動，那麼也把改動一併同步到html，這樣對後面的測試有協助，而同步到html的部分也只是部分的改動，並不麻煩。


參考：
http://www.cnblogs.com/lvdabao/p/3436620.html?

如有不正歡迎指出~~

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