本指南将向您介绍如何使用 Chrome 开发者工具查看网页资源。资源是页面正确显示所需的文件。资源的示例包括 CSS、JavaScript、HTML 文件以及图片
本指南假定您熟悉 Web 开发和 Chrome 开发者工具的基础知识。
打开资源
如果您知道要检查的资源的名称，可以使用命令菜单快速打开资源。
按 Ctrl+P 或 Command+P (Mac)。此时将打开 Open File 对话框。
图 1. Open File 对话框
从下拉列表中选择该文件，或开始输入文件名，然后在自动补全框中突出显示正确的文件后，按 Enter。
图 2. 在打开文件对话框中输入文件名
在“网络”面板中打开资源
请参阅检查资源的详细信息。
图 3. 在网络面板中检查资源
在其他面板中显示“网络”面板中的资源
下面的浏览资源部分介绍了如何从开发者工具界面的各个部分查看资源。如果您想要在网络面板中检查某个资源，请右键点击该资源，然后选择在“网络”面板中显示。
图 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. 停用按文件夹分组后的 Page 窗格
按文件类型浏览
如需根据文件类型将资源分组，请执行以下操作：
点击 Application 标签页。系统会打开 Application（应用）面板。默认情况下，系统通常会先打开清单窗格。
图 10. Application 面板
向下滚动到 Frames 窗格。
图 11. Frames 窗格
展开您感兴趣的部分。
点击资源即可查看。
图 11. 在 Application 面板中查看资源
在“网络”面板中按类型浏览文件
请参阅按资源类型过滤。
图 12. 在网络日志中过滤 CSS