如何通过重定向使用Chrome的网络调试器

本文翻译自：How to use Chrome's network debugger with redirects

The Chrome network debugger gives me a great view of all the HTTP resources loaded for a page. Chrome网络调试器使我可以很好地了解为页面加载的所有HTTP资源。 But it clears the list whenever a new top-level HTML page is loaded. 但是，只要加载了新的顶层HTML页面，它就会清除该列表。 This makes it very difficult to debug pages that automatically reload for one reason or another (running script or 300 responses). 这使得调试由于某种原因或另一原因（运行脚本或300个响应）而自动重新加载的页面非常困难。

Can I tell Chrome not to clear the network debugger when a new top-level page is loaded? 加载新的顶层页面时，我可以告诉Chrome不要清除网络调试器吗？ Or can I go back and look at the previous page's network resources? 还是可以返回查看上一页的网络资源？

Or can I somehow force Chrome to pause before loading a new page when I don't control the page I'm trying to debug that's doing the redirecting? 或者，当我无法控制要重定向的页面时，是否可以以某种方式迫使Chrome在加载新页面之前暂停？ It's part of an OpenID dance that's going awry, so the combination of SSL and credentials makes it extremely difficult to debug with command-line tools. 它是OpenID舞步的一部分，它会出错，因此SSL和凭据的组合使使用命令行工具进行调试非常困难。

---

#1楼

参考：https://stackoom.com/question/k6Kz/如何通过重定向使用Chrome的网络调试器

---

#2楼

I don't know of a way to force Chrome to not clear the Network debugger, but this might accomplish what you're looking for: 我不知道一种强制Chrome无法清除网络调试器的方法，但这可能会实现您要查找的内容：

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

This will pause chrome before loading the new page by hitting a breakpoint. 这将在击中断点之前在加载新页面之前暂停chrome。

---

#3楼

This has been changed since v32, thanks to @Daniel Alexiuc & @Thanatos for their comments. 自v32起，此功能已更改，这要感谢@Daniel Alexiuc和@Thanatos的评论。

---

Current (≥ v32) 电流 （≥v32）

At the top of the "Network" tab of DevTools, there's a checkbox to switch on the "Preserve log" functionality. 在DevTools的“网络”标签的顶部，有一个复选框可以打开“保留日志”功能。 If it is checked, the network log is preserved on page load. 如果选中，则网络日志将在页面加载时保留。

The little red dot on the left now has the purpose to switch network logging on and off completely. 现在，左侧的小红点旨在完全打开和关闭网络登录。

---

Older versions 旧版本

In older versions of Chrome (v21 here), there's a little, clickable red dot in the footer of the "Network" tab. 在旧版的Chrome（此处为v21）中，“网络”标签的页脚中有一个可点击的小红点。

If you hover over it, it will tell you, that it will "Preserve Log Upon Navigation" when it is activated. 如果将鼠标悬停在它上面，它将告诉您，激活它时它将“在导航时保留日志”。 It holds the promise. 它信守承诺。

---

#4楼

Just update of @bfncs answer 只需更新@bfncs答案

I think around Chrome 43 the behavior was changed a little. 我认为在Chrome 43上，行为有所改变。 You still need to enable Preserve log to see, but now redirect shown under Other tab, when loaded document is shown under Doc. 您仍然需要启用“保留日志”才能查看，但是当“文档”下显示已加载的文档时，“重定向”下将显示“重定向”。

This always confuse me, because I have a lot of networks requests and filter it by type XHR, Doc, JS etc. But in case of redirect the Doc tab is empty, so I have to guess. 这总是让我感到困惑，因为我有很多网络请求，并按XHR，Doc，JS等类型对其进行过滤。但是在重定向的情况下，Doc选项卡为空，因此我不得不猜测。

---

#5楼

Another great solution to debug the Network calls before redirecting to other pages is to select the beforeunload event break point 在重定向到其他页面之前调试网络调用的另一个不错的解决方案是选择beforeunload事件断点

This way you assure to break the flow right before it redirecting it to another page, this way all network calls, network data and console logs are still there. 这样，您可以确保在将流重定向到另一个页面之前中断流，这样所有网络调用，网络数据和控制台日志仍然存在。

This solution is best when you want to check what is the response of the calls 当您要检查呼叫响应时，此解决方案是最佳选择

PS: You can also use XHR break points if you want to stop right before a specific call or any call (see image example) PS：如果要在特定呼叫或任何呼叫之前停止，也可以使用XHR断点（请参见示例）