Chrome开发者工具中有哪些实用的调试技巧？

Chrome开发者工具是前端开发中不可或缺的调试利器，它提供了丰富的功能来帮助开发者优化和调试网页，以下是Chrome开发者工具的9个调试技巧详解：

1、滚动到视图：在Elements标签中，如果当前元素不在视图内，可以通过这个方法让这个元素快速滚入视图中，操作步骤如下：

在Elements标签页中选择一个不在视图内的元素。

右击，选择Scroll into view。

2、复制为Fetch：在Network标签下的所有的请求，都可以复制为一个完整的Fetch请求的代码，操作步骤如下：

在Network标签页中，选中一个请求。

右击，选择Copy –> Copy as fetch。

3、阻塞请求：在Network标签页下，选中一个请求，右击该请求，选择Block request domain或Block request URL，可以分别阻塞该请求所在domain下的所有请求和该请求。

4、手动给元素添加点击事件监听：在debug的时候，有时候需要在元素的点击事件监听函数中，将该点击事件对象打印出来，有个更方便的方式，是可以直接在Elements标签页为页面元素添加事件监听事件，操作步骤如下：

在Elements标签页中选中一个页面元素（选中之后，默认可以通过$0变量获取到该元素）。

在Console标签页中，调用函数monitorEvents，输入两个参数，第一个是当前元素（$0），第二个是事件名（click）。

按Enter后，当被选中的元素触发了点击事件之后，Console标签页会将该点击事件对象打印出来。

5、拖动页面元素：在Elements标签页，你可以拖动任何HTML元素，改变它在页面中的位置。

6、DOM断点调试：基本上大家都会用JavaScript的断点调试，但是应该很多人不知道DOM节点也可以进行断点调试，ChromeDevTools提供了三种针对DOM元素的断点调试：子元素改变时、属性改变时和元素被移除时，操作步骤如下：

在Elements标签页，选中一个元素。

右击，选择Break on –> subtree modifications (或attribute modifications或node removal)。

7、截屏：在新版本的Chrome中，提供了一个截图的API，你可以将整个页面截图或者截取部分页面元素，且截取的图片尺寸跟浏览器当前视图中要截取的内容所占尺寸一致，截图输出的是png格式的图片，会自动通过浏览器下载到默认的目录下，现在有三种截取的方式：截取整个页面、部分元素或当前视图，操作步骤如下：

截取页面部分元素的操作：CMD + SHIFT + P (windows中用CTRL + SHIFT + P)打开命令菜单；在Elements标签页，选中要截取的页面元素；选择Capture node screenshot。

截取完整页面的操作：CMD + SHIFT + P (windows中用CTRL + SHIFT + P)打开命令菜单；选择Capture full size screenshot（不需要选择页面元素）。

截取当前视图内的页面：CMD + SHIFT + P (windows中用CTRL + SHIFT + P)打开命令菜单；选择Capture screenshot（不需要选择页面元素）。

8、缓存上一步操作的结果：在ChromeDevTools上运行JavaScript表达式的时候，可以使用$_来获取到上一步操作的返回值。

9、Overrides重写：在ChromeDevTools上调试css或JavaScript时，修改的属性值在重新刷新页面时，所有的修改都会被重置，如果想把修改的值保存下来，刷新页面的时候不会被重置，那就看看下面这个特性（Overrides），Overrides默认是关闭的，需要手动开启，开启的步骤如下：

打开ChromeDevTools的Sources标签页。

选择Overrides子标签。

选择+Select folder for overrides，来为Overrides设置一个保存重写属性的目录。

这些技巧可以帮助开发者更高效地使用Chrome开发者工具进行网页调试。

小伙伴们，上文介绍了“Chrome开发者工具9个调试技巧详解”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。