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