汇总了一些前端开发宝藏小技巧~

今天跟大家来分享几个实用的 Devtools 技巧。

1. 编辑并重新发送网络请求

在 Web 开发中，我们可能要频繁调试网页上的请求，可能我们需要改动一个很小的参数，然后被迫重启一遍项目或者等待热更新，其实使用 Devtools 的重新发送请求的功能会很方便。

Edge 和 Firefox 的 Devtools 都提供了编辑并重新发送网络请求的功能（Chrome 在最近的版本中也在尝试提供类似的能力，不过只能覆盖 Header ，体验并不是很好）

比如，在 Edge 中，我们可以选中某个请求，右键点击 “编辑并重新发送”

随后会帮我们打开 “网络控制台” 面板，我们可以在其中随便更改 Query、Headers、Body 等内容：

如果我们只需要重新发送服务端请求，也可以直接在 Chrome 或 Edge 的 DevTools 中点击 Replay XHR ，注意这个功能只能对 XHR 请求使用，不适用于 Fetch 或其他请求。

2. 禁用调试语句

有些网站会故意使用 debugger 语句来禁止你调试，只要 DevTools 关闭，这个语句就没有效果，但是只要你打开它，DevTools 就会暂停网站的主线程。

当你打开 Devtools 时，可能会进入一个超长的 debugger 循环。这时候你会怎么办？疯狂点击继续来跳过所有短点？那下次刷新网页还会进入这些断点。