ChatGPT解决这个技术问题 Extra ChatGPT

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

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

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

由于这个问题引起了很多关注,我开始怀疑我是否可以提供更好的解决方案。让所有链接在同一个选项卡中打开可以解决问题吗?
@KonradDzwinel 这对我来说是一次性的任务,我继续前进,所以我不能告诉你。如果您愿意尝试写一个答案,我会很高兴接受它。
如果您希望将此作为一项功能,请随时为这个 Chromium 错误加注星标:code.google.com/p/chromium/issues/detail?id=410958
我想念 Firefox,因为直到今天,除了使用外部软件外,还没有一个好的方法来使用它。自动弹出窗口很愚蠢。

K
Konrad Dzwinel

查看 chrome://net-internals/#events(或最新版 Chrome 中的 chrome://net-export)详细了解浏览器中发生的所有网络事件。

根据您的具体问题,其他可能的解决方案可能是在“网络”选项卡上启用“保留日志”:

https://i.stack.imgur.com/rabex.png

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

[].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 保存 netlogs 和外部弹射器 netlog_viewer 来查看它们。”,但 chrome://net-export 效果很好。
佚名

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

在最近的版本中(从 Chrome 50 开始),您可以转到“开发者工具设置”菜单(打开“开发者工具”,然后使用 3 点菜单或按 F1)并选中“自动打开 DevTools for popups”框。


工作正常,只是打开窗口后立即启用“保留日志”有点棘手。
您应该更新您的答案,因为 chrome 稳定版目前是 55
叹息,但是新窗口没有激活 。 Chrome 工程师有什么问题?
首先检查从父级保留日志。然后打开弹窗。
对于 chrome 90,单击设置图标(或按 F1),然后您会在全局部分下找到 Auto-open DevTools for popups。确保您已检查 Preserve log(请参阅 stackoverflow.com/a/16344250/9972417
K
Konrad Piascik

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

https://i.stack.imgur.com/qCfsF.png


不幸的是,这并没有在新打开的窗口中激活“保留日志”,因此如果您在所述窗口中获得新窗口和重定向,网络日志将被清除并在重定向后开始。
对于那些不想单击链接查看图像的人,该设置是“自动打开用于弹出窗口的 DevTools”,位于“DevTools”标题下。其他可用设置:“网络”下的“保留日志”; “控制台”下的“在导航时保留日志”。
这对我有用(Chrome 76),它在启动弹出窗口的开发人员工具时激活“保留日志”。这可能是由我激活保留日志设置来激活的?
T
Tom

在 Chrome 85 中(在 Chrome 100 中仍然有效)“Auto-open DevTools for popups”隐藏在一个新位置

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

https://i.stack.imgur.com/NdKhX.png

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


M
Michael L.

你可以这样做:

在想要的链接上设置 target="any_window_name"。单击该链接一次,以在新选项卡中打开它。在打开的选项卡中,打开开发人员工具。返回原始页面并再次点击该链接。结果将加载到已经准备好的窗口中,并打开开发者工具。您可以在开发工具中激活“保留日志”选项(参见 Konrad Dzwinel 的优秀答案)以捕获该链接上的任何重定向流量。注意:大多数人都熟悉链接目标 ∈ { _self,_blank,_parent,_top }。但实际上可以给出任何名称,这将打开一个具有该名称的新窗口,并且随后单击链接、表单或具有相同目标值的 window.open 将在同一窗口中打开。进一步阅读 - mdn : window.open , mdn : 标签


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

添加/更新指向 target="_self" 的链接

在“网络”选项卡中选中“导航时保留日志”。

单击链接并记录您的请求


效果很好,谢谢!!这里唯一真正简单的解决方案,不是特殊配置,并且可以正常工作。只是为了让其他人更清楚,这里有以下步骤: 1. 复制链接(打开新选项卡或窗口的链接) 2. 转到新选项卡 3. 打开开发工具(右键单击 + 检查) 4. 转到到网络选项卡(这将开始在这个新选项卡上记录网络流量 5. 粘贴 URL 并添加 ?target="_self" 6. 单击 Enter
o
orgads

如果打开的链接没有重定向,您可以在新选项卡中打开网络选项卡,然后刷新选项卡。


H
HttpWatchSupport

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

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

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

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