国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

H5移動(dòng)端調(diào)試—weinre

X1nFLY / 2709人閱讀

摘要:可以在上調(diào)試運(yùn)行在移動(dòng)端上的頁面。啟動(dòng)調(diào)試客戶端在瀏覽器中打開即可啟動(dòng)調(diào)試客戶端創(chuàng)建創(chuàng)建個(gè)頁面,并加入以下表示從代理服務(wù)中引入。

一、背景:

H5頁面在PC上調(diào)試起來很方便,但是在手機(jī)上卻很麻煩,此時(shí)移動(dòng)端就像一個(gè)黑匣子,查看或修改DOM、CSS,localStore等變的很困難。
這個(gè)時(shí)候遠(yuǎn)程調(diào)試就孕育而生了。

二、weinre 2.1 什么是weinre

Weinre是單詞縮寫,全稱是網(wǎng)頁遠(yuǎn)程審查(Web Inspector Remote),發(fā)音同winery [?wa?n(?)ri]。可以在PC上調(diào)
試運(yùn)行在移動(dòng)端上的頁面。

2.2 weinre能做什么


對(duì)應(yīng)上面的菜單,weinre有5大功能

Element: 查看/修改dom,查看/修改 dom CSS

Resources:查看/修改 localStorage, sessionStorage

Network:查看網(wǎng)絡(luò)請(qǐng)求

Timeline:

Console:查看控制臺(tái)輸出

2.3 weinre不能做什么

JS調(diào)試

2.4 weinre原理

目標(biāo)頁面(target):被調(diào)試的頁面,頁面已嵌入weinre的遠(yuǎn)程js,下文會(huì)介紹;
Debug客戶端(client):本地的Web Inspector調(diào)試客戶端;
Debug服務(wù)端(agent):一個(gè)HTTP Server,為目標(biāo)頁面與Debug客戶端建立通信(target和client不斷的向agent發(fā)生get/post請(qǐng)求)。


原理就是Client的任何操作命令都會(huì)發(fā)給target執(zhí)行,同樣target的任何操作也會(huì)發(fā)給client執(zhí)行。

2.5 搭建環(huán)境&使用 2.5.1:weinre是基于nodeJs程序,安裝weinre包
npm install -g weinre
2.5.2:?jiǎn)?dòng)weinre服務(wù) (代理【agent】服務(wù))
weinre --boundHost 10.32.69.133 --httpPort 8888

參數(shù)說明參考:http://people.apache.org/~pmu...
如果顯示下面內(nèi)容則說明服務(wù)啟動(dòng)了。

2016-01-19T10:37:26.772Z weinre: starting server at http://10.32.69.133:8888
2.5.3:?jiǎn)?dòng)調(diào)試客戶端

在瀏覽器中打開”http://10.32.69.133:8888“即可啟動(dòng)調(diào)試客戶端

2.5.4:創(chuàng)建Target

創(chuàng)建個(gè)頁面,并加入以下JS(表示從代理服務(wù)中引入target/target-script-min.js)。


進(jìn)入操作界面就可以盡情操作了。

2.6 多targets

weinre支持多targets的,不同target通過debug id區(qū)分的,target js的完整格式:
debug id參數(shù)就是用來區(qū)分各targetd ,如果不傳的話用"anonymous"代替,一般用IP地址作為debug id。

2.7 操作界面 2.7.1 Remote面板

2.7.2 Elements面板

A:查看,修改,刪除Dom元素,目前還不能增加DOM元素。
B:查看,修改,刪除Dom元素屬性,目前不支持增加DOM元素屬性。
C:查看,修改,刪除,增加 CSS屬性。

2.7.3 Resources面板

查看,修改,刪除localStorage/sessionStorage。
測(cè)試發(fā)現(xiàn):不能刪除,修改,增加???

2.7.4 Network面板

查看XHR請(qǐng)求信息,雖然該面板中有各種網(wǎng)絡(luò)請(qǐng)求的類型,但是目前只能查看XHR請(qǐng)求記錄。

2.7.5 Timeline面板

查看target中觸發(fā)的事件時(shí)間信息(觸發(fā)事件)。目前只支持兩種事件:setTimeout/setInterval和用戶指定的事件(通過在事件處理函數(shù)中調(diào)用console.markTimeline("tag")函數(shù)指定)

2.7.6 Console面板

用來執(zhí)行JS語句和表達(dá)式,以及展示console的方法輸出。

參考:

http://www.huolg.net/html5/we...
http://people.apache.org/~pmu...
weinre操作界面:http://people.apache.org/~pmu...
http://muellerware.org/papers...

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/83779.html

相關(guān)文章

  • H5移動(dòng)調(diào)試weinre

    摘要:可以在上調(diào)試運(yùn)行在移動(dòng)端上的頁面。啟動(dòng)調(diào)試客戶端在瀏覽器中打開即可啟動(dòng)調(diào)試客戶端創(chuàng)建創(chuàng)建個(gè)頁面,并加入以下表示從代理服務(wù)中引入。 一、背景: H5頁面在PC上調(diào)試起來很方便,但是在手機(jī)上卻很麻煩,此時(shí)移動(dòng)端就像一個(gè)黑匣子,查看或修改DOM、CSS,localStore等變的很困難。這個(gè)時(shí)候遠(yuǎn)程調(diào)試就孕育而生了。 二、weinre 2.1 什么是weinre Weinre是單詞縮寫,全稱...

    Cympros 評(píng)論0 收藏0
  • H5移動(dòng)調(diào)試weinre

    摘要:可以在上調(diào)試運(yùn)行在移動(dòng)端上的頁面。啟動(dòng)調(diào)試客戶端在瀏覽器中打開即可啟動(dòng)調(diào)試客戶端創(chuàng)建創(chuàng)建個(gè)頁面,并加入以下表示從代理服務(wù)中引入。 一、背景: H5頁面在PC上調(diào)試起來很方便,但是在手機(jī)上卻很麻煩,此時(shí)移動(dòng)端就像一個(gè)黑匣子,查看或修改DOM、CSS,localStore等變的很困難。這個(gè)時(shí)候遠(yuǎn)程調(diào)試就孕育而生了。 二、weinre 2.1 什么是weinre Weinre是單詞縮寫,全稱...

    Alfred 評(píng)論0 收藏0
  • weinre - 移動(dòng)H5開發(fā)調(diào)試神器

    摘要:在做移動(dòng)端開發(fā)的時(shí)候想必大家都會(huì)遇到一個(gè)問題調(diào)試,大部分情況下利用的模式都能解決,不可避免的會(huì)有極少部分機(jī)型不兼容的問題,一個(gè)個(gè)打太麻煩也不直觀。今天的主角登場(chǎng)了。是一個(gè)通過監(jiān)聽本機(jī)及項(xiàng)目端口的一個(gè)監(jiān)聽服務(wù),能夠?qū)崟r(shí)的和真機(jī)響應(yīng)互動(dòng)。 在做移動(dòng)端H5開發(fā)的時(shí)候想必大家都會(huì)遇到一個(gè)問題——調(diào)試,大部分情況下利用chrome的debug模式都能解決,不可避免的會(huì)有極少部分機(jī)型不兼容的問題,...

    qpwoeiru96 評(píng)論0 收藏0
  • weinre - 移動(dòng)H5開發(fā)調(diào)試神器

    摘要:在做移動(dòng)端開發(fā)的時(shí)候想必大家都會(huì)遇到一個(gè)問題調(diào)試,大部分情況下利用的模式都能解決,不可避免的會(huì)有極少部分機(jī)型不兼容的問題,一個(gè)個(gè)打太麻煩也不直觀。今天的主角登場(chǎng)了。是一個(gè)通過監(jiān)聽本機(jī)及項(xiàng)目端口的一個(gè)監(jiān)聽服務(wù),能夠?qū)崟r(shí)的和真機(jī)響應(yīng)互動(dòng)。 在做移動(dòng)端H5開發(fā)的時(shí)候想必大家都會(huì)遇到一個(gè)問題——調(diào)試,大部分情況下利用chrome的debug模式都能解決,不可避免的會(huì)有極少部分機(jī)型不兼容的問題,...

    Blackjun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

X1nFLY

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<