本指南介绍如何使用 Chrome 开发者工具查看网页的资源。资源是指网页正确显示所需的文件。资源的示例包括 CSS、JavaScript 和 HTML 文件以及图片。
本指南假定您熟悉网页开发和 Chrome 开发者工具的基础知识。
打开资源
如果您知道要检查的资源的名称，可以使用命令菜单快速打开资源。
按 Ctrl+P 或 Command+P (Mac)。Open File 对话框随即会打开。
图 1. Open File 对话框
从下拉菜单中选择该文件，或开始输入文件名，然后在自动补全框中突出显示正确的文件后，按 Enter。
图 2. 在打开文件对话框中输入文件名
在“网络”面板中打开资源
请参阅检查资源的详细信息。
图 3. 在 Network 面板中检查资源
从“Network”面板中显示其他面板的资源
下面的浏览资源部分介绍了如何查看开发者工具界面各个部分的资源。如果您想在 Network 面板中检查资源，请右键点击该资源，然后选择 Reveal in Network panel。
图 4. 在“网络”面板中显示选项
浏览资源
在“网络”面板中浏览资源
请参阅记录网络活动。
图 5. 网络日志中的网页资源
按目录浏览
要查看按目录整理的网页资源，请执行以下操作：
- 点击来源标签页以打开来源面板。
点击网页标签页以显示该网页的资源。系统随即会打开 Page 窗格。
图 6. Page 窗格
下面是图 6 中不明显项目的细分：
- top 是主文档的浏览上下文。
- airhorner.com 表示网域。其下嵌套的所有资源都来自该网域。例如，comlink.global.js 文件的完整网址可能是
https://airhorner.com/scripts/comlink.global.js。 - scripts 是一个目录。
- (index) 是主 HTML 文档。
- iu3 是另一个浏览上下文。此上下文可能是由嵌入主文档 HTML 中的
<iframe>元素创建的。 - sw.js 是 Service Worker 执行上下文。
点击某项资源即可在编辑器中查看该资源。
图 7. 在编辑器中查看文件
按文件名浏览
默认情况下，Page 窗格按目录对资源进行分组。如需停用此分组并以扁平列表的形式查看每个网域的资源，请执行以下操作：
- 打开 Page 窗格。请参阅按目录浏览。
点击更多选项
并停用按文件夹分组。
图 8. Group By Folder 选项
资源是按文件类型整理的。每种文件类型中的资源均按字母顺序排列。
图 9. 停用 Group By Folder 后的 Page 窗格
按文件类型浏览
如需根据文件类型将资源组合在一起，请执行以下操作：
点击应用标签页。系统随即会打开 Application 面板。默认情况下，系统通常会先打开 Manifest 窗格。
图 10. Application 面板
向下滚动到 Frames 窗格。
图 11. Frames 窗格
展开您感兴趣的部分。
点击资源即可查看。
图 11. 在 Application 面板中查看资源
在“网络”面板中按类型浏览文件
请参阅按资源类型过滤。
图 12. 在网络日志中过滤 CSS