我希望能够追踪我点击链接时发生的网络活动。问题在于，该链接会打开一个新标签页，而显然开发人员工具是按照它所打开的标签页来工作的。“保留导航期间的记录”并没有帮助。
我的当前解决方案是转到 FireFox 和 HttpFox，这个问题在那里没有。我想知道 Chrome 的所有开发人员是如何管理这个问题的，这听起来相当基础（当然我搜索过答案，没有找到任何有用的内容）。
Chrome开发者工具：如何跟踪打开新标签页的链接的网络请求？
353
- davka
4
由于这个问题引起了相当多的关注，我开始想知道是否能提供更好的解决方案。将所有链接都在同一个选项卡中打开是否可行？ - Konrad Dzwinel
@KonradDzwinel 这对我来说只是一个一次性的任务，我已经继续做其他事情了，所以我无法告诉你。如果你愿意尝试写一个答案，我很乐意接受它。 - davka
1如果您希望将此作为一个功能，请随意给这个Chromium bug点赞：http://code.google.com/p/chromium/issues/detail?id=410958 - phsource
我想念Firefox，因为直到今天除了使用外部软件没有更好的方法。自动弹出窗口很傻。 - Kxrr
9个回答
299
如果你想了解发生在你的浏览器中的所有网络事件的详细概述，请查看chrome://net-internals/#events（或在最新版本的Chrome中查看chrome://net-export）。
根据你具体的问题，另一个可能的解决方案是在“网络”选项卡上启用“保存日志”：
并通过在控制台中执行以下代码，强制所有链接在同一标签页中打开：
[].forEach.call(document.querySelectorAll('a'),
function(link){
if(link.attributes.target) {
link.attributes.target.value = '_self';
}
});
window.open = function(url) {
location.href = url;
};
- Konrad Dzwinel
8
19谢谢，这很棒，但我希望列表与开发工具中的相同（包括请求和响应以及所有标头），只是放在另一个选项卡中。 - davka
4
document.querySelectorAll('a,form') 也会影响到表单。 - jgb1我真希望我能对这个点赞两次。我为 Chrome 编写了一个内容脚本，可以在热键上执行此操作，它真正节省了我的时间。 - polkovnikov.ph
像 Fiddler 这样的开发工具也可以帮助，完整的请求响应包括头部、正文和其他所有内容。 - Aran Dekar
4Chrome显示“网络内部事件查看器及相关功能已被删除。请使用chrome://net-export保存网络日志并使用外部弹射器netlog_viewer查看它们。”但是chrome://net-export的工作非常出色。 - Jordan Ryder
显示剩余3条评论
160
根据phsource在评论中提到的功能请求，已经实施。
在最近的版本中（从Chrome 90开始），您可以进入开发者工具设置菜单（打开开发者工具，然后点击设置图标或按F1），然后您会在全局部分找到自动打开弹出窗口的开发者工具。同时确保已选中保留日志。
- user2404501
14
15功能正常，只是在打开窗口后立即启用“保留日志”有点棘手。 - Erwin Mayer
7叹气，新窗口没有启用<保留日志>。Chrome工程师怎么了？ - Pacerier
3首先勾选父级的“保留日志”选项，然后再打开弹出窗口。 - Jehong Ahn
2对于Chrome 90，点击设置图标（或按F1），然后在全局部分下找到“自动打开弹出窗口的开发工具”。确保您已经勾选了“保留日志”（请参见https://dev59.com/cWQo5IYBdhLWcg3wQNX4#16344250）。 - soscler
5它打开了开发工具，但是网络选项卡缺少初始请求的行... - undefined
显示剩余9条评论
57
在 Chrome 61.0.3163.100 中，您现在可以使用以下选项。它可以通过转到 Chrome Dev 工具设置来访问，而它位于底部。
- Konrad Piascik
3
5很遗憾，这并不会在新打开的窗口中启用“保留日志”，因此如果你在新窗口中得到一个重定向，网络日志将被清除，并在重定向后重新开始记录。 - janh
6不想点击链接查看图片的人，请注意，这里讲的是“自动弹出开发者工具”，在“开发者工具”选项下可以找到。其他可用选项包括：“网络”下的“保存日志”和“控制台”下的“导航时保留日志”。 - hlongmore
6这对我很有效（在Chrome 76中），并且当它启动弹出窗口的开发人员工具时，它会激活“保留日志”。这可能是因为我已经激活了“保留日志”设置？ - Vince Bowdren
33
在Chrome 85（在Chrome 100中仍然适用），“Auto-open DevTools for popups”已经被隐藏到一个新的位置。
DevTools（F12）/设置（F1，Ctrl +？）/首选项/全局（在列表末尾）
现在它会保留“保留日志”设置。
DevTools（F12）/设置（F1，Ctrl +？）/首选项/全局（在列表末尾）
现在它会保留“保留日志”设置。- Tom
13
你可以这样做：
- 在要设置的链接上设置 target="任意窗口名称"。
- 单击该链接一次，以在新标签页中打开它。
- 在已打开的选项卡中，打开开发人员工具。
返回原始页面并再次点击该链接。
结果将加载到已准备好的带有开发人员工具的窗口中。
您可以激活“保存日志”选项（请参见 Konrad Dzwinel 的卓越答案）以捕获该链接上的任何重定向流量。
注意：大多数人熟悉的链接目标 ∈ { _self,_blank,_parent,_top }。但实际上可以给出任何名称，这将打开一个带有该名称的新窗口，并且以后使用相同目标值的链接、表单或window.open 将在同一窗口中打开。 进一步阅读 - mdn : window.open ，mdn : <a> tag
- Michael L.
2
1非常感谢这个提示，我从未想过。正是我所需要的。在多个窗口中工作（至少在Chrome中），如果有人想看看两个页面同时运行的情况，请参考此方法。 - Mark Ormesher
1一个非常有用的演示，展示了目标属性如何工作。今天学到了新东西。谢谢。 - martixy
12
- 添加/更新链接的
target="_self" - 在网络选项卡中勾选“导航时保留日志”
- 点击链接并获取您的请求日志
- Sebastien Lorber
1
1非常好，谢谢！这是唯一一个真正简单、没有特殊配置并且有效的解决方案。为了让其他人更清楚，以下是步骤：1. 复制链接（打开新标签页或窗口的链接）2. 切换到新标签页3. 打开开发者工具（右键单击+检查）4. 切换到网络选项卡（开始记录此新标签页上的网络流量）5. 粘贴URL并添加?target="_self" 6. 点击回车。 - ng10
2
如果打开的链接没有重定向，请在新标签页中打开“网络”选项卡，然后刷新该标签页。
- orgads
-1
- gkiko
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接