浏览器DevTools使用技巧

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。

本文作者：正则

作为一名前端开发人员，平时开发中使用最多的就是 Chrome devtools，但可能很多同学像我一样平时用的最多也就 Console、Elements 和 Network 面板了。除了我们常用的一些功能，它还提供了很多强大但我们不太常见的功能，这些功能可以大大提高我们的开发效率。下面我们就来了解一下。

使用Chrome的截图工具

进行网页截图，一般情况我们都使用的是第三方工具，但其实 Chrome 已经为我们提供了截图功能。使用Command+SHIFT+P（MAC）/CTRL+SHIFT+P（Window）打开命令菜单，输入框中输入“capture”会自动联想到截图命令。

file

• Capture area screenshot

  自定义截图区域，与常用的截图工具类似

• Capture full size screenshot

  截取html完整渲染图

• Capture node screenshot

  截取某个 DOM 节点的渲染图，使用前需要先在 Elements 下选中节点，也可以选中节点后，点击右键选中菜单中的 Capture node screenshot

• Capture screenshot

  截取浏览器视窗内的区域

flex 调试面板

对使用了 flex 布局的元素，点击 display: flex 右侧的按钮，就会出现 flex 调试面板，可以直观的修改 flex 相关样式，便于进行样式调试。

file

Console面板相关

$0、$1、$2、$3、$4

$0 是对当前在 Element 面板中选中的 html 节点的引用，$1是对上一次选择节点的引用，以此类推直到$4，通过$的引用可以读取 DOM 节点的一些属性。

file

$ 和 $$

$ 等价于 document.querySelector()

$$ 等价于 document.querySelectorAll()

file

$_

$_为对上次输出结果的引用

file

console.table

console.table 可以将数组或对象以 table 方式展示，同时也可以展示对象属性。console.table 接受两个参数，第一个为要现实的数据，第二个参数为包含列名称的数组。

file

time 与 timeEnd

console.time 与 console.timeEnd，两个方法配合计算并打印代码执行时间。

file

在控制台快速发送请求

在平时的接口调试中，对于同一个接口，我们有时需要修改传入参数并重新发送，对于有些请求可以刷新下页面或者重新操作下即可重新发送，如果对于一个大型表单输入参数发送请求并且进行了页面跳转后，还需要再次调试，针对这样的场景，再次去输入表单去重新发送请求显然效率是非常低的，那有什么捷径呢？
在 Chrome 中我们可以进行以下操作：

1. 打开 Network 面板，选中 Fetch/XHR；
2. 选择要重新发送的请求，单击右键选择 Copy，选中 Copy as fetch；
3. 进入 Console 粘贴，修改输入参数并重新发送。

file

在 Edge 浏览器中除了使用 Chrome 中的方法外，还可以使用 Network Console 进行重新请求，具体操作如下：

1. 选择要重新发送的请求，单击右键选择 Edit and Resend；
2. 进入 Network Console 面板，修改参数后点击 send 即可发送请求。

file

使用 Import HAR file / Export HAR file 复现网络请求

file

在 Network 面板上分别有 Import HAR file 和 Export HAR file 按钮，点击 Export HAR file 按钮会导出har文件，文件中保存了浏览器与服务器交互的一些数据，我们可以在任意浏览器页面中点击 Import HAR file 导入 har 文件复现当时的请求。

file

使用场景：当在客户环境我们不方便直接访问，假如由于网络问题或传参问题等问题导致接口报错问题时，我们可以通过导出 har 文件，在我们本地复现当时的网络请求状况。

条件断点

当清晰知道要调试的范围，且只调试某指定条件分支下使用，当满足条件时，断点才会生效。
使用方法：在行号处点击 Add Conditional Breakpoint...，即可添加代码行条件断点。

file

事件断点

如果对代码不熟悉或者在较长的代码逻辑中，只是知道点击触发业务逻辑时，可以考虑事件监听断点。

file

DOM断点

当 DOM 节点发生变化时添加断点，会定位到修改 DOM 的那行代码。

file file

说明：

1. subtree modifications 当前 DOM 子节点有任何变化时触发断点
2. attribute modifications 当前 DOM 本身属性有任何变化时触发断点
3. node removeal 当前 DOM 节点被移除时触发断点

使用 Snippets 编写代码片段

在平时开发中，常常会有些 JS 代码需要在浏览器中调试，直接在 console 下写会比较麻烦，这时可以使用 Chrome 提供的 Snippets 功能。
使用方法：

1. 在 Sources 下选择 Snippets，点击 “New Snippet” 按钮，创建一个新的代码片段；
2. 在代码区域输入代码；
3. 按下“Command+Enter”或者点击右下方按钮即可执行代码。

file

此外也可以使用 Snippets 存储一些常用的代码片段，如防抖、节流、正则表达式等代码，这样每次打开 Devtools 都能获取到这些代码，而不用去百度。
Snippets 和 Console 对比

Snippets	Console
跨标签页可用	当前标签页可用
永久保存，除非手动删除	页面重载后清除

总结

Chrome DevTools提供了更多强大的功能供我们使用，它们可以大大的提高我们的开发效率。以上只是Chrome DevTools里一小部分使用技巧，更多的使用技巧欢迎大家在评论区补充分享。