H5移動端調試 weinre

標籤：遠程   post請求   本地   start   nod   ejs   port   啟動   單詞   

Weinre是單詞縮寫，全稱是網頁遠程審查（Web Inspector Remote），發音同winery [?wa?n(?)ri]。可以在PC上調
試運行在移動端上的頁面。

 

weinre有5大功能

1. Element： 查看/修改dom，查看/修改 dom CSS

2. Resources：查看/修改 localStorage, sessionStorage

3. Network：查看網路請求

4. Timeline：

5. Console：查看控制台輸出

但是不能做JS調試！

weinre原理

目標頁面（target）：被調試的頁面，頁面已嵌入weinre的遠程js，下文會介紹；
Debug用戶端（client）：本地的Web Inspector調試用戶端；
Debug服務端（agent）：一個HTTP Server，為目標頁面與Debug用戶端建立通訊（target和client不斷的向agent發生get/post請求）。

原理就是Client的任何操作命令都會發給target執行，同樣target的任何操作也會發給client執行。

 

安裝教程：

weinre是基於nodeJs程式，安裝weinre包（在此之前需要安裝node.js）

npm install -g weinre

啟動weinre服務 （代理【agent】服務）

weinre --boundHost 10.32.69.133 --httpPort 8888      //注意：boundHost必須為IP地址，不能為網域名稱。

如果顯示下面內容則說明服務啟動了。

2016-01-19T10:37:26.772Z weinre: starting server at http://10.32.69.133:8888

建立個頁面，並加入以下JS（表示從代理服務中引入target/target-script-min.js）。

<!- IP是weinre服務的IP --><script src="http://10.32.69.133:8888/target/target-script-min.js"></script>

進入操作介面就可以盡情操作了。

 

多targets

weinre支援多targets的，不同target通過debug id區分的，target js的完整格式：<script src="{代理服務地址}:{代理服務連接埠}/target/target-script-min.js#{debug id}"></script>
debug id參數就是用來區分各targetd ,如果不傳的話用"anonymous"代替，一般用IP地址作為debug id。

H5移動端調試 weinre