Mobile Web調試工具Weinre使用說明

一、安裝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地址） 」命令回車。
出現下圖，表示監聽成功。

 

二、訪問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」就能夠生效。