【yzc66亚洲城】Chrome开发者工具不完全指南

Chrome开发者工具不完全指南(一、基础成效篇)

2015/06/23 · HTML5 · 2
评论 ·
Chrome

初稿出处:
卖烧烤夫斯基   

即使你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生。依据最新的一份(2015/06)的浏览器市场占有率报告,Chrome近乎占有浏览器天下的半壁江山。简单、急迅使它成为了新时代大千世界的新宠。倘若您是一名web开发人员,我推荐你选用Chrome。作为前端开发的”IDE”,你只必要搭配一个编辑器就能到位大致拥有的开销职责了。关于它的选取和成效分析要么都是大而不全,要么是细细的糜烦。本系会比较详细地分享卤煮的一部分Chrome(F12开发者作用)使用经验,从一些基础的作用早先到它的一些尖端品质分析器(提姆eline、Profiles),在结尾,将会推荐七款好的插件,希望对您的支付工作有些许的成效。即便您对一些面板模块成效已经很了解可以间接跳过去阅读你感兴趣的一部分。

一、Elements
yzc66亚洲城 1
在Element中首要性分两块大的有的
A:HTML结构面板
B:操作dom样式、结构、时间的显得面板
1.在A中,每当你的鼠标移动到其他一个因素上,对应的html视图中会给该因素黄色的背景。
yzc66亚洲城 2
2.万一您单击选中一个要素,在A部分的最底层,会来得该因素在html结构中的地方关系
yzc66亚洲城 3
3.然后你可以在B部分的styles选项中编辑该因素的样式,并且探望html结构的实时更新(大大的福利)
yzc66亚洲城 4
4.您可以在B界面中切换来伊芙nt Listeners选项,观望该因素绑定的风云。
yzc66亚洲城 5

click 是事件名称

.div1 事变是索引名称(也就是经过哪些绑定的)

attachment 事件源于

handler里面包涵事件的毁损主体内容

useCapture代表该事件是还是不是向上冒泡
5.选中一个因素,右击鼠标,你会师到有一个弹出窗口出现,里面有若干挑选
yzc66亚洲城 6
Add attribut : 为该因素添加属性
Edit attribute:修改该因素的质量
Force element state:
为元素激活某种景况(主要用在可以大约的因素比如a、input、button等)
Edit as
HTML:编辑该因素(你可以重写它的漫天content)甚至修改它的竹签名称
中档简单的掠过…….
Break
on:为该因素添加dom操作事件监听。包蕴三个选项(树结构改变、属性改变、节点移除)。那几个选项的意义是扶持大家监控和定点操作元素的代码。请参考下图事例:
yzc66亚洲城 7
6.在A界面的弹出选项窗口中甄选node removal,在B界面切换来DOM
Breakpoints 选项,可以看出有登记信息。然后我们点击click
me按钮触发删除div3的轩然大波,能够看来浏览器自动为大家永恒删除该因素的代码部分,并且甘休实施js代码:

yzc66亚洲城 8

 

7.在B界面中切换来Properties选项,可以看到选中元素的各个音讯(英文单词里面的介绍比较简单,就不一一介绍了)。

yzc66亚洲城 9

 

8.点击A界面的妄动地方,按火速键ctrl+F可以看出底部有输入框,在输入框中输入你想要查找的别的内容,纵然协作到了,都回在A面板中高亮展现
yzc66亚洲城 10
9.要么您可以点击左上角的问号图标,然后把鼠标移动到视图界面中,对准元素按下鼠标左键,对应的A界面会定位到接纳的元素。
yzc66亚洲城 11

 

 

二、Network
yzc66亚洲城 12
1.Network是一个督察当前网页所有的http请求的面版,它主体部分显得的是各种http请求,每个字段表示着该请求的不等属性和情景
yzc66亚洲城 13
Name:请求文件名称
Method:方法(常见的是get post)
Status:请求完毕的情事
Type:请求的花色
Initiator:请求源也就是说该链接通过哪些发送(常见的是Parser、Script)
Size:下载文件或者请求占的资源大小
提姆e:请求或下载的岁月
提姆eline:该链接在发送进度中的时间状态轴(大家得以把鼠标移动到这一个红红绿绿的时间轴上,对应的会有它的详细音讯:起初下载时间,等待加载时间,自身下载耗时)
yzc66亚洲城 14
2.单击面板中的任意一条http音信,会在底部弹出一个新的面板,其中记录了该条http请求的详尽参数header(表头音信、再次回到新闻、请求基本气象—请参考http1.1商谈内容对号落座)、Preview(重回的格式化转移后文本新闻)、response(转移此前的原有音信)、Cookies(该请求带的cookies)、提姆ing(请求时间变化)
yzc66亚洲城 15
3.在主面板的顶部,有部分按钮从左到右它们的法力分别是:是或不是启用继续http监控(默认高亮选中过)、清空主面板中的http音信、是或不是启用过滤音讯选项(启用后得以对http音讯举行筛选)、列出三种属性、只列出name和time属性、preserve
log(方今不知底啥用)、Dishable cahe(禁用缓存,所有的304重临会和fromm
cahe都回变成健康的呼吁忽视cache conctrol 设定);

yzc66亚洲城 16
4.末尾在主面板的底层有记录了整机互联网请求状态的有的主导音讯
yzc66亚洲城 17

三、Resources

yzc66亚洲城,Resources部分较简单,他重点向我们来得了本界面所加载的资源列表。还有cookie和local
storage 、SESSION
等地方存储音讯,在此处,大家可以无限制地修改、扩大、删除本地存储。

yzc66亚洲城 18 关于webSql,我了解的并不多,在支付中很少用到。假如你想询问那地点的音讯,我引进您去读书那篇博客

1 赞 28 收藏 2
评论

yzc66亚洲城 19

Chrome开发者工具不完全指南(一、基础意义篇)

Chrome开发者工具不完全指南(五、移动篇)

2015/07/06 · HTML5 ·
【yzc66亚洲城】Chrome开发者工具不完全指南。Chrome

原稿出处:
卖烧烤夫斯基   

眼前介绍了Chrome开发者工具的大部分情节工具,现在牵线最终两块作用AuditsConsole面板。

一、Audits

奥迪(Audi)ts面板会指向近来网页提议若干条优化的提议,那几个提出分为两大类,一类是互连网加载品质,另一类是界面品质。首先开下它的主界面。

yzc66亚洲城 20

Audits面板的互联网优化提议参考的是雅虎前端工程师的十四条黄金提出。为了讲明那或多或少,大家得以做一遍不难的测试。依照十四条web质量提出中的其中一条:把css文件应当放入html文档的顶部,幸免网页在渲染dom后出现闪烁的难点。大家写如下不伦不类代码

XHTML

<!DOCTYPE html> <html> <head>
<title></title> </head> <body> </body>
<!– 把css文件放入尾部 –> <link rel=”stylesheet”
type=”text/css” href=”xuu.css”> </html>

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
 
</body>
<!– 把css文件放入底部 –>
<link rel="stylesheet" type="text/css" href="xuu.css">
</html>

然后我们开头run了。你可以观望它会付给大家愿意的提出,在web Page
Performance里面它交给了红点,前面的提出是:将css放入底部:

yzc66亚洲城 21

升迁界面品质对于用户体验来说非凡紧要。倘使您根据了十四条提出来拍卖优化你的web界面,那么现身在Audits中的信息会变得很少。若是您还不知道那十四条提出,我推荐你去阅读《web高品质建站》这本书。相信会对您有扶持。

二、Console

Console面版可以输出你自己代码。它可以匹配其他面板一起利用。点击右上角的>_剪头可以启用或者接受它。它也分了多少个选项:

Console:  用于出口和具体调试音讯
Search:  在域名下查找文件和情节
Emulation :  启用移动支付格局
Rendering:  在界面突显种种监督音讯

关于Console的玩法,已经有一位大神详细讲解过。我那里就不一一介绍。点击那里去拜读大神的篇章吧。Search也比较简单,露珠就不啰嗦了。现在重大教授一下Emulation格局下的移位支付。移动支付毫无疑问已经改为web开发的主力军了。所以,chrome也创设了一款匹配咱们付出和测试的工具。

1.跻身活动支付格局

手机支付方式我的提出是把控制面版右置。那样对手机支付来说是便于的。长按控制面板右上角类型标签(img4)可以切换控制面板的出现岗位。调整完控制面板的职位后。点击Emulation然后再点击现身在增选击面版中的文字。或者你直接点击开发者工具界面左上角的无绳电话机图标进入开发者情势。你可以看看当你切换来运动支付方式后,鼠标已经改为了小黑圈圈了。

2.调试设备

Device下拉菜单中拔取差其他手机情势。里面包蕴安卓和苹果系统的风行机器。勾选Emulate
mobile选项可以适应屏幕。Resolution这一项可以调整手机显示屏的可观和增幅。

3.模拟互联网情状

Netword中选取模拟的互联网意况。包含主流和非主流的各样网络。(WIFI,3G,2G等)Sensors选项中自定义移动端的经纬度。在模型中得以设定3D视图角度。把鼠标放上去直接旋转模型。这几个意义暂时没发现有啥卵用。

yzc66亚洲城 22

过多调节可以在界面举办,那也是露珠平时做的。实际利用到的选项chrome都人性化地列在了主界面。选拔了运动支付格局后界面会变成那样子:

yzc66亚洲城 23

亟需小心的是,Chrome浏览器模拟的只是界面,内核和原生的多多效益是仿照不了的,不过那对于做html5运动支付的来说早已足足了吧。

三、结束语

本篇小说首要介绍了运动支付测试的工具部分。chrome在模仿移动支付时出力有些欠缺。假如急需真机调试,诸位可以设想UC流浪器的开支版本(只帮衬安卓),chrome的活动版本(只援救安卓),或者自己买台mac(露珠买不起啊)再买台iphone(露珠的是BlackBerry的吊死机啊)协作联调。weinre那玩意儿只可以调样式,还得投机加代码提议就无须去用了。好了,Chrome开发者工具都介绍的大多了,下一篇是本体系的尾篇。介绍两款插件用(包罗高大上的开发者工具皮肤哦),敬请关怀!

1 赞 8 收藏
评论

yzc66亚洲城 24

Chrome开发者工具不完全指南(二、进阶篇)

2015/06/23 · HTML5 · 3
评论 ·
Chrome

初稿出处:
卖烧烤夫斯基   

上篇向大家介绍完了根基功用篇,本次分享的是Chrome开发工具中最实用的面板Sources
 Sources面板大概是本人最常用到的Chrome效用面板,也是在我看来决解一般难题的显要职能面板。经常假若是开发遭受了js报错或者此外代码难题,在审美一次自己的代码而一名不文之后,我先是就会打开Sources进展js断点调试,而它也大概能一举成功自身80%的代码难点。Js断点这么些成效令人开心不已,在并未js断点效用,只好在IE(万恶的IE)中靠alert弹出窗口调试js代码的时日(尤其alert一个object根本不会理你),那样的开销环境对于前端程序员来说几乎是一场惊恐不已的梦。本篇小说讲会介绍Sources的求实用法,支持各位在付出进程中够开心地调试js代码,而不是因它而发狂。首先打开F12开发工具切换来Sources面板中:

yzc66亚洲城 25

Sources功效面板是资源面板,他紧要分为三个部分,多少个部分并不是独自的,他们互相关联,互动共同促成一个重点的作用:监控js在执行期的移位。一句话来说就是断点啊。

第一大家来看区域1,它的效应有些近乎于Resources面板,重假诺体现网页加载的本子文件:例如css,
js等资源文件(它不带有cookie,img等静态资源文件)。

 

yzc66亚洲城 26

 

 

 

区域1的导航条上有七个tab切换选项,他们都存有例外域名和环境下的js和css文件,大家先是来表达Sources(资源)选项的效果:

Sources:
包括该品种的静态资源文件。双击选普通话件,该公文内容会在区域2中突显,假使你选中的是js文件,那么您可以在区域2种单击行号举办断点调试,只要js执行到了您所标记的这一行,它会截止向下实施并且等待你的指令:

yzc66亚洲城 27

从上图可以看看js执行到断点处时各样区域的变型,首先是区域3中的Breakpoints笔录音信会变高亮,然后是区域4中Scope 采用中列出了断点处私有和国有的变量音讯,那样,我可以很直观地精晓,此时此刻js的履行景况。同样的,你可以把鼠标放到区域2种的某部变量上,浏览器会弹出一个小框框,框框里面则是你悬浮其上的变量所有音信:

 

yzc66亚洲城 28

然后,你可以按F10接着js执行的门道一步一步地走下来,假使您遇见了一个函数包蕴着其它一个函数,那么您可以按F11进入到个函数中去考察它的代码执行活动。你也得以通过点击区域1平底的一一图标对js代码举办跟踪。然而自己指出你使用神速键,故名思义,因为它比较灵通方便。然而怎么用完全按照个人习惯来吗。下图是各种按钮的效果效用。

 

yzc66亚洲城 29

 

 在上图黑色圆圈中数字,它们各自表示:

  1、停止断点调试

  2、不跳入函数中去,继续执行下一行代码(F10)

  3、跳入函数中去(F11)

  4、从实施的函数中跳出

  5、禁用所有的断点,不做此外调试

  6、程序运行时遇见更加时是不是中断的开关

接下去在区域4种切换来Watch
Expressions
 选项,它的效用是为当前断点添加表达式,使得每一回断点往下走一步都会实施你写下的js代码。须求注意的是其一功效亟须小心谨慎选用,因为那或者会促成你写下的督查代码段会不断地被执行。

yzc66亚洲城 30

 

为了防止你的调节代码重复执行,大家能够在调节时间接在console控制台上一遍性地出口当前断点处的音信(推荐那样做)。为了阐明我们在console面板中享有的是当下断点环境,我门可以对照断点执行前后的this值变化。

yzc66亚洲城 31   
  yzc66亚洲城 32

假若你认为在断点的时候为了看一个变量必须借用console面板输出的主意来查看会比较费心,那么您可以创新最新版的Chrome,它已经为大家缓解了这么些烦恼。为了便利开发者调试,在这点上谷歌已经到位了无以复加,就在前几天更新过Chrome以后,卤煮意外地意识了断点时监控环境变量的此外一种方法,这种艺术极为清晰,在断点调试的时候,区域2中会自动突显每个变量的值,每一次代码往下走的时候那么些值都回时时更新。那让开发者对脚下环境变量大约可以说是洞察。(此效率有一个小缺点,那就是无力回天查看数组或者指标的切切实实索引和值,可是自己信任google会革新它的。)

yzc66亚洲城 33

 

当您的序列现已线上,出现了一个bug,你修复了随后不可能见到它确实在线上的法力,那么你可以在打开线上的项目,直接在浏览器中修改代码然后看到效果。那样的成效往往是最直白的,那种格局也能帮你省去频仍验证揭橥的劳动,毕竟身为前端码农的你也一定会听到过后台(平时状态下是后台宣布)表弟的埋怨:“XXX,测试通过了没,不要出现了哈,公布五次很麻烦的!”。而在Chrome里面,只要求在区域2种直接改动,你就足以印证你的代码在线上是不是行得通。卤煮在此间只是提出该意义的用法之一。其余的就凭诸位的才智去想了。

yzc66亚洲城 34   
 
  yzc66亚洲城 35

纵然在断点时,你也得以编制代码,按ctrl+S保存之后,你会看到区域2的背景由白色变为浅色,而断点会重新初阶举行。

归来区域1,Content
script
 选项开里面包括着部分第三方插件或者浏览器自身的js代码,日常它是被忽略的,实际上它的法力很少。大家可以越多关心一下Snippets分选。还记得基础篇里面介绍的style呢?在其中我们可以编写界面的css代码并且即时见到它们的投射效果,同样地,在Sinppets中,大家也
可以编写(重写)js代码片段。这几个片段其实就一定于您的js文件一律,不一致的是本地的js文件在编辑器里面编辑的,而那边,你是在浏览器中编辑的。这么些代码片段在浏览器刷新的时候既不会没有,也不会实施,除非是你手动执行它。它可以存在你的地头浏览器中,即便关闭浏览器,再一次打开时它依然还在那边。它的第一成效可以使得大家编辑一些类其余测试代码时提供方便,你通晓,假设您在编辑器上编制那几个代码,在公布时您无法不为它们增加注释符号或者手动删除它们,而在浏览器上编制就不要求这么麻烦了。

Snippets选料的空白点右键后选拔弹出的new选项,建立一个您自己的新的公文,然后在区域2种编辑它。

yzc66亚洲城 36

 

Snippets 的丰裕功效强大,它的重重躲藏成效还有待挖掘。方今卤煮使用它是在挥之不去调试片段、单元测试、少量的效用代码编写作用上。

末段大家看看js中时间拉长的监督作用,同上篇文章介绍的同等,Sources面板和Elements面板一样有监督事件的作用,而且Sources中成效越来越丰硕,也愈发强硬。它的那有些功用集中在区域3中。我以下图为例,观望其效果。

yzc66亚洲城 37

 

从上到下,青色圈内的数字的含义:

1、断点处的债堆栈,就是从该函数起,逐级追寻调用到他的函数名。例如:

JavaScript

function a () { b(); } function b() { c(); } function c() {
//在该处断点,查看call stack } a->b->c. call stack
从上到下的相继就是 c b a

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function a () {
   b();
}
function b() {
   c();  
}
function c() {
  //在该处断点,查看call stack  
}
a->b->c.
call stack 从上到下的顺序就是
c
b
a

2、在区域2中您的断点调试音信。当某个断点在履行的时候对应的新闻会高亮,双击该处音信方可在区域2中火速稳定。

3、添加的Dom监控音讯。

4、击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax
请求,输入内容就一定于 URL 的过滤器。假若什么都不填,那么就监听所有 XHR
请求。一旦 XHR 调用触发时就会在 request.send() 的地点暂停。

5、为网页添加各系列型的断点音讯。如选中了Mouse中的某一项(click),当您在网页上起身那几个动作(单击网页任意地点),你浏览器就是马上断点监控该事件。

 

值得再度重新一次,Sources是形似的成效开发中最常用到也是最实用的作用面板,它里面的不少效果对于我们开发前端工程以来是不行有帮带的。在web2.0一代的后天,我不引进仍然在和谐的代码里面写调试音讯的作为,因为那会然你的支出变得繁琐。Chrome开发工具给大家提供的强劲成效,大家相应好好利用之。那篇小说就到此停止,固然有点麻烦,但到头来基本发挥了卤煮使用经验和想方设法,希望对你有扶持。即使您以为不错,请推荐一下本文并三番五次关心卤煮在的博客。在下一篇中我将向大家介绍Chrome开发工具中的品质方面的调节。

1 赞 15 收藏 3
评论

yzc66亚洲城 38

Chrome开发者工具不完全指南(二、进阶篇)

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website