Chrome开发者工具调试小技巧

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进行查找

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

console控制台通过选择器快速定位

快速在HTML中找到该ID对应的元素

---

10.查看元素上的事件

---

11.吸管工具的使用

在网页任意一个元素上添加background-color属性,然后就可以使用吸管工具来吸取页面上元素的颜色

---

12.快速在页面上添加文字

在控制台输入下面的代码

document.designMode = 'on'

---

13.快速打开当前页面资源文件

在源代码选项卡页面,按下Ctrl + P,跳出搜索框,然后输入想显示的资源文件名称
支持各种资源,例如js,css,image等

⭕打开之后,还可以在侧边栏中显示

⭕在源代码页面中Ctrl + G可以快速跳到指定的代码行

---

14.找到JS中的断点

---

15.设置工作目录,同步修改的样式

如果不设置工作目录,当通过chrome开发者工具修改css样式进行调试的话,修改完成之后,需要手动复制样式到源代码中
如果修改的地方很多的话,很容易出现遗漏的情况.通过设置工作目录,可以实现调试的样式自动同步到源代码中


完成上述设置之后,通过开发者工具调试的样式就会反映到源代码中

---

16.copy函数赋值JS变量

⏹入下图所示，在控制台中打印出了一个对象

⏹现将该对象存储为全局变量，然后通过copy函数复制到剪贴板中

---

17.控制台快速定位页面元素

17.1 $()和$$()的使用

在控制台使用可以使用document.querySelector()和document.querySelectorAll()来快速选择当前页面的元素。
但是原生API太长了,在控制台中我们可以使用$来代替querySelector(),使用$$来代替querySelectorAll()。

👉注意，此处提到的$和$$并非JQuery中的$

⏹如下图所示的页面中存在3个div元素

⏹使用$和$$进行选中

17.2 inspect的使用

⏹当知道元素的id或者class等信息的时候，可以通过inspect($('选择器'))来快速定位到页面的元素

✅如下图所示，该网页的header部分的class为border-b border-slate-300

⏹若我们只知道class为border-b border-slate-300，并且向快读定位到页面上该元素的话，
直接在控制台上输入inspect($('.border-b.border-slate-300'))。

---

18.$0和$_

⏹ $0 表示页面中的DOM元素

⏹ $_ 表示最近一次在控制台执行的表达式返回的结果

---

19.快速定位到发起请求的代码位置

⏹如下图所示，点击按钮之后发送了网络请求

⏹可以快速通过Network的Initiator面板来查看请求的调用栈，快速定位到请求的JS代码

⏹具体效果如下

---

20.面板中元素滚动到视口内

• 当不知道面板中的元素在页面中的位置和样子的时候，可以移动到视口内

---

21.Properties属性面板

---

22.Network面板发起Mock请求

• 在Chrome内核117版本的浏览器中，原生开始支持发送Mock请求，可以修改返回的响应数据。

⏹如下图所示，我们访问Github的api，得到了对应的json数据。

⏹如下图所示，在Network面板选择替代内容后，再选择相应的文件夹。可以看到响应的内容已经被缓存到指定的文件夹中。

⏹我们修改本地缓存的响应内容，可以看到再一次发送请求的时候，得到的响应走的是本地缓存文件，而不是Github给我们返回的json数据。

⏹我们可以在源代码面板选择开启或者关闭启用本地替代，取消勾选之后，可以不走本地Mock的数据。

⏹除了json文件响应之外，JS，CSS，图片等静态资源都可以被mock。

⏹除了修改响应内容之外，还可以修改响应头，具体做法和修改响应内容类似，不再赘述。

---

23.测试XPath选择器

⏹在控制台上输入$x(XPath选择器)即可

$x("//div[@class='pages clear']/a[@class='nextprev']/preceding-sibling::a[1]")

⏹效果如下