查看构成网页的资源文件

项目
10/31/2024

可以从 Microsoft Edge DevTools 中) 的多个工具 (或面板中查看构成网页的资源，包括：

网络工具
源工具
应用程序工具

资源是构成网页的文件。资源示例包括：

CSS 文件
JavaScript 文件
HTML 文件
图像文件

另请参阅：

当知道要检查的网页资源文件的名称时，DevTools 中的 命令菜单 提供了一种查找和打开该资源的快速方法。

在新窗口或选项卡中，转到网页，例如辅助功能测试演示。 (该网页的源文件位于 MicrosoftEdge/Demos > devtools-a11y-testing.)
要打开 DevTools，请右击网页，然后选择“检查”。或者按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。
当 DevTools 具有焦点时，按 Ctrl+P (Windows、Linux) 或 Command+P (macOS) 。或者，在 DevTools 中单击“自定义和控制 DevTools () 按钮，然后选择“ 打开文件”。命令菜单随即打开，其中显示“ 打开文件” 列表：
如果出现大于 (>) 提示，请按 Backspace 进入 “打开文件” 提示。
开始键入文件名，然后在自动完成框中突出显示正确的文件时按 Enter ，或从下拉列表中选择文件：

在网络工具中浏览资源文件

在网络工具中，可以检查构成当前网页的资源文件，例如 .html、 .css、 .js和图像文件。若要了解如何获取特定资源的详细信息，请参阅检查网络活动中的检查资源的详细信息。

在新窗口或选项卡中，转到网页，例如 “检查网络活动演示”。 (该网页的源文件位于 MicrosoftEdge/Demos > network-tutorial.)
要打开 DevTools，请右击网页，然后选择“检查”。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。
在 DevTools 的 “活动栏”上，选择“ 网络 ”选项卡。如果该选项卡不可见，请单击“ 更多工具 ” () 按钮。
确保选中左上角的 “记录网络日志 ”按钮， (红色) 。
刷新页面。默认情况下，“ 所有筛选器”按钮处于选中状态，因此所有网页的资源文件都列在 “网络 ”工具中，每个资源文件一行：
选择一个资源进行查看。例如，选择要 network-tutorial 显示 index.html的路径：

若要详细了解如何显示页面资源生成的网络活动，请参阅检查网络活动一文中的日志 网络活动。

在网络工具中筛选按文件类型浏览资源文件

在网络工具中，查看构成当前网页的资源文件列表时，可以筛选要列出的资源类型，例如仅显示 .css 或 .js 文件。

例如，若要仅显示 CSS 文件，请执行：

在新窗口或选项卡中，转到网页，例如 “检查网络活动演示”。 (该网页的源文件位于 MicrosoftEdge/Demos > network-tutorial.)
要打开 DevTools，请右击网页，然后选择“检查”。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。
在 DevTools 的 “活动栏”上，选择“ 网络 ”选项卡。如果该选项卡不可见，请单击“ 更多工具 ” () 按钮。
刷新页面。默认情况下，“ 所有筛选器”按钮处于选中状态，因此所有网页的资源文件都会在 “网络 ”工具中列出。
单击“ CSS ”筛选并仅显示 CSS 文件。仅列出 main.css 文件：

有关详细信息，请参阅检查网络活动中的按资源类型进行筛选。

从其他工具在网络工具中显示资源文件

在列出网页的资源文件的各种工具中，若要检查网络工具中的资源文件，请右键单击该资源文件，然后选择“ 在网络面板中显示”。在网络工具处于打开状态时，可能需要先刷新网页。

例如，若要从“源”工具中的“页面”选项卡的资源列表转到“网络”工具，请执行以下操作：

在新窗口或选项卡中，转到网页，例如 “检查网络活动演示”。 (该网页的源文件位于 MicrosoftEdge/Demos > network-tutorial.)
要打开 DevTools，请右击网页，然后选择“检查”。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。
在 DevTools 的 “活动栏”上，选择“ 网络 ”选项卡。如果该选项卡不可见，请单击“ 更多工具 () 按钮。
按 Ctrl+R 刷新页面。构成网页的接收资源文件现在在“ 网络 ”选项卡中添加为行。 network-tutorial/ 文件夹行表示 HTML 页 - 在本例中，index.html。
在 DevTools 的 “活动栏”上，单击“ 源 ”选项卡。
在左上角的“ 页面 ”选项卡中，右键单击资源文件，然后选择“ 在网络面板中显示”：

如果未列出 “在网络面板中显示 ”菜单项，请转到 “网络 ”工具，确保选中左上角的“ 记录网络日志 ”按钮 (红色) ，然后刷新页面。

在源工具的“页面”选项卡中按文件夹浏览资源文件

可以使用源工具查看按目录组织的网页资源文件，如下所示：

要打开 DevTools，请右击网页，然后选择“检查”。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。
在 DevTools 的 “活动栏”上，选择“ 源 ”选项卡。如果该选项卡不可见，请单击“ 更多工具 () 按钮。
在左上角的“ 导航器 ”窗格中，选择“ 页面 ”选项卡。

默认情况下，资源文件按文件夹分组。如果资源全部按文件名的字母顺序列出，请单击“页面”选项卡右侧的“更多选项 () 按钮，然后选择“按文件夹分组”：

源工具的“页面”选项卡中按文件夹分组的网页的资源文件

“ 页面 ”选项卡包含各种节点类型，包括：

页面项	描述
`top`	main文档浏览上下文，例如浏览器选项卡、浏览器窗口或框架。请参阅浏览上下文或 <iframe>：内联框架元素。
`microsoftedge.github.io`	域。嵌套在它下的所有资源都来自该域。例如，文件的完整 URL `buttons.js` 为 https://microsoftedge.github.io/Demos/devtools-a11y-testing/buttons.js。
`Demos/devtools-a11y-testing`, `css`, `photos`	目录。
`devtools-a11y-testing/`	main HTML 文档。
`buttons.js`	用于处理页面上按钮按下操作的脚本。

选择一个资源文件，在源工具的编辑器中查看该文件：

在源工具的“页面”选项卡中浏览按文件名排序的资源文件

默认情况下，“源”工具中的“页面”选项卡按文件夹对资源文件进行分组。改为在单个按字母顺序排列的列表中显示每个域的所有资源文件：

在新窗口或选项卡中，转到网页，例如辅助功能测试演示。 (该网页的源文件位于 MicrosoftEdge/Demos > devtools-a11y-testing.)
要打开 DevTools，请右击网页，然后选择“检查”。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。
在 DevTools 的 “活动栏”上，选择“ 源 ”选项卡。如果该选项卡不可见，请单击“ 更多工具 () 按钮。
在左上角的“ 导航器 ”窗格中，选择“ 页面 ”选项卡。
单击“ 更多选项 ” () ，然后清除“ 按文件夹分组” 选项：

每个域 (（如 Top) ）的所有资源文件都分组在一个按字母顺序排列的列表中：

在应用程序工具的框架树中按文件类型浏览资源文件

查看按文件类型分组的网页资源的一种方法是使用应用程序工具中的框架树：

要打开 DevTools，请右击网页，然后选择“检查”。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。
在 DevTools 的 “活动栏”上，选择“ 应用程序 ”选项卡。如果该选项卡不可见，请单击“ 更多工具 ” () 按钮。

应用程序工具随即打开，默认情况下首先显示“清单”窗格：
向下滚动到“ 框架 ”窗格，然后展开你感兴趣的文件夹：
选择一个资源以在 应用程序 工具中查看它：