Chrome开发者工具调试小技巧

目录

• 1.Snippets
• 2.Ajax请求
• 3.打开调试工具面板
• 4.复制样式和选择器
• 5.快速找到元素对应的样式
• 6.快速调试样式
• 7.隐藏一个元素
• 8.flex弹性盒布局的调试
• 9.快速定位DOM节点
• 10.查看元素上的事件

1.Snippets

新建js代码片段可以保存在此处,并且可以执行

2.Ajax请求

过滤出所有的Ajax请求,并可重复发送

将此次Ajax请求复制为fetch请求

fetch("https://www.trip.com/mkt-pages-cookie/writecookie", {
	"credentials": "include",
	"headers": {
		"accept": "*/*",
		"accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
		"content-type": "application/x-www-form-urlencoded",
		"sec-fetch-mode": "cors",
		"sec-fetch-site": "cross-site"
	},
	"referrer": "https://www.ctrip.com/?allianceid=1050724&sid=1786019",
	"referrerPolicy": "no-referrer-when-downgrade",
	"body": "Union=OUID%3D%26AllianceID%3D1050724%26SID%3D1786019%26SourceID%3D%26createtime%3D1632148623%26Expires%3D1632753422556&isSec=true&token=100013869",
	"method": "POST",
	"mode": "cors"
});
           

3.打开调试工具面板

Ctrl + Shift + P

4.复制样式和选择器

5.快速找到元素对应的样式

6.快速调试样式

我们自己新创建的类会保存在一个临时文件中,可以将此临时文件保存到本地

加入自己的类样式,删除元素既存的类样式

7.隐藏一个元素

选中一个DOM元素,然后按下键盘上的

H

键

按下

H

键之后,元素消失,并且占用位置

调试工具多给添加了一个类

8.flex弹性盒布局的调试

flex布局之后,可以虚线的方式标记元素,并且可以快读进行调试

显示所有的flex布局,并快速定位到相应的DOM节点

9.快速定位DOM节点

在网页中的某一个元素上,选择检查

Ctrl + F: 快速搜索,支持选择器或者XPath进行查找

下图是按照类选择器进行查找

10.查看元素上的事件