姬長信(Redy)

Chrome DevTools 中你可能不知道的 9 个调试技巧

对于前端开发者来说,ChromeDevTools 绝对是不可或缺的调试工具,我们常用的调试方法包含一些console等,而ChromeDevTools 其实很强大,下面来聊聊一些你可能不知道的debug 方法。

Scroll Into View 滚动如视图内

Elements 标签中,查看页面元素的时候,如果当前这个元素不在视图内,可以通过这个方法让这个元素快速滚入视图中。

操作:

Copy As Fetch 复制为 Fetch

Network 标签下的所有的请求,都可以复制为一个完整的Fetch 请求的代码。

操作:

阻塞请求

Network 标签页下,选中一个请求,右击该请求,选择Blockrequest domain 或Blockrequest URL,可以分别阻塞该请求所在domain 下的所有请求 和 该请求。

手动给元素添加一个点击事件监听

debug 的时候,有时候需要在元素的点击事件监听函数中,将该点击事件对象打印出来。有个更方便的方式,是可以直接在Elements 标签页为页面元素添加事件监听事件。

操作:

拖动页面元素

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

操作:如下图。

DOM 断点调试

基本上大家都会用JavaScript 的断点调试,但是应该很多人不知道DOM 节点也可以进行断点调试。ChromeDevTools提供了三种针对DOM 元素的断点调试:子元素改变时属性改变时 和元素被移除时

操作:

截屏

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

截取页面部分元素的操作:

截取完整页面的操作

截取当前视图内的页面

缓存上一步操作的结果

ChromeDevTools 上运行JavaScript 表达式的时候,可以使用$_ 来获取到上一步操作的返回值。

Overrides 重写

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

开启的操作:

小结

ChromeDevTools 中有很多调试的小技巧,如果细数的话,至少有几十种。本文限于篇幅,只是列出了一些不容易被发现,且还比较好用的技巧,希望能对你有帮助。