菜单

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

2019年2月2日 - Html/Html5

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

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

原文出处:
卖烧烤夫斯基   

就是你不是一名前端开发工程师,相信您也不会对Chrome浏览器感到陌生。依照新型的一份(2015/06)的浏览器市场占有率报告,Chrome近乎占有浏览器天下的孤岛。简单、飞快使它成为了新时代芸芸众生的新宠。如果您是一名web开发人士,我推荐你采纳Chrome。作为前端开发的”IDE”,你只必要搭配一个编辑器就能成功大致拥有的费用职分了。关于它的应用和功效分析要么都是大而不全,要么是细细的糜烦。本系会相比较详细地分享卤煮的片段Chrome(F12开发者作用)使用经验,从部分基础的意义初始到它的一对高档品质分析器(提姆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(转移以前的原来音讯)、Cookies(该请求带的cookies)、Timing(请求时间转移)
图片 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地图