平時寫程式碼，最喜歡用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一項，我要打斷點怎麼辦？這功能目前還真沒有，讓我們期待它的出現吧。。。