查看构成网页的资源文件

查看构成网页的资源文件

Microsoft Edge DevTools提供了多种工具和面板，可以帮助开发者查看和检查网页的资源文件。本文将详细介绍如何通过网络工具、源工具和应用程序工具来浏览和检查CSS、JavaScript、HTML和图像文件等资源，帮助开发者更好地理解和优化网页性能。

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

• 网络工具
• 源工具
• 应用程序工具
  资源是构成网页的文件。 资源示例包括：
• CSS 文件
• JavaScript 文件
• HTML 文件
• 图像文件
  另请参阅：
• 在 Mozilla.org 学习 Web 开发
• 开发工具概述

从命令菜单打开资源文件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 要打开 DevTools，请右击网页，然后选择“检查”。 或者，按Ctrl+Shift+I(Windows、Linux) 或Command+Option+I(macOS) 。 DevTools 随即打开。
2. 在 DevTools 的“活动栏”上，选择“源”选项卡。如果该选项卡不可见，请单击“更多工具(
   ) 按钮。
3. 在左上角的“导航器”窗格中，选择“页面”选项卡。
4. 默认情况下，资源文件按文件夹分组。 如果资源全部按文件名的字母顺序列出，请单击“页面”选项卡右侧的“更多选项(
   ) 按钮，然后选择“按文件夹分组”：
   
   “页面”选项卡包含各种节点类型，包括：