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

ldxq2e6h 于 2023-01-10 发布在 Go

关注(0)|答案(4)|浏览(371)

是否可以在Chrome开发工具的源或网络选项卡中提取多个资源的URL？
当我想获得一个单一资源的URL时，我可以使用上下文菜单功能 * 复制链接地址 *

我可以从网络切换到源选项卡，反之亦然，但如果我需要一次获得多个资源的URL，该怎么办？如果结果集包含200 - 300个资源，手动复制它们会非常麻烦。
目前为止我尝试的方法是：
1.从源选项卡复制整个文件夹，但从这个答案我发现这是不可能的。
1.要使用Console reference中指定的$(selector)，请使用

$('img')

以防我们需要获取图像URL。
这种方法的复杂性在于，通常很难在具有数百个目标图像的页面上区分目标图像，而且同一图像有多个版本（视图、预览、小尺寸图标等）即，将标签内的元素与所需资源匹配不是那么容易的，看起来是这样的。而且并不是所有的文件类型都有专用的标签（就像img的情况一样）。
也许我应该使用src标签加上一些修饰语？还有其他建议吗？

google-chrome

来源：https://stackoverflow.com/questions/41200450/multiple-urls-copy-in-sources-network-tab

4条答案

按热度按时间

vqlkdk9b1#

1.确保Network面板处于活动状态
1.切换菜单中的devtools Dock side到分离的（浮动）窗口

下次可以按CtrlShiftD切换对接。
1.在现在分离的devtools中按CtrlShifti或i（在MacOS上），
这将在新窗口中打开devtools-on-devtools
1.在此新窗口中运行以下代码：
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'))

赞(0）回复(0）举报 2023-01-10

yquaqz182#

我发现上面的方法太笨重了，它的方式更容易使用提琴手：

开放式小提琴（可能安装）
过滤您感兴趣的域名
清除屏幕
刷新网页
选择小提琴输出
右键单击并选择仅复制URL

赞(0）回复(0）举报 2023-01-10

b1uwtaje3#

基于@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());
    }
});

赞(0）回复(0）举报 2023-01-10

gudnpqoy4#

选择和简单的复制（Ctrl+C）对我很有效。我用鼠标在URL列中选择URL。然后我使用上下文菜单将列表复制到剪贴板。剪贴板内容然后我可以粘贴到Excel并获得URL列表。尽管它添加了一些空行。

赞(0）回复(0）举报 2023-01-10