使用Weinre調試webapp

這是之前寫的一篇文章，如今搬運過來

前言

移動web的調試一直是個難題，前期可使用模擬器來協助調試，但到了真機調試階段就讓人很是頭痛。而 Weinre就是解決這難題的利器。 Weinre的本意是Web Inspector Remote，它是一種遠程調試工具。功能與Firebug、Webkit inspector相似，能夠幫助咱們即時更改頁面元素、樣式，調試JS等。這篇文章是我以前發表在oschina的博文，原始連接

weinre的安裝

首先下載nodejs，個人環境是debian，在nodejs官網下載源碼包，解壓並移動。

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

安裝的過程會比較久，個人渣機子足足運行了一個小時。

要保證user有sudo權限，user不在sudo組的話，參考如下：

首須要切換到root身份

su - //注意有- ，這和su是不一樣的，在用命令"su"的時候只是切換到root，但沒有把root的環境變量傳過去，仍是當前用戶的環境變量，用"su -"命令將環境變量也一塊兒帶過去，就象和root登陸同樣

visudo //切記，此處沒有vi和sudo之間沒有空格

• 移動光標，到最後一行
• 按a，進入append模式
• 輸入 your_user_name ALL=(ALL) ALL
• 按Esc
• 輸入「:w」(保存文件)

• 輸入「: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中的一致，鏈接上以後可能在首頁上不顯示客戶端已鏈接，直接訪問調試的網址便可。

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

1. 面板切換，用過 Chrome 或者 Safari 開發者工具的對這個界面確定很熟悉。
2. 鏈接到調試服務器的頁面，便可以調試的頁面。
3. 鏈接到調試服務地的客戶端，當前只有一個。
4. 調試服務器屬性，綁定的端口和調試服務器可以響應式的 IP 地址列表。

我這裏調試的是一個phonegap項目，仍是比較方便的

---

擴展閱讀：http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html