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

作者：zollero
链接：https://zhuanlan.zhihu.com/p/42059158
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 

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

同步发表于微信公众号：前端微志

---

Scroll Into View 滚动如视图内

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

操作：

• 在 Elements 标签页中选择一个不在视图内的元素
• 右击，选择 Scroll into view

---

Copy As Fetch 复制为 Fetch

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

操作：

• 在 Network 标签页中，选中一个请求
• 右击，选择 Copy --> Copy as fetch

---

阻塞请求

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

---

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

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

操作：

• 在 Elements 标签页中选中一个页面元素（选中之后，默认可以通过 $0 变量获取到该元素 ）
• 在 Console 标签页中，调用函数 monitorEvents，输入两个参数，第一个是当前元素（$0），第二个是事件名（click）
• 按 Enter后，当被选中的元素触发了点击事件之后，Console 标签页会将该点击事件对象打印出来

---

拖动页面元素

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

操作：如下图。

 

---

DOM 断点调试

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

操作：

• 在 Elements 标签页，选中一个元素
• 右击，选择 Break on --> subtree modifications （或 attribute modifications 或 node removal）

---

截屏

在新版本的 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 （不需要选择页面元素）

---

缓存上一步操作的结果

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

---

Overrides 重写

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

开启的操作：

• 打开 Chrome DevTools 的 Sources 标签页
• 选择 Overrides 子标签
• 选择 + Select folder for overrides，来为 Overrides 设置一个保存重写属性的目录

---

小结

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

也很欢迎大家留言，说说对你来说很好用的小技巧~

 

-- The End --

 

往期相关文章：

 

zollero：Chrome console花式调试​zhuanlan.zhihu.com