一：遠端調式工具—weinre
Weinre是什麼？
Weinre是Web Inspector Remote的縮寫(遠端web檢查器)，它的作用就是相當於chrome的審查元素一樣，介面和用法也基本一樣，無非不同的是：weinre適合在移動端頁面除錯，比如手機訪問頁面的時候，我們可以使用chrome瀏覽器檢視頁面的html元素和css程式碼，我們可以對此進行更改，然後在手機端不需要重新整理，立即可以看到效果；在移動端調式html和css比較方便。目前weiner也釋出到npm上，我們可以使用npm進行安裝；npm如下： https://www.npmjs.com/package/weinre
二： 安裝weinre
|
1 |
npm install -g weinre |
安裝完之後，需要在本地開啟一個監聽伺服器，比如我現在的IP地址是:172.16.28.162
現在需要執行如下命令：
weinre –boundHost 172.16.28.162
可以開啟本地監聽伺服器如下：
如上面網址 http://172.16.28.162:8080 weinre預設使用8080埠，我們也可以使用如下命令進行更改埠號；如下命令：
三： 訪問weinre及在頁面上呼叫
開啟瀏覽器，訪問如下地址： 172.16.28.162:8081 如下：
如上截圖頁面；我們需要在調式的頁面中加入遠端調式所需要的JS程式碼即可，比如上圖截圖的最後一句JS程式碼：
|
1 |
<script src="http://172.16.28.162:8081/target/target-script-min.js#anonymous"></script> |
引入到需要遠端調式頁面即可；
我們現在先訪問頁面 http://172.16.28.162:8081;如下所示：
現在我們繼續使用我手機來訪問我本機上的網頁後，在檢視剛點選進去後的頁面顯示如下：
如下：
但weinre可以方便我們調式HTML元素及css程式碼，至於JS，我們可以使用Fiddler替換即可滿足前端在移動端基本調式了；
四：多使用者
Weinre的預設使用中，都是用anonymous作為id的；
比如上面的程式碼引用：
|
1 |
<script src="http://172.16.28.162:8081/target/target-script-min.js#anonymous"></script> |
但是如果多個使用者同時調式各自的頁面會有問題，weinre使用多使用者機制解決該問題。Weinre預設支援多使用者的，這樣一個區域網同事只需要一臺電腦上安裝weinre即可，不需要每個人都安裝，多個使用者同時使用時，每個使用者使用自己的id來區分，每個使用者調式資訊可以獨立，不會相互影響；
操作如下：
然後繼續重新整理裝置中的頁面，然後在電腦端就可以看到如下資訊：
就可以進行多使用者調式了；