WEB日常开发调试一般首选Chrome谷歌浏览器,多少会有需要取得一部分当前网络资源的链接,数量小的情况下可以右键选择复制链接,不过有时会遇到需要获取当前网页下的所有网络请求对应的URLs,链接一不小心就是成百上千,一个个粘贴复制?这太费手了,找了一下 Chrome 相关资料在开发者工具中(DevTools)隐藏有个开发者的开发模式(devtools-on-devtools)可以用于前端编程控制读取开发者工具中所需数据
Chrome DevTools
如何进入Chrome开发者的开发模式?
1,打开开发者工具:按快捷键 F12 或 Ctrl+Shift+i 或者 ⌘+⌥+i (macOS下)
2,弹出开发者工具窗口:按快捷键 Ctrl+Shift+D 切换工具窗口至浮动弹出状态
3,进入开发者的开发模式:在弹出的开发者工具窗口中,按下快捷键 Ctrl+Shift+i 此时将弹出新的 Chrome DevTools窗口,默认切换在控制台(Console),预置内容显示:Main._createAppUI …字样即成功进入

如何复制Chrome开发模式下Network中的所有链接?
弹出开发者工具窗口状态下,在网络(Network)工具栏中过滤好要提取的资源链接,按下快捷键 Ctrl+Shift+i 进入开发者的开发模式在控制台输入:

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

回车运行,系统粘贴板将复制好当前网络工具栏中显示的所有资源链接
后续有需要频繁使用,可以在Sources创建一个代码片段(Snippet):

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

*一些低版本Chrome浏览器中的Sources下,选中一个代码片段没有运行按钮,请按 Ctrl+Enter或者右键运行(Run)
*提示 Uncaught ReferenceError: UI is not defined 请确认已进入开发者的开发模式或者升级当前浏览器版本
*部分版本控制台会自带有错误提示不影响实际运行,已知78.x,87.x内核正常可用
*参考自 Multiple URLs copy in Sources/Network tab

其它思路
a,导出HAR文件(copy all as HAR)根据需要写解析规则提取里面的链接
b,用支持批量链接复制的抓包软件(Wireshark、fiddler等)抓取所需URL列表
c,修改Chrome加上此功能
都不是很好的解决办法聊胜于无,本文仅做折腾笔记用途

comment-author avatars

Zhys

Cherish the time! Don't waste even nine seconds to remember the past, live in the present and for the future planning.

猜你喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

邮件通知