在本地調試移動設備上的頁面——神器weinre介紹

　　平時寫代碼，最喜歡用chrome的developer Tool調試頁面了，基本是離不了的工具。可是當頁面須要在移動設備上使用，尤爲是被嵌入到Hybird APP中時，因爲移動版的chrome沒有developer Tool，只能傻傻的用alert來輸出一些調試信息，修改了CSS樣式也必須不斷的刷新，文件多了有時候還得常常清緩存，效率極其低下。神啊，救救我吧！

　　因而weinre出現了！它是一個基於nodejs的工具。能夠把遠程的頁面運行狀況映射到本地，在本地的瀏覽器中查看調試信息，修改的css樣式也能夠實時同步到遠程頁面上，歐耶！話很少說，趕快看看如何使用吧~

安裝

　　對於習慣在windows下開發的程序猿，看到nodejs總有一種隔海相望的感受，但如今nodejs在windows下的支持已經比較完善了。我就是在win7下順利配置好該環境。

　　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 8080 --all，而後打開瀏覽器訪問127.0.0.1:8080，若是出現以下頁面，就說明安裝成功

使用

　　在使用以前咱們須要明白weinre中都有哪些角色：

　　目標頁面——咱們真正要調試的頁面，也就是要運行在移動設備上的頁面

　　調試端——咱們的本地瀏覽器，在這裏對目標頁面進行調試

　　服務器——監控目標頁面和調試端的動做，向兩端推送消息

　　首先，weinre已經包含了一個http服務器，它的根目錄就是C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\web。該目錄下放置目標頁面和調試端頁面。

　　爲了組織好你的目標頁面，能夠在當前目錄下新建一個文件夾，如www。

　　該目錄下client即爲調試端。

　　使用weinre命令能夠啓動服務器，具體的選項能夠參考官網http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html，挺簡單，通常使用weinre --httpPort 8080 --boundHost -all- 就能夠了。

　　服務器啓動後，在本地瀏覽器地址欄訪問http://127.0.0.1:8080/client/便可打開調試端，界面以下：

　　相信你不會陌生~ Targets即顯示當前映射的遠程頁面，下面該把遠程端運行起來了。

　　在用移動設備訪問你的目標頁面前，還有一件事要作。在web/target下，有一個target-script-min.js文件，講它引入你的目標頁面頭部，像這樣：

<script src="../target/target-script-min.js" /></script>

　　好了，能夠用你的ipad來訪問目標頁面了，當鏈接到服務器以後，你會看到調試端有變化了：

　　Targets下顯示出了映射到的頁面，綠綠的。而後能夠點擊你熟悉的標籤來進行調試了~

要啥自行車？

　　細細一看，不對呀？少了Sources一項，我要打斷點怎麼辦？這功能目前還真沒有，讓咱們期待它的出現吧。。。