超实用的Chrome DevTools调试技巧!
共 3391字,需浏览 7分钟
· 2022-09-16
Chrome DevTools 提供了很多实用功能来调试源代码、捕获元素状态、更新和测试元素属性、模拟各种设备环境等。今天就来学习几个超实用的调试技巧!
1. 选择和检查 DOM 元素
在 Chrome DevTools 的 Console 面板中,可以输入一些带 $
的命令来选择和检查 DOM 元素。
$0
- $4
命令可以用来显示在 Elements 面板中检查的最后五个 DOM 元素,$0
返回最近一次选择的元素,$1
返回最近一次之前选择的元素,以此类推。
![3cb083473a74d5d4b1bcc334978499e2.webp](https://filescdn.proginn.com/cd67c308c9123772974b5591bd968d47/3cb083473a74d5d4b1bcc334978499e2.webp)
$(selector)
返回带有指定的 CSS 选择器的第一个 DOM 元素的引用。这个命令就等同于 document.querySelector()
函数:
![cce36b8abf34ed726e7148eec7e8118e.webp](https://filescdn.proginn.com/e5579c2ce5518eec0b12fdc237f18dbe/cce36b8abf34ed726e7148eec7e8118e.webp)
$$(selector)
返回与给定 CSS 选择器匹配的元素数组。这个命令等同于 document.querySelectorAll()
函数:
![42965d6dd4acd766ce918aee28dba7ef.webp](https://filescdn.proginn.com/845fbf56ed37e8f54e414ee3f726918e/42965d6dd4acd766ce918aee28dba7ef.webp)
2. 复制数据
在日常开发中,我们会使用 Chrome DevTools 来调试页面,比如修改页面的样式、节点属性等。其为我们提供了复制数据的功能,可以将修改后的内容复制到源代码中。
复制 CSS 样式:
![6d53ab3cd9e425942390d7576fed0991.webp](https://filescdn.proginn.com/35d6bbf17bbfb73bc72871b74cdbd162/6d53ab3cd9e425942390d7576fed0991.webp)
我们可以复制 CSS 规则或声明,甚至可以将内容复制为 JavaScript 键值对:
// Copy rule
element.style {
max-height: 90%;
max-width: 90%;
}
// Copy all decalarations as js
maxHeight: '90%',
maxWidth: '90%'
// Copy property
max-height
// Copy value
90%
复制 HTML 内容,右键点击要复制的元素 -> Copy,点击要复制的内容类型即可:
![efe0e13d5fbb7022f3f1557a01dd1370.webp](https://filescdn.proginn.com/76932dcbb9e8a4be67ec5a7b54b888b2/efe0e13d5fbb7022f3f1557a01dd1370.webp)
复制请求数据:
![a1f578bbde614055e4eeaac99eca9d9c.webp](https://filescdn.proginn.com/a78da66ace36c2a56a2226142d649bfe/a1f578bbde614055e4eeaac99eca9d9c.webp)
3. 发送 XHR 请求
Chrome DevTools 支持重新发送 XHR 请求。在和后端进行接口联调时,如果想要重新发送请求,并且参数保持不变,可以直接右键点击要重新发送的 XHR 请求,点击 Replay XHR 即可重新发送该请求:
![b596fcbf9cec22a91926453e9fd87c06.webp](https://filescdn.proginn.com/3003b3ebd287bc58562a9039d84fd3ed/b596fcbf9cec22a91926453e9fd87c06.webp)
对于一个请求,有时需要修改请求参数并重新发送,可以直接在控制台发送请求。只需要先右键点击需要重新发送的 XHR 请求,选择 Copy -> Copy as fetch:
![5f90ffd76f1461f1548931149bb078d2.webp](https://filescdn.proginn.com/6b30639263ae74ebd332347d26f32633/5f90ffd76f1461f1548931149bb078d2.webp)
在 Console 面板中粘贴已经复制的请求内容,修改所需参数,按下回车发送请求即可:
![8315a5e51f433ca18f428c013de646c0.webp](https://filescdn.proginn.com/d60df8d18412b190c16ee02853f8b8cf/8315a5e51f433ca18f428c013de646c0.webp)
4. 颜色选择器
Chrome DevTools 提供了一个颜色选择器来设置背景颜色和文本颜色。颜色选择器具有各种功能:颜色选择器具有各种功能,例如
- 色调控制;
- 使用吸管从页面元素中选择颜色;
- 切换调色板;
- 可以在当前颜色的 RGBA、HSLA 和十六进制表示之间切换;
- 不透明度控制。
只需在元素样式的颜色显示块上点击即可弹出颜色选择器:
![f3410fd0161eb760c730e707c73f71b5.webp](https://filescdn.proginn.com/e4dcac6285f93c92e5ab242471a974e9/f3410fd0161eb760c730e707c73f71b5.webp)
可以使用吸管从页面上直接吸取颜色:
![95c7ef2c213fa4dfa3ce3f3a8e9d15e7.webp](https://filescdn.proginn.com/e410df9a7a0c23d9a489b462217ab02a/95c7ef2c213fa4dfa3ce3f3a8e9d15e7.webp)
5. 监听事件
可以在 Chrome Devtools 的 Console 面板中输入 monitorEvents()
来监听指定目标事件的信息。该方法有两个参数,第一个参数是要监听的对象。如果未提供第二个参数,所有事件都会返回。要指定要监听的事件,传递一个字符串或字符串数组作为第二个参数。
例如,监听页面 body 上的点击事件:
![eea2c07ed0c96aff721bc0f72dd39ecf.webp](https://filescdn.proginn.com/b9ad720f0a2d3c04eb0a452b73d47d04/eea2c07ed0c96aff721bc0f72dd39ecf.webp)
可以调用 unmonitorEvents()
方法来停止监听事件,需要传递一个停止监视对象的参数。例如,停止监听 body 对象上的事件:
![a16d17f5b62d7a08bd735ad971b3a86e.webp](https://filescdn.proginn.com/2e5ad40638bf6d2e70ecdb9871fdced4/a16d17f5b62d7a08bd735ad971b3a86e.webp)
6. 检查未使用的 CSS
可以在 Coverage 面板中检查页面中没有使用的 CSS 和 JavaScript 代码,可以通过以下步骤来打开 Coverage 面板:
![71188c77107431d6e7faefd9af0e7a93.webp](https://filescdn.proginn.com/4cc49a63bb1001186b290df0db5681ea/71188c77107431d6e7faefd9af0e7a93.webp)
点击刷新按钮开始重新加载页面,以测试页面的代码覆盖率:
![b9edc0a4cffecbdfc07d87846edd7f15.webp](https://filescdn.proginn.com/b485dd44fa4384f8e6a735d22c355071/b9edc0a4cffecbdfc07d87846edd7f15.webp)
检查页面的资源使用情况,点击可以查看哪些代码是没有使用的,可以通过删除那些未使用的代码来最小化 CSS 文件的大小:
![941518f2e21aee6c59256b02162da0f8.webp](https://filescdn.proginn.com/53f129cab92762f9f257ce99bc559828/941518f2e21aee6c59256b02162da0f8.webp)
对于测试结果,可以进行筛选、过滤、下载等操作。
7. 引用 HTML 元素
在 Chrome DevTools 的 Elements 面板中右键点击要引用的 HTML 元素,选择 Store as global variable
即可将其保存为一个变量,其变量名会在 Console 面板中打印出来:
![fdd53305ffea565df05315afc69cd4e3.webp](https://filescdn.proginn.com/6222a560540db5d11af44519a86f92d0/fdd53305ffea565df05315afc69cd4e3.webp)
8. 日志点
Logpoints (日志点)是一种向控制台提供调试信息的方式,而无需使用 console.log(),这在线上应用调试时会很有用。可以通过右键单击 DevTools 中的 Source 选项卡中的任何行并指定要记录的表达式来添加新的 Logpoint。执行该行时,就会在控制台中获得它的值。
![3a859aa1a54116afbc63c71417cb090c.webp](https://filescdn.proginn.com/f25c91e96af207b61b3301acd7fc01de/3a859aa1a54116afbc63c71417cb090c.webp)
使用该功能可以减少调试代码,提高代码的整洁性。并且,线上应用也可以直接添加控制台输出。
9. 动态表达式
实时表达式是一种在表达式更改时显示其值的功能。这有助于追踪代价高昂的表达式(如动画中使用的表达式)或变化很大的表达式(例如,如果正在遍历数组)的问题。它会将 Console 面板里的表达式置顶,并且能随着用户点击的变化,而动态刷新该置顶的表达式。
只需点击下图中眼睛图标,输入一个想要置顶的 JavaScript 表达式即可:
![9d2016893d1945bf69c4156cb81e2c2b.webp](https://filescdn.proginn.com/80acff57046e84b4d6ed670ee4550f2c/9d2016893d1945bf69c4156cb81e2c2b.webp)
![98e79216b7df25fef9b48dd1f41d74b8.webp](https://filescdn.proginn.com/5815343f547333fbe3e0f5b1732340ce/98e79216b7df25fef9b48dd1f41d74b8.webp)
10. 调试动画
Chrome DevTools 提供了检查和修改动画的功能。它可以帮助我们播放动画、修改动画时间并分析特定时间范围内的视图。
![e144e22db1107c04ef16975ead9ba029.webp](https://filescdn.proginn.com/c8f994f532c354d3aa71d6a26c533406/e144e22db1107c04ef16975ead9ba029.webp)
只需在 More tools -> Animations中打开动画面板进行调试即可:
Animation Inspector (动画检查器)分为四个主要部分:
- Controls (控件) :从此处可以清除所有当前捕获的动画组,或更改当前选定动画组的速度。
- Overview (概述) :在此处选择一个动画组以在详细窗格中检查和修改它。
- Timeline (时间轴) :暂停并从此处开始播放动画,或跳到动画中的特定点。
- Details (详细) :检查并修改当前选定的动画组。
![3945619235f057d343e70bfd32b8f92d.webp](https://filescdn.proginn.com/c41632d6bbf41855d2e58a1e4edaa7f3/3945619235f057d343e70bfd32b8f92d.webp)
往期干货 :
26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载(免费)
干货~~~2021最新前端学习视频~~速度领取
前端书籍-前端290本高清pdf电子书打包下载
点赞和在看就是最大的支持