Chrome开发工具：如何跟踪网络链接以打开新标签页？

235

我想跟踪单击链接时发生的网络活动。问题在于该链接会打开一个新选项卡，显然，“开发工具”会针对打开该选项卡的每个选项卡工作。“在导航时保留日志”没有帮助。

我当前的解决方案是转到不存在此问题的FireFox和HttpFox。我不知道Chrome的所有开发人员是如何管理的，这听起来很基础（当然，我一直在寻找答案，没有发现任何帮助）。

google-chrome google-chrome-devtools

— 达夫卡
source

由于这个问题引起了很多关注，因此我开始怀疑我是否可以提供更好的解决方案。使所有链接都在同一选项卡中打开会成功吗？

— Konrad Dzwinel 2013年

@KonradDzwinel对我来说，这是一项一次性的任务，我继续前进，所以我不能告诉你。如果您想尝试写一个答案，我会很乐意接受。

— davka 2013年

1

如果您希望将此功能作为功能，请随时给此Chromium错误

— 加注

220

请查看chrome://net-internals/#events（或chrome://net-export使用最新版本的Chrome），以详细了解浏览器中发生的所有网络事件。

根据您的特定问题，其他可能的解决方案可能是在“网络”选项卡上启用“保留日志”：

DevTools>网络>保留日志

并通过在控制台中执行以下代码来强制所有链接在同一选项卡中打开：

[].forEach.call(document.querySelectorAll('a'),
    function(link){
        if(link.attributes.target) {
            link.attributes.target.value = '_self';
        }
    });

window.open = function(url) {
    location.href = url;
};

— 康拉德·德兹温内尔
source

13

谢谢，这很酷，但我希望使用开发工具中的列表（带有所有标头的请求和响应），仅用于另一个选项卡

— davka 2013年

尤其是在您投放过滤器时type:URL_REQUEST，这非常有趣，但是它似乎没有包含与“网络”标签相同的信息。例如，似乎为请求和响应都剥离了cookie数据。

— Patrick M

3

document.querySelectorAll('a,form')也会影响表格。

— jgb

1

我希望我能两次投票赞成。我为chrome制作了一个内容脚本，该脚本可以通过热键执行此操作，从字面上节省了我的生命。

— polkovnikov.ph

1

Chrome显示“ net-internals事件查看器和相关功能已被删除。请使用chrome：// net-export保存netlog，使用外部弹射器netlog_viewer查看它们。” ，但chrome：// net-export效果很好。

— 约旦

108

phsource的注释中提到的功能请求已实现。

在最新版本（从Chrome 50开始）中，您可以转到“开发人员工具设置”菜单（打开“开发人员工具”，然后使用3点菜单或点击F1），然后选中“为弹出式窗口自动打开DevTools”框。

13

工作正常，除了打开窗口后立即启用“保留日志”有些棘手。

— 欧文·梅耶

您应该更新答案，因为chrome稳定版本当前为55

— Lulu

5

抱歉，新窗口没有激活<Preserve Logs>。Chrome工程师怎么了？

— 佩里耶

将此功能与stackoverflow.com/a/29029881/145400结合使用（对“ Chrome开发工具”来说，这是一个很好的答案，即使关闭窗口后它仍可以保持打开状态吗？）！

— Jan-Philip Gehrcke博士

使用3点菜单或点击>首选项页面> DevTools>“自动打开弹出窗口的DevTools”

— holly

27

在Chrome 61.0.3163.100中，您现在可以使用以下选项。可以通过进入Chrome开发者工具设置进行访问。在底部。

Web检查器设置

— 康拉德·皮亚西克（Konrad Piascik）
source

3

不幸的是，这不会激活新打开的窗口中的“保留日志”，因此，如果在该窗口中有一个新窗口和一个重定向，则将清除网络日志并在重定向之后开始。

— 13

4

对于那些不想单击链接来查看图像的用户，此设置为“ DevTools”标题下的“自动打开弹出窗口的DevTools”。其他可用设置：“网络”下的“保留日志”；“控制台”下的“导航时保留日志”。

— hlongmore '18

2

这对我有效（Chrome 76），并且在启动弹出窗口的开发人员工具时正在激活“保留日志”。这可能是由我激活了“保留日志”设置激活的吗？

— 文斯·鲍德伦

11

添加/更新链接到 target="_self"
在“网络”标签中选中“导航时保留日志”。
点击链接，并记录您的请求

— 塞巴斯蒂安·洛伯（Sebastien Lorber）
source

10

您可以这样操作：

在通缉链接上设置target =“ any_window_name”。
单击该链接一次，以在新选项卡中将其打开。
在打开的选项卡中，打开开发人员工具。
返回原始页面并再次点击该链接。

结果将在打开开发人员工具的情况下加载到已经准备好的窗口中。

您可以在开发工具中激活“保留日志”选项（请参见Konrad Dzwinel的最佳答案），以捕获该链接上的任何重定向流量。

注意：大多数熟悉链接目标∈{_self，_blank，_parent，_top}的人。但是实际上可以给出任何名称，这将使用该名称打开一个新窗口，并且随后对链接，表单或window.open的任何单击都将在同一窗口中打开。进一步阅读-mdn：window.open，mdn：<a>标签

— 迈克尔·L
source

非常感谢您提供此技巧，我从未想过。正是我需要的。如果阅读此书的人想查看两个页面如何同时运行，则可以跨多个窗口（至少在Chrome中）工作。

— Mark Ormesher

3

如果打开的链接没有重定向，则可以在新选项卡中打开“网络”选项卡，然后刷新该选项卡。

— 奥加德
source

2

F12新标签页打开时快速点击

https://stackoverflow.com/a/13747562/660408

当我监视Google云端硬盘下载响应时对我有用

— iko子
source

0

*免责声明：由HttpWatch开发者发布*

通过在“工具”->“选项”->“记录”中启用自动记录，Windows上的HttpWatch可以记录在打开新的Chrome标签或窗口时生成的网络流量。在新窗口中，单击HttpWatch图标以查看网络跟踪。

该免费版本将提供基本信息，如地址，状态代码和运行时间为每个请求。

*免责声明：由HttpWatch开发者发布*

— HttpWatch支持
source