weinre遠程調試工具安裝及其使用方法

weinre安裝步驟

1 現在下載node.js安裝 (裝完要重啓 不然環境變量不生效)
2 安裝weinre cmd打開運行 npm install weinre -g 在mac上需要( sudo npm install weinre -g 不然會提示沒有權限創建文件夾)才能安裝成功

3 啓動weinre

如果在windows平臺上沒加任何配置,WIN7下 weinre會安裝在 C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\weinre,

MAC 會再node /usr/local/lib/node_modules/weinre/weinre –boundHost -all- –httpPort 8082

這個路徑自己電腦找不到的話看環境變量 path  npm文件夾的路徑
注意路徑(文件夾名字)不能空格!!!比方說C:\Documents and Settings
然後啓動server:

打開cmd命令行工具,輸入:(path-to-weinre-node 換成你的路徑)
node path-to-weinre-node/weinre –boundHost -all- –httpPort 8082

成功應該是下面結果

QQ圖片20141016065451

如果不行可以看看端口8082是否開啓  netstat

如果運行成功 http://localhost:8082/client/#anonymous這個地址應該能打開

三:weinre的使用例子

步驟一:打開命令行,輸入:weinre --boundHost [IP_address] --httpPort [port] (IP_address 是pc的ip地址, 不能是127.0.0.1,port可以輸入一個隨便的端口)

假設我的pc的ip地址爲192.168.1.131,然後我就可以輸入這樣的命令:weinre --boundHost 192.168.1.131 --httpPort 1234

步驟二:在瀏覽器上打開網址192.168.1.131:1234,然後我們就可以看到以下界面:

步驟三:我們就按照上面的紅色箭頭所說的做,先複製一段script到我們所要調試的界面

步驟四:我們就可以點擊上面那個連接,然後進入調試界面了。調試界面是下面這個樣子的:

 

步驟五:利用手機打開所要調試的頁面(也就是剛纔添加了script的那個頁面,注意要在pc上開啓服務器,然後手機通過輸入對應地址來訪問頁面)

步驟六:點擊調試頁面裏對應的Targets,然後點擊Elements工具,就可以進行調試了。

調試展示:

點擊了<p>標籤對應的這一行之後,右邊就好像使用chrome開發者工具一樣,顯示出這個dom結點對應的css了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章