使用Weinre調試webapp
移動web的調試一直是個難題,前期可以使用模擬器來協助調試,但到了真機調試階段就讓人非常頭痛。而 Weinre就是解決這難題的利器。 Weinre的本意是Web Inspector Remote,它是一種遠程調試工具。功能與Firebug、Webkit inspector類似,可以幫助我們即時更改頁面元素、樣式,調試JS等。
weinre的安裝:
首先下載nodejs,博主的環境是debian,在http://nodejs.org/download/ 下載源碼包
解壓并移動
tar xvf node-v0.10.26.tar.gz mv node-v0.10.26 /opt/nodejs //移動到/opt/nodejs
進入目錄并檢查環境
cd /opt/nodejs ./configure
Nodejs安裝需要python, 如果python版本太低,請安裝合適的python版本,建議使用python-2.7的版本,還需要GCC/G++,如果你計劃在Node.js中啟用網絡加密,OpenSSL的加密庫也是必須的。該加密庫是libssl-dev,可以通過apt-get install libssl-dev等命令安裝。
安裝nodejs
sudo make sudo make install
安裝的過程會比較久,我的渣機子足足運行了一個小時
PS:
要保證user有sudo權限,user不在sudo組的話,參考以下:
解決方案:
首需要切換到root身份
su -
(注意有- ,這和su是不同的,在用命令"su"的時候只是切換到root,但沒有把root的環境變量傳過去,還是當前用戶的環境變量,用"su -"命令將環境變量也一起帶過去,就象和root登錄一樣)
然后
visudo
//切記,此處沒有vi和sudo之間沒有空格
1、移動光標,到最后一行
2、按a,進入append模式
3、輸入
your_user_name ALL=(ALL) ALL
4、按Esc
5、輸入“:w”(保存文件)
6、輸入“:q”(退出)
這樣就把自己加入了sudo組,可以使用sudo命令了
通過npm安裝Weinre
npm -g install weinre
weinre的啟動:
Weinre默認路徑為/usr/local/lib/node_modules/weinre/weinre
初始端口為8080
進入安裝目錄,
weinre --boundHost -all-
就可以啟動weinre
也可以指定端口參數
比如
weinre --boundHost -all- --httpPort 8081
如果是外網的話還需要在路由器里設置端口映射。
weinre的調試:
webapp的啟動頁面加上下面的js引用
<script type="text/javascript">http://192.168.1.101:8081/target/target-script-min.js#{app 標識 }</script>
其中{app標識}是webapp的唯一標識,任意字符串
啟動webapp之后,訪問http://192.168.1.101:8081/client/#{app標識},注意,這里的http后面的網址需要和script中的一致,連接上之后可能在首頁上不顯示客戶端已連接,直接訪問調試的網址即可。
看到這個界面應該很熟悉吧,尤其是上面的幾個面板
A 面板切換,用過 Chrome 或者 Safari 開發者工具的對這個界面肯定很熟悉。
B 連接到調試服務器的頁面,即可以調試的頁面。
C 連接到調試服務地的客戶端,當前只有一個。
D 調試服務器屬性,綁定的端口和調試服務器能夠響應式的 IP 地址列表。
本人這里調試的是一個phonegap項目,還是比較方便的
http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html
這里有更加詳細的weinre用法,可以參考。