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

Posted 2023-02-27

【中文标题】Chrome 开发工具：如何跟踪网络以找到打开新标签的链接？

【英文标题】：Chrome Dev Tools: How to trace network for a link that opens a new tab?

【发布时间】：2013-04-19 02:16:35

【问题描述】：

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

我目前的解决方案是转移到没有这个问题的 FireFox 和 HttpFox。我想知道 Chrome 的所有开发人员是如何管理的，这听起来很基本（当然我已经搜索过答案，没有发现任何有用的东西）。

【问题讨论】：

由于这个问题引起了相当多的关注，我开始怀疑是否可以提供更好的解决方案。让所有链接在同一个选项卡中打开是否有用？

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

如果您希望将此作为一项功能，请随时为这个 Chromium 错误加注星标：code.google.com/p/chromium/issues/detail?id=410958

我想念 Firefox，因为直到今天，除了使用外部软件外，还没有一个好的方法来使用它。自动弹出窗口很傻。

【参考方案1】：

在 Chrome 85 中（在 Chrome 90 中仍然有效）“Auto-open DevTools for popups”隐藏在一个新位置

DevTools (F12)/Settings (F1, Ctrl + ?)/Preferences/Global（在列表末尾）

现在它保留了“保留日志”设置。

【讨论】：

完美，谢谢！

【参考方案2】：

我会让新标签打开，按 F12 并刷新标签，以便它登录到 devtools 窗口

【讨论】：

如果“有趣”的事情已经发生，这也无济于事。例如身份验证、会话创建等

【参考方案3】：

查看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;
;

【讨论】：

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

这很有趣，特别是如果您添加过滤器type:URL_REQUEST，但它似乎不包含与“网络”选项卡相同的信息。例如，它似乎删除了请求和响应的 cookie 数据。

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

我希望我能投票两次。我已经为 chrome 制作了一个内容脚本，它可以在热键上执行此操作，它确实节省了我的生命。

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

【参考方案4】：

在 Chrome 61.0.3163.100 中，您现在可以使用以下选项。 通过转到 Chrome 开发工具设置来访问它。它在底部。

【讨论】：

不幸的是，这并没有在新打开的窗口中激活“保留日志”，因此如果您在所述窗口中获得一个新窗口和重定向，网络日志将被清除并在重定向后开始。

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

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

【参考方案5】：

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

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

free version 将提供基本信息，例如每个请求的 URL、状态代码和经过的时间。

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

【参考方案6】：

phsource评论中提到的feature request已经实现。

在最近的版本中（从 Chrome 50 开始），您可以进入开发者工具设置菜单（打开开发者工具，然后使用 3 点菜单或点击 F1）并选中说“为弹出窗口自动打开 DevTools”。

【讨论】：

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

你应该更新你的答案，因为 chrome 稳定版目前是 55

叹息，但是新窗口没有激活。 Chrome 工程师怎么了？

将此与***.com/a/29029881/145400 结合使用（对“Chrome 开发工具是否可以在窗口关闭后保持打开状态？”的一个很好的回答）！

使用 3 点菜单或点击 > 首选项页面 > DevTools > “自动打开 DevTools for popups”

【参考方案7】：

新标签打开时快速按F12

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

当我监控 Google Drive 下载响应时对我有用

【参考方案8】：

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

【参考方案9】：

你可以这样做：

在想要的链接上设置 target="any_window_name"。 单击该链接一次，以在新选项卡中打开它。 在打开的选项卡中，打开开发者工具。

返回原始页面并再次点击该链接。

结果将加载到已经准备好的窗口中，并打开开发者工具。

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

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

【讨论】：

非常感谢您的提示，我从来没有想到过。正是我需要的。可以跨多个窗口工作（至少在 Chrome 中），如果有人阅读这篇文章想看看两个页面如何同时运行。

【参考方案10】：

如果打开的链接没有重定向，您可以在新标签中打开网络标签，然后刷新标签。