在源/网络选项卡中复制多个 URL

Question

是否可以在 Chrome Dev Tools 的 Sources 或 Network 选项卡中提取多个资源的 URL？
当我想获取 single 资源的 URL 时，我可以使用上下文菜单功能 复制链接地址

我可以从网络切换到资源选项卡，反之亦然，但是如果我需要一次获取 多个 资源的 URL 怎么办？如果结果集包含 200-300 个资源，手动复制它们非常麻烦。

到目前为止我尝试了什么：

1. 要从源选项卡复制整个文件夹，但是从this answer我发现现在不可能。

2. 按照

   Console reference

   中的指定使用$(selector)，以
   的形式

   $('img')
   

   以防我们需要获取图像 URL。

   这种方法的复杂性在于，通常很难在包含数百个图像的页面上区分目标图像，此外，同一图像的多个版本（视图、预览、小尺寸图标等）即。 匹配 标签内的元素与所需的资源并不像看起来那么容易。也并非所有文件类型都有专用标签（如

   img

   的情况）。

也许我应该使用带有一些修饰符的

src

标签？还有其他建议吗？

Answer 1

0. 确保

   Network

   面板处于活动状态
1. 将菜单中的 devtools

   Dock side

   切换到分离（浮动）窗口

下次您可以按 CtrlShiftD 切换停靠。

---

2. 在现在分离的devtools中按CtrlShifti或⌘⌥i在MacOS上，
   这将在新窗口中打开devtools-on-devtools

---

3. 在此新窗口中运行以下代码：

   copy(UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes.map(n => n.request().url()).join('\n'))

   它将所有匹配当前过滤器的请求的 URL 复制到剪贴板。

---

提示：将代码保存为 Snippet 并通过命令选项板在 devtools-on-devtools 窗口中运行它，CtrlP 或 ⌘P 然后输入代码片段的名称。

在旧版 Chrome 中，代码不同：

• copy(UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes.map(n => n._request._url).join('\n'))

• copy(UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes.map(n => n.request().urlInternal).join('\n'))

Answer 2

我发现上面的方法太笨拙了，使用fiddler更容易：

• open fiddler（可能安装）
• 筛选您感兴趣的域名
• 清除屏幕
• 刷新网页
• 选择fiddler输出
• 右键单击并选择仅复制 URL 的

Answer 3

基于@wOxxOm，这对我有用：

var nodes = UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes,
    urls = [];
nodes.forEach(function() {
    var req = arguments[0]._request;
    if (req !== undefined) {
        urls.push(req.url());
    }
});

Answer 4

选择和简单复制 (Ctrl+C) 对我有用。 我用鼠标在 Url 列中选择 URL。 然后我使用上下文菜单将列表复制到剪贴板。 然后我可以将剪贴板内容粘贴到 Excel 并获取 URL 列表。它虽然添加了一些空行。

Answer 5

基于@wOxxOm 和@onassar。这适用于 2023 年 3 月。

window.nodes = UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes;
window.urls = [];
window.nodes.forEach(function() {
    let req_ = arguments[0].request();
    if (req_ !== undefined /*&& req_.statusCode === 404*/) {
        window.urls.push(req_.url());
    }
});
copy(urls.join('\n'));  //copy to clipboard

Answer 6

抱歉回复而不是评论（我无法评论）...

@xexsus 或任何人...

您最初是如何克服

Uncaught ReferenceError: UI is not defined

的？