天天看點

Weinre調試移動端頁面

weinre是什麼

如果我們做的是cordova(phonegap)或其他hybird應用,當使用到原生功能時候(類似原生請求資料或頁面切換時),沒辦法在pc chrome浏覽器調試頁面,一旦頁面在手機顯示出了問題,我們比較難找到找到原因,有時還隻能猜或alert些東西。

使用weinre工具,weinre的本意是web inspector remote,它是一種遠端調試工具,它可以将遠端的頁面經過代理在pc上調試頁面元素、樣式,js。

weinre的原理

Weinre調試移動端頁面

三個端的含義:

用戶端(client):本地的webinspector,遠端調試用戶端。

服務端(agent):本地的httpserver,為目标頁面與用戶端建立通信。

目标頁面(target):被調試的頁面,頁面已嵌入weinre的遠端js。

(上面圖檔及解釋轉自其他文章)

調試過程:

用戶端将指令(請求dom、執行js)post到代理服務端,目标頁面定時(大概5s)從服務端get指令,然後将結果post回服務端,最終用戶端定時從服務端get結果。

ps:由于weinre的用戶端是基于web inspector開發,而web inspector隻相容webkit核心的浏覽器,是以隻能在chrome/safari浏覽器打開weinre用戶端進行調試。

weinre安裝

安裝nodejs

ps:請使用 v0-10-15版本的nodejs,不然weinre安裝不了

安裝weinre

指令行執行

Weinre調試移動端頁面

這就是安裝成功了。

weinre運作

1.指令行鍵入

httpport為調試伺服器運作的端口,預設8080;boundhost 調試伺服器綁定的ip位址或域名,預設localhost。

Weinre調試移動端頁面

2.用webkit的浏覽器(由于weinre的設計更多的是基于webkit的浏覽器,是以建議使用chrome/safari)通路weinre伺服器:http://localhost:8081

Weinre調試移動端頁面

3.點選打開debug面闆:http://localhost:8081/client/#anonymous

Weinre調試移動端頁面

4.擷取服務端的ip位址,例如:192.168.1.101,添加如下js到需要調試的頁面。

5.在移動裝置上通路此頁面,即在用戶端點選targets看頁面結構,或者執行js。

Weinre調試移動端頁面

轉載:http://www.cnblogs.com/lovesong/p/4657255.html

繼續閱讀