移動端真機調試--weinre

一、安裝

首先確保你的電腦上有node環境，然后使用cnpm或npm 安裝

windows下

npm install weinre -g --registry=https://registry.npm.taobao.org

mac下

sudo npm install weinre -g --registry=https://registry.npm.taobao.org

 

安裝成功后會提示安裝的位置（留意這個地址，下文還會用到）

 

【nodejs安裝】

1 、下載nodejs

nodejs官網下載

網址：https://nodejs.org/en/，點擊進入后如下圖

左邊的LTS是正式版，右邊的Current是測試版，一般開發常用的就是LTS正式版。

nodejs中文網下載

網址：http://nodejs.cn/，進入后點擊下載，如下圖

選擇相應的版本下載。

 2 、安裝

雙擊安裝包，一路下一步，指定安裝路徑，我的安裝位置：C:\Program Files\nodejs

3 、配置環境變量

 1.右鍵我的電腦-屬性-高級系統設置-高級-環境變量，打開環境變量設置窗口

2.在下面的系統變量中找到Path，點擊編輯--編輯文本，在后面加入nodejs的安裝目錄，我這里就是C:\Program Files\nodejs

3.然后打開cmd，輸入node -v回車顯示node版本，輸入npm -v回車，顯示npm版本，則表示node安裝成功。

二、運行weinre

在命令行輸入：
weinre –httpPort 8080 –boundHost -all-
8080是調試服務器運行的端口號，
boundHost是調試服務器綁定的ip地址或域名，默認是localhost，設置為-all-是為了在本地能使用localhost打開（也可以設置成自己的ip），在移動設備或本地環境用ip地址打開weinre調試工具
然后會看到服務啟動：

（注意：在調試過程中不要關閉cmd）

三、開始調試

設置好端口之后我們在本地打開http://192.168.0.7:8080（換成你自己的ip）然后就可以看見weinre的基本信息，如下圖：

(ip的查詢方式:在cmd輸入ipconfig，然后ipv4中后面跟的就是本機的ip地址)

接着我們需要在需要調試的頁面上加上一段script標簽

<script src="http://192.168.0.7:8080/target/target-script-min.js#anonymous"></script>
需要改為你自己的ip地址

手機打開需要調試的鏈接

在staticWebDir目錄下

本地的源文件貌似只能在staticWebDir目錄下才可以訪問到（這是因為在沒有使用任何服務器的情況下，weinre自帶有服務器，所以只能放在默認的根目錄下），將你的源文件放在staticWebDir目錄下（我的源文件名字是JD），staticWebDir的目錄是你安裝weinre的根目錄，我的是：C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\web，然后手機訪問:http://192.168.0.7：8080/JD/index.html，然后在電腦上打開剛剛的頁面http://192.168.0.7:8080

點擊debug client user interface之后出現

鏈接為綠色的之后就說明鏈接成功了。在后面的elements和其他的tag就可以進行調試了。注意在這個調試過程中必須保證手機和電腦在同一個網絡下。如果Targets為none，只需在手機端刷新一下就可以了。

參考文章鏈接：https://blog.csdn.net/luckybuling/article/details/81292855

                          https://www.jianshu.com/p/b0234b7da021