今天跟大家来分享几个实用的 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
循环。这时候你会怎么办?疯狂点击继续来跳过所有短点?那下次刷新网页还会进入这些断点。