使用Weinre調試webapp

jopen 10年前發布 | 16K 次閱讀 Weinre 程序調試

移動web的調試一直是個難題,前期可以使用模擬器來協助調試,但到了真機調試階段就讓人非常頭痛。而 Weinre就是解決這難題的利器。 Weinre的本意是Web Inspector Remote,它是一種遠程調試工具。功能與Firebug、Webkit inspector類似,可以幫助我們即時更改頁面元素、樣式,調試JS等。

weinre的安裝:

首先下載nodejs,博主的環境是debian,http://nodejs.org/download/  下載源碼包

解壓并移動

使用Weinre調試webapp

tar xvf node-v0.10.26.tar.gz
mv  node-v0.10.26 /opt/nodejs  //移動到/opt/nodejs

使用Weinre調試webapp

進入目錄并檢查環境

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命令了

 

使用Weinre調試webapp

通過npm安裝Weinre

npm -g install weinre

使用Weinre調試webapp

weinre的啟動:

Weinre默認路徑為/usr/local/lib/node_modules/weinre/weinre

初始端口為8080

進入安裝目錄,

weinre --boundHost -all-

就可以啟動weinre

也可以指定端口參數

比如

weinre --boundHost -all- --httpPort 8081

使用Weinre調試webapp

如果是外網的話還需要在路由器里設置端口映射。

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中的一致,連接上之后可能在首頁上不顯示客戶端已連接,直接訪問調試的網址即可。

使用Weinre調試webapp

看到這個界面應該很熟悉吧,尤其是上面的幾個面板

A 面板切換,用過 Chrome 或者 Safari 開發者工具的對這個界面肯定很熟悉。

B 連接到調試服務器的頁面,即可以調試的頁面。

C 連接到調試服務地的客戶端,當前只有一個。

D 調試服務器屬性,綁定的端口和調試服務器能夠響應式的 IP 地址列表。

本人這里調試的是一個phonegap項目,還是比較方便的

http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

這里有更加詳細的weinre用法,可以參考。

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!