用谷歌調試工具中的手機模擬器模擬手機進行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上的靜態文件，還可以有以下兩種方法（只能訪問看效果不能實時調試）：
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
如有不正歡迎指出~~
