chrome跳转新页面自动打开devtools调试工具的方法

在做前端调试时，你可能遇到过这种场景：A 页面有个按钮，点击后跳转到 B 页面。可当你打开 DevTools 想看看 B 页面初始化发了哪些请求时，却发现——啥也没有。有人说，刷新一下不就行了？确实，大多数情况下刷新能解决，但有些页面为了安全，URL 不支持重放刷新，一刷就失效。这时候，你只能在首次打开 B 页面时自动拉出 DevTools，才能抓住那些关键请求。

解决方法

其实 Chrome 早就内置了一个小开关，专门应对这种“跳转后丢失调试”的问题。操作很简单，几步就能搞定。

1. 先打开 DevTools

右键点击页面任意位置，选择“检查”，或者直接按 F12 快捷键，调出开发者工具面板。

2. 找到设置齿轮

在 DevTools 面板右上角，有个小齿轮图标，点击它进入设置页面。

3. 勾选关键选项

在设置面板里，找到下图所示的选项，勾选它。这个选项的作用就是让 DevTools 在新页面打开时自动弹出。

4. 别忘了保留日志

设置完成后，关闭设置面板。然后在 DevTools 左上角，勾选“保留日志”（Preserve log）选项。这样即使页面跳转，之前的请求日志也不会被清除。

5. 测试一下效果

回到 A 页面，先确保 DevTools 已经打开。然后点击那个跳转按钮，你会发现 B 页面自动弹出了调试面板，所有初始化请求一览无余。

这样一来，再也不用担心跳转后抓不到请求了。这个小技巧，关键时刻能省不少事。