查看构成网页的资源文件

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

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

另请参阅：

当知道要检查的网页资源文件的名称时，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 的 “活动栏”上，选择“ 源 ”选项卡。如果该选项卡不可见，请单击“ 更多工具 () 按钮。

在左上角的“ 导航器 ”窗格中，选择“ 页面 ”选项卡。

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

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

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

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

在新窗口或选项卡中，转到网页，例如 辅助功能测试演示。 (该网页的源文件位于 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 的 “活动栏”上，选择“ 应用程序 ”选项卡。如果该选项卡不可见，请单击“ 更多工具 ” () 按钮。

应用程序工具随即打开，默认情况下首先显示“清单”窗格：

向下滚动到“ 框架 ”窗格，然后展开你感兴趣的文件夹：

选择一个资源以在 应用程序 工具中查看它：

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由 Kayce Basques (Technical Writer、Chrome DevTools & Lighthouse) 创作。

此作品根据 Creative Commons 署名 4.0 国际许可获得许可。