weinre- 調試移動端頁面

相信不少前端的小夥伴必定會遇到一個問題， 好比我編寫完一個頁面，某個地方須要進行調整細節或者是哪一個地方怎麼調整都不對，在pc端還好，有google，firefox之類能夠調節頁面的工具，雖然說這些工具備模擬手機的頁面的功能，可是畢竟 真機上調試與瀏覽器上調試仍是有挺大差異的，那有人會問了，有沒一款能夠針對 移動端調試的工具呢，答案是確定的。

weinre 就能比較好的解決這個問題的，下面咱們就來了解下怎麼用 weinre調試移動端頁面吧

 

一：遠程調式工具—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

在 cmd 面板中鍵入如下代碼

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代碼：

 

 

 

JavaScript

 

<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的；

好比上面的代碼引用：

 

 

 

 

 

JavaScript

 

1	<script src="http://172.16.28.162:8081/target/target-script-min.js#anonymous"></script>

可是若是多個用戶同時調式各自的頁面會有問題，weinre使用多用戶機制解決該問題。Weinre默認支持多用戶的，這樣一個局域網同事只須要一臺電腦上安裝weinre便可，不須要每一個人都安裝，多個用戶同時使用時，每一個用戶使用本身的id來區分，每一個用戶調式信息能夠獨立，不會相互影響；

操做以下：

而後繼續刷新設備中的頁面，而後在電腦端就能夠看到以下信息：

就能夠進行多用戶調式了；