菜单

Chrome开发者工具不净指南

2018年12月15日 - Html/Html5

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

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

原文出处:
售烧烤夫斯基   

虽你无是均等名为前端开发工程师,相信你吧不会面指向Chrome浏览器感到陌生。按照最新的同样份(2015/06)的浏览器市场占有率报告,Chrome近乎占有浏览器天下的孤岛。简单、连忙而她变成了初时代众人的新宠。如若你是同等称作web开发人士,我引进您下Chrome。作为前端开发的”IDE”,你只有待多配一个编辑器就能一呵而就几有的出任务了。关于她的动和功效分析要么都是颇如非统,要么是细细的糜烦。本系会较详细地分享卤煮的有的Chrome(F12开发者功用)使用更,从部分基础的功用起头至她的片高级性能分析器(提姆(Tim)eline、Profiles),在结尾,将会师推荐几款款好的插件,希望对你的支出工作出稍许底打算。如果你针对有些面板模块效率已特别精晓得间接跨越过去看你感兴趣之有的。

一、Elements
manbetx2.0手机版 1
于Element中最重要分点儿块好之片段
A:HTML结构面板
B:操作dom样式、结构、时间之亮面板
1.以A中,每当你的鼠标移动到其他一个要素上,对应之html视图中碰面让该因素棕色之背景。
manbetx2.0手机版 2
2.只要您单击选中一个元素,在A部分的最底层,会显得该因素以html结构被的职关系
manbetx2.0手机版 3
3.然继而得以B部分的styles选项中编该因素的体裁,并且看来html结构的实时更新(大大的便利)
manbetx2.0手机版 4
4.你可以于B界面中切换至伊夫(Eve)nt Listeners选项,观望该因素绑定的波。
manbetx2.0手机版 5

click 是事件名称

manbetx2.0手机版,.div1 事件是索引名称(也即使是经过什么绑定的)

attachment 事件源于

handler里面包含事件之毁主体内容

useCapture代表该事件是否向上冒泡
5.选中一个元素,右击鼠标,你会合见到出一个弹出窗口冒出,里面有几摘取
manbetx2.0手机版 6
Add attribut : 为该因素添加属性
Edit attribute:修改该因素的特性
Force element state:
为元素激活某种状态(首要为此当可几乎的素比如a、input、button等)
Edit as
HTML:编辑该因素(你可再度写她的全方位content)甚至修改其的签号
当中略的掠过…….
Break
on:为该因素添加dom操作事件监听。包含三独接纳(树结构改变、属性改变、节点移除)。这些选项之用意是援我们监控和一向操作元素的代码。请参考下图事例:
manbetx2.0手机版 7
6.于A界面的弹奏出选项窗口被挑选node removal,在B界面切换至DOM
Breakpoints 选项,可以见到有登记新闻。然后我们点击click
me按钮触发删除div3的风波,可以看到浏览器自动吗大家原则性删除该因素的代码有,并且已执行js代码:

manbetx2.0手机版 8

 

7.于B界面中切换至Properties选项,可以望选中元素的各样消息(英文单词里面的牵线相比简单,就不一一介绍了)。

manbetx2.0手机版 9

 

8.点击A界面的妄动地点,按快捷键ctrl+F能够看看底有输入框,在输入框中输入而想只要摸的任何内容,倘诺匹配到了,都扭转以A面板中高亮展现
manbetx2.0手机版 10
9.要你得点击左上角的问号图标,然后拿鼠标移动及视图界面中,对准元素按下鼠标左键,对应的A界面会定位及选的素。
manbetx2.0手机版 11

 

 

二、Network
manbetx2.0手机版 12
1.Network是一个督查时网页所有的http请求的面版,它主体有显得的凡每个http请求,每个字段表示正该要的例外性质和状态
manbetx2.0手机版 13
Name:请求文件名称
Method:方法(常见的是get post)
Status:请求完成的状态
Type:请求的品种
Initiator:请求源也就是说该链接通过什么发送(常见的是Parser、Script)
Size:下载文件要请求占的资源大小
提姆e:请求或下载的辰
提姆eline:该链接以发送过程中之时刻状态轴(我们得把鼠标移动及这些红红绿绿的时间轴上,对应之会发生她的详细新闻:初步下载时间,等待加载时间,自身下充斥耗时)
manbetx2.0手机版 14
2.单击面板中的人身自由一长条http音信,会于底层弹有一个新的面板,其中记录了该条http请求的事无巨细参数header(表头信息、重返消息、请求基本状态—请参见http1.1商内容对号落座)、Preview(再次回到的格式化转移后文本音信)、response(转移以前的本来面目音讯)、Cookies(该请求带的cookies)、提姆ing(请求时别)
manbetx2.0手机版 15
3.每当主面板的顶部,有有按钮从左到右它们的功用分别是:是否启用继续http监控(默认高亮选中了)、清空主面板中的http音信、是否启用过滤消息选项(启用后方可本着http消息举行筛)、列有强特性、只排有name和time属性、preserve
log(目前匪精通什么用)、Dishable cahe(禁用缓存,所有的304再次来到会和fromm
cahe都掉变成健康的伸手忽视cache conctrol 设定);

manbetx2.0手机版 16
4.说到底当主面板的底有记录了总体网络要状态的局部主导音讯
manbetx2.0手机版 17

三、Resources

Resources部分于简单,他要为我们来得了本界面所加载的资源列表。还有cookie和local
storage 、SESSION
等本地存储音讯,在此处,我们得以随心所欲地改、扩大、删除本地存储。

manbetx2.0手机版 18 至于webSql,我精通之并无多,在付出被这多少个少用到。如若你想精晓那点的音信,我推荐你失去阅读这篇博客 http://www.cnblogs.com/chuncn/archive/2010/11/22/1884783.html

1 赞 28 收藏 2
评论

manbetx2.0手机版 19

Chrome开发者工具不了指南(一、基础效用篇)

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

Chrome开发者工具不完全指南:(三、性能篇)

Chrome开发者工具不净指南(四、性能上阶篇)

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

Chrome开发者工具不了指南(六、插件篇)

相关文章

发表评论

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

网站地图xml地图