您的位置:首页 » 分类: 前端工具 & 前端资源 » 文章: Chrome DevTools – 检查资源

Chrome DevTools – 检查资源

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

按框架、域、类型或其他标准来组织管理资源。

TL;DR

  • 使用 Application(应用)面板的Frames(框架)窗格按frame(框架)组织管理资源。
  • 您还可以在Sources(源文件)面板中,通过禁用group by folder(按文件夹分组)选项,来按frame(框架)查看资源。
  • 要按域和文件夹查看资源,请使用Sources(源文件)面板。
  • Network(网络)面板中可以按照名称或其他条件过滤资源。

按frame(框架)组织管理资源

Application(应用)面板的Frames(框架)窗格中,以frame(框架)方式表示您的页面资源。

frames detail

  • 顶层(上面的截图中的top)是主文档。
  • 在下面(例如在上面的屏幕截图中的widget2)是主文档的 subframes(子框架)。 展开其中一个 subframes(子框架) 可以查看源自该 frame(框架) 的资源。
  • subframes(子框架)下面是主文档的图像,脚本和其他资源。
  • 最后是主文档本身。

点击某个资源可以预览它。

用鼠标右键单击可以 Network(网络)面板中 查看它(Reveal in Network panel),并在新标签页中打开(Open Link in New Tab),复制它的URL(Copy Link Address)或保存(Save),如图:

view resource

您还可以在 Sources(源文件)面板中按frame(框架)查看资源, 通过点击导航器中的溢出菜单(More options)并禁用group by folder(按文件夹分组)选项可以停止按文件夹分组资源。

按文件夹分组选项

资源将仅按 frame(框架) 列出。

不按文件夹分组

按域和文件夹组织管理资源

若要按域和文件夹查看资源,请使用Sources(源文件)面板。

sources面板组织管理资源

按名称、 类型或其他标准筛选资源

使用 Network(网络)面板 按照名称,类型和整个范围内其他标准来筛选资源。查看下面的指南了解更多。

说明

翻译自:https://developers.google.com/web/tools/chrome-devtools/manage-data/page-resources

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

发表评论

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