2018-10-20 seo達(dá)人
一、Weinre 說明
Weinre的本意是Web Inspector Remote，它是一種遠(yuǎn)程調(diào)試工具。功能與Firebug、Webkit inspector類似，可以幫助我們即時更改頁面元素、樣式，調(diào)試JS等。
使用Weinre工具，Weinre的本意是Web Inspector Remote，它是一種遠(yuǎn)程調(diào)試工具:
1.它可以將遠(yuǎn)程的頁面經(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，遠(yuǎn)程調(diào)試客戶端。服務(wù)端(agent)：本地的HTTPServer，為目標(biāo)頁面與客戶端建立通信。目標(biāo)頁面(target)：被調(diào)試的頁面，頁面已嵌入weinre的遠(yuǎn)程js。
調(diào)試過程：
客戶端將指令(請求DOM、執(zhí)行js)post到代理服務(wù)端，目標(biāo)頁面定時(大概5s)從服務(wù)端get指令，然后將結(jié)果post回服務(wù)端，最終客戶端定時從服務(wù)端get結(jié)果。
PS：由于Weinre的客戶端是基于Web Inspector開發(fā)，而Web Inspector只兼容WebKit核心的瀏覽器，所以只能在Chrome/Safari瀏覽器打開Weinre客戶端進(jìn)行調(diào)試。
二、Weinre安裝和使用
1.weinre是基于NodeJs，因此首先要安裝NodeJs，然后使用npm命令安裝weinre
npm -g install weinre
2.運(yùn)行，啟動weinre服務(wù)器，默認(rèn)端口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ò)的提示，點(diǎn)擊充許即可。
3.從瀏覽器訪問,http://localhost:8080,或者，http://192.168.1.125:8080，顯示如下表示啟動服務(wù)器監(jiān)視成功
三、Weinre需要監(jiān)聽調(diào)試的Web頁面配置處理
1.在所有頁面引入js文件
2.特別說明，當(dāng)前js文件的域名需要指定為本機(jī)的IP地址，因?yàn)樵谑謾C(jī)模擬器中無法訪問電腦‘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
藍(lán)藍(lán)設(shè)計( www.lapeinture.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://www.lapeinture.cn