遠程調試工具 -- weinre

一、背景狀況

　　頁面在移動端調試很費力，查看或修改DOM、CSS等都很不方便；

　　 官網：http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/

二、weinre 功能

　　

 

　　一、Element：查看、修改 dom、css

　　二、Resources：查看/修改 localStorage, sessionStorage

　　三、Network：查看網絡請求

　　四、console：查看控制檯輸出

　　不能作得：

　　一、JS調試

三、安裝及使用（主要運行場景：本地項目調試）

　　一、安裝（weinre時基於nodeJs得）

　　　　npm install  -g weinre

　　二、啓動weinre服務

weinre --boundHost 192.168.1.87 --httpPort 8082

　　　　weinre --boundHost  [ IP地址 ]  --httpPort  [ 端口號 ]

　　　　若是出現下面內容就說明啓動成功了：

　　　　2018-11-26T02:20:28.598Z weinre: starting server at http://192.168.1.87:8082

　　三、啓動服務端口

　　　　http:192.168.1.87:8082

　　　　

　　　　點擊：http://192.168.1.87/client/#anonymous 進入如下頁面

 　　　　

　　　　targets：none：說明沒有鏈接上

　　四、建立Targets

　　　　建立個頁面，並加入如下JS（表示從代理服務中引入target/target-script-min.js）。　　　　

<!- IP是weinre服務的IP -->
<script src="http://192.168.1.87:8082/target/target-script-min.js"></script>

　　　　小編本身用得時候把這個註釋了也沒報錯，我的場景應用不同，只用點聯調沒涉及更多功能。

　　五、遇到坑

　　　　項目文件應該放在對應得weinre安裝路徑得www文件夾下面

　　　　例如：D:\node\node_global\node_modules\weinre\web\www\項目文件

　　　　手機和瀏覽器訪問的路徑：http://192.168.1.87:8082/www/項目文件