Mobile Web調試工具Weinre使用說明

標籤：安裝路徑   操作   批次檔   查看   elements   樣式   https   script   提示符   

1、安裝weinre
weinre官方網站：http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
官方給出的安裝方式有兩種：npm安裝跟下載安裝包進行安裝。
我們使用npm安裝方式為例進行安裝。

1）我們需要先安裝node.js。node.js官方網站：https://nodejs.org/ 
可以根據你的作業系統選擇相應的版本進行下載。這裡我以windows10（64）為例進行安裝。
安裝完成，開啟Windows命令提示字元，輸入‘npm’命令斷行符號。
如果出現如資訊，表示node.js安裝成功。

 

2）下面通過npm安裝weinre。
開啟Windows命令提示字元，輸入“npm install -g weinre ”命令斷行符號。

如果出現如資訊，表示weinre安裝成功。

 

3）安裝完成後，需要在本地開啟一個監聽伺服器，比如我目前的IP地址為：10.203.18.117。
開啟Windows命令提示字元，輸入“weinre –httpProt 9999(輸入自訂連接埠號碼) –boundHost 10.203.18.117（監聽伺服器IP地址） ”命令斷行符號。
出現，表示監聽成功。

 

2、訪問weinre以及進行調試

 

1）在瀏覽器中，輸入設定的監聽地址：http://10.203.18.117:9999

 

2)  引入遠程調用頁面。

查看 監聽地址中，Target Script說明的Example:
<script src="http://10.203.18.117:9999/target/target-script-min.js#anonymous"></script>
將該引用，放入到項目中。例如：..foxitsoftware\webpdf\viewer\webapp\mobile\index.html。
將example的JS代碼，引入到index.html頁面即可。

3）訪問調用。

現在，我們使用手機來訪問我們的項目地址。然後在查看剛剛點擊進去的頁面。

點擊[Elements]，即可查看HTML元素和修改對應的css代碼了。

選中的樣式，在手機中，會以粉色效果標註。

 

 

Ps:安裝過程中，可能會出現的問題

筆者在開啟Windows命令提示字元中，輸入“weinre”會提示【不是內部或外部命令，也不是可啟動並執行程式或批次檔。】
解決說明：

（1）需將weinre的安裝路徑（c:\Users\foxit\AppData|roaming\npm\）放入到node.js路徑（筆者路徑為C:\Program Files\nodejs）下。

：

(2）配置nodejs的環境變數

重新開啟Windows命令提示字元中，輸入“weinre”就可以生效。

Mobile Web調試工具Weinre使用說明