如何使用Chrome的网络调试器处理重定向问题

Question

Chrome网络调试器可以让我清晰地查看页面加载的所有HTTP资源。但是每当加载一个新的顶级HTML页面时，它就会清除列表。这使得对自动重新加载页面进行调试变得非常困难（运行脚本或300响应等原因）。

我能否告诉Chrome在加载新的顶级页面时不要清除网络调试器？或者我能否回到以前的页面查看网络资源？

或者我能否在我没有控制正在重定向的页面时，强制Chrome暂停加载新页面？它是OpenID交互过程中出了问题，所以SSL和凭据的组合使其难以使用命令行工具进行调试。

- Leopd

---

这个重复的问题怎么比一个月前发布的那个问题得到更多的赞同？https://dev59.com/IGgv5IYBdhLWcg3wTvA- - Pacerier

@Pacerier 你链接的那个似乎不是你发布的，但原因很可能是它的标题中没有“Chrome”这个关键词。当人们在寻找与Chrome相关的内容时，他们的搜索通常包括Chrome这个关键词。“Google开发者工具”非常模糊不清。 - Joel Mellon

https://gist.github.com/InstanceOfMichael/f6a509b84fe82a718816 - Diosney

Answer 1

自v32版本以后已经进行了更改，感谢@Daniel Alexiuc和@Thanatos的意见。

---

当前 (≥ v32)

在DevTools的"网络"标签页的顶部，有一个复选框可以开启"保留日志"功能。如果勾选上了，页面加载时网络日志将被保存下来。

现在，左侧的小红点的作用是完全开启或关闭网络日志记录。

---

早期版本

在早期版本的Chrome（例如v21），在"网络"标签页的页脚处有一个可点击的小红点。

如果您将鼠标悬停在其上，它将告诉您当其被激活时它将"在导航时保留日志"。它承载着这个承诺。

- bfncs

---

在第32个版本中，它仍然存在，但已经移动到了网络面板的顶部。 - Daniel Alexiuc

实际上，现在位于顶部的是一个名为“保留日志”的复选框，可以记录日志。令人困惑的是，仍然有一个红色的录制图标，但那只是指是否记录日志。 - Thanatos

感谢您对更改进行评论，我已相应地更新了答案。 - bfncs

@boundaryfunctions 我知道，我已经使用它几周了，但昨天我更新了Chrome到版本43.0.2357.65，它不再像以前那样工作。现在产生重定向的请求被下一个请求替换了，我必须非常快地点击第一个请求来查看详情，然后它就会消失。您能否使用最新版本的Chrome检查此行为？明确地说，所有先前的请求都保存在日志中，但产生重定向的请求会消失。 - rubenlop88

请确保您没有在“文档”上进行过滤，否则它们将无法保存在那里。你可以在“其他”选项卡中专门检查它们。 - alex

Answer 2

我不知道有什么办法可以强制Chrome不清除网络调试器，但是这个方法可能能达到你想要的效果：

1. 打开js控制台
2. window.addEventListener("beforeunload", function() { debugger; }, false)

这将在加载新页面之前通过触发断点使Chrome暂停。

- Matt York

---

这并不是问题的正确答案，但却正是我在寻找的。谢谢。 - isaaclw

太棒了！我找到了“重定向前暂停”的解决方案。被采纳的答案更易于记忆，但这个方法也很酷。 - Joel Mellon

非常实用，因为如果浏览器在收到响应后立即重定向，Chrome不会显示服务器响应正文。 - Kristóf Dombi

这很有用，但我仍然在响应中看不到<meta HTTP-EQUIV="REFRESH" content="0;url=/somewhere/over/the/rainbow">标签。我需要调查重定向是如何完成的，而且在重定向之前我还无法访问响应... - undefined

Answer 3

在重定向到其他页面之前调试网络调用的另一个好方法是选择 beforeunload 事件断点。

这样做可以确保在将其重定向到另一个页面之前中断流程，这样所有网络调用、网络数据和控制台日志仍然存在。

当您想检查调用的响应时，此解决方案是最佳选择。

P.S: 如果您想在特定调用或任何调用之前停止，请使用XHR断点（请参见图像示例）

- Ofir Hadad

---

太好了。有了load事件，我们可以轻松停在开头并设置断点。谢谢！ - LeOn - Han Li

仅通过勾选复选框对我无效。必须使用JavaScript代码片段window.addEventListener("beforeunload", function() { debugger; }, false)。 - kladderradatsch

不，不是这样的。我每天都在使用它。 - Ofir Hadad

这个解决方案非常适合在想要检查调用响应时使用。在从一个网站重定向到另一个网站时，不仅保留请求数据，还保留响应数据，这正是我需要的。自您发布帖子以来已经过去了四年，似乎明显的功能（即使是网络跟踪捕获并保持原始响应数据）仍未得到支持？ - Kevin

Answer 4

对@bfncs答案的更新：

我认为从Chrome 43开始行为有所改变。您仍然需要启用“保留日志”才能查看，但现在重定向显示在“其他”选项卡下，加载文档显示在“文档”下。

这总是让我感到困惑，因为我有很多网络请求并按XHR、文档、JS等类型进行过滤。但在重定向的情况下，“文档”选项卡为空，所以我不得不猜测。

- s-f