菜单

Chrome开发者工具不完全指南

2019年1月27日 - JavaScript

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

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

原稿出处:
卖烧烤夫斯基   

即便你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生。按照最新的一份(2015/06)的浏览器市场占有率报告,Chrome近乎占有浏览器天下的半壁江山。简单、连忙使它成为了新时代众人的新宠。如若您是一名web开发人士,我推荐你采用Chrome。作为前端开发的”IDE”,你只须求搭配一个编辑器就能成功大约拥有的费用职分了。关于它的运用和作用分析要么都是大而不全,要么是细细的糜烦。本系会比较详细地分享卤煮的一些Chrome(F12开发者功效)使用经验,从一些基础的功效开首到它的有些高级性能分析器(提姆(Tim)eline、Profiles),在最后,将会推荐五款好的插件,希望对您的花费工作有稍许的职能。若是你对部分面板模块作用已经很掌握可以从来跳过去阅读你感兴趣的一对。

一、Elements
图片 1
在Element中关键分两块大的局地
A:HTML结构面板
B:操作dom样式、结构、时间的显示面板
1.在A中,每当你的鼠标移动到任何一个因素上,对应的html视图中会给该因素黄色的背景。
图片 2
2.只要您单击选中一个要素,在A部分的底部,会显示该因素在html结构中的位置关系
图片 3
3.然后你可以在B部分的styles选项中编辑该因素的样式,并且看来html结构的实时更新(大大的福利)
图片 4
4.您可以在B界面中切换来伊夫nt Listeners选项,观看该因素绑定的事件。
图片 5

click 是事件名称

.div1 风云是索引名称(也就是由此什么样绑定的)

attachment 事件源于

handler里面包蕴事件的毁坏主体内容

useCapture表示该事件是或不是向上冒泡
5.选中一个要素,右击鼠标,你会看到有一个弹出窗口出现,里面有多少精选
图片 6
Add attribut : 为该因素添加属性
Edit attribute:修改该因素的性能
Force element state:
为因素激活某种情况(紧要用在可以大约的要素比如a、input、button等)
Edit as
HTML:编辑该因素(你能够重写它的漫天content)甚至修改它的标签名称
中级简单的掠过…….
Break
on:为该因素添加dom操作事件监听。包蕴多少个挑选(树结构改变、属性改变、节点移除)。那个选项的职能是扶助大家监控和固化操作元素的代码。请参见下图事例:
图片 7
6.在A界面的弹出选项窗口中甄选node removal,在B界面切换来DOM
Breakpoints 选项,可以看到有注册音信。然后我们点击click
me按钮触发删除div3的事件,可以看看浏览器自动为大家永恒删除该因素的代码部分,并且为止实施js代码:

图片 8

 

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

图片 9

 

8.点击A界面的随意地点,按火速键ctrl+F可以看到尾部有输入框,在输入框中输入你想要查找的别的内容,假若合作到了,都回在A面板中高亮显示
图片 10
9.或者您可以点击左上角的问号图标,然后把鼠标移动到视图界面中,对准元素按下鼠标左键,对应的A界面会定位到拔取的因素。
图片 11

 

 

二、Network
图片 12
1.Network是一个监察当前网页所有的http请求的面版,它主体部分显得的是每个http请求,每个字段表示着该请求的不比性质和情形
图片 13
Name:请求文件名称
Method:方法(常见的是get post)
Status:请求完毕的动静
Type:请求的品类
Initiator:请求源也就是说该链接通过怎么着发送(常见的是Parser、Script)
Size:下载文件或者请求占的资源大小
提姆e:请求或下载的小时
提姆eline:该链接在殡葬进度中的时间状态轴(大家得以把鼠标移动到这么些红红绿绿的时间轴上,对应的会有它的详细新闻:起首下载时间,等待加载时间,自身下载耗时)
图片 14
2.单击面板中的任意一条http音讯,会在底部弹出一个新的面板,其中记录了该条http请求的详细参数header(表头新闻、再次回到音信、请求基本景况—请参考http1.1切磋内容对号落座)、Preview(再次回到的格式化转移后文本音讯)、response(转移从前的原有音信)、库克(Cook)ies(该请求带的cookies)、提姆(Tim)ing(请求时间转移)
图片 15
3.在主面板的顶部,有一些按钮从左到右它们的功效分别是:是不是启用继续http监控(默许高亮选中过)、清空主面板中的http新闻、是不是启用过滤新闻选项(启用后得以对http音信进行筛选)、列出多种属性、只列出name和time属性、preserve
log(近年来不明了啥用)、Dishable cahe(禁用缓存,所有的304重回会和fromm
cahe都回变成正规的呼吁忽视cache conctrol 设定);

图片 16
4.结尾在主面板的底层有记录了全体网络请求状态的有的骨干音信
图片 17

三、Resources

Resources部分较不难,他重点向大家突显了本界面所加载的资源列表。还有cookie和local
storage 、SESSION
等地面存储新闻,在此处,大家得以自由地修改、伸张、删除本地存储。

图片 18 有关webSql,我通晓的并不多,在开发中很少用到。如若你想打听那地点的新闻,我引进你去阅读那篇博客 http://www.cnblogs.com/chuncn/archive/2010/11/22/1884783.html

1 赞 28 收藏 2
评论

图片 19

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

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

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

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

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

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

相关文章

发表评论

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

网站地图xml地图