使用weinre調試手機頁面

  

閱讀目錄

• 介紹Weinre
• 安裝Weinre
• 經過Weinre調試頁面
• 啓動target

 

介紹Weinre

　Weinre（Web Inspector Remote），是一種遠程調試工具。功能與Firebug及chrome調試器相似，能夠幫助咱們即時更改頁面元素、樣式，調試JS等。

weinre由三部分組成

1. debug server

核心組件，運行在服務端，負責與另外兩部分通訊。

2.debug client

webkit核瀏覽器 ,與debug server通訊。展示調試界面，容許你修改dom，查看網絡信息等。

3. debug target. 

待調試的頁面。你須要在頁面中嵌入一小段js。它將經過XHR方式與debug server通訊，進行調試信息的收發。

安裝Weinre

執行：sudo npm install -g weinre(mac的）

 

安裝完以後，還須要監聽服務器，個人IP是 10.58.184.219

執行：

weinre -boundHost 10.58.184.219  -httpPort 8081 

 

經過Weinre調試頁面

首先你訪問：http://10.58.184.219:8081/ ,會看到下面的頁面，列出了weinre的文檔及用於調試的url。

而後點進去：http://10.58.184.219:8081/client/#anonymous，會發現並無Targets，同時列出了client及server端信息。

 

 

啓動target

在調試頁面加一段js：

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

固然，若是要調試的頁面不少，不方便在每一頁都直接插入上文的代碼。能夠瀏覽器「書籤」的方式保存一下面一段js，以動態方式插入script　　

javascript:(function(e){e.setAttribute("src","http://10.136.30.144:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

由於我要調試的demo運行在http://10.58.184.219:9080/BrowsersyncExample/

 

頁面中引入js後，用手機瀏覽器打開待調試頁面 http://10.58.184.219:9080/BrowsersyncExample/

當咱們用手機訪問這個調試頁面 http://10.58.184.219:9080/BrowsersyncExample/時，瀏覽器上會出現

切換到Elements時就是這樣

這個時候就跟谷歌審查元素的模式是如出一轍了。

 

參考文章：http://www.cnblogs.com/tugenhua0707/p/4681482.html#_labe1

              http://blog.csdn.net/qmhball/article/details/45848215

              http://www.3fwork.com/b403/001049MYM000079/