調(diào)試移動端網(wǎng)頁工具Weinre使用整理

2018-10-20    seo達人

一、Weinre 說明



Weinre的本意是Web Inspector Remote,它是一種遠程調(diào)試工具。功能與Firebug、Webkit inspector類似,可以幫助我們即時更改頁面元素、樣式,調(diào)試JS等。



使用Weinre工具,Weinre的本意是Web Inspector Remote,它是一種遠程調(diào)試工具:



1.它可以將遠程的頁面經(jīng)過代理在PC上調(diào)試頁面元素、樣式,JS。



2.可以監(jiān)聽頁面內(nèi)部的Ajax請求等。



3.可以監(jiān)聽頁面加載成功時候的Console控制臺輸出



官網(wǎng)首頁:http://people.apache.org/~pmuellr/weinre/docs/latest/



Weinre的原理







三個端的含義:客戶端(client):本地的WebInspector,遠程調(diào)試客戶端。服務(wù)端(agent):本地的HTTPServer,為目標頁面與客戶端建立通信。目標頁面(target):被調(diào)試的頁面,頁面已嵌入weinre的遠程js。



調(diào)試過程:



客戶端將指令(請求DOM、執(zhí)行js)post到代理服務(wù)端,目標頁面定時(大概5s)從服務(wù)端get指令,然后將結(jié)果post回服務(wù)端,最終客戶端定時從服務(wù)端get結(jié)果。



PS:由于Weinre的客戶端是基于Web Inspector開發(fā),而Web Inspector只兼容WebKit核心的瀏覽器,所以只能在Chrome/Safari瀏覽器打開Weinre客戶端進行調(diào)試。





二、Weinre安裝和使用



1.weinre是基于NodeJs,因此首先要安裝NodeJs,然后使用npm命令安裝weinre



npm -g install weinre

2.運行,啟動weinre服務(wù)器,默認端口8080



node.exe node_modules\weinre\weinre --boundHost -all-

node.exe node_modules\weinre\weinre --boundHost  192.168.1.125 

在windows下,系統(tǒng)防火墻可能會彈出是否允許其訪問網(wǎng)絡(luò)的提示,點擊充許即可。

3.從瀏覽器訪問,http://localhost:8080,或者,http://192.168.1.125:8080,顯示如下表示啟動服務(wù)器監(jiān)視成功











三、Weinre需要監(jiān)聽調(diào)試的Web頁面配置處理



1.在所有頁面引入js文件



2.特別說明,當前js文件的域名需要指定為本機的IP地址,因為在手機模擬器中無法訪問電腦‘localhost’



















更多:



cordova-plugin-whitelist 協(xié)議白名單配置整理 



VS Code插件安裝位置



Visual Studio Code插件之Atom One Dark Syntax Theme



相關(guān)參考文章:



http://blog.csdn.net/freshlover/article/details/42640253



http://www.cnblogs.com/diva/p/3995674.html

藍藍設(shè)計363858.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://363858.cn

存檔