可以从 Microsoft Edge DevTools 中) 的多个工具 (或 面板 中查看构成网页的资源，包括：
网络工具
源工具
应用程序工具
资源是构成网页的文件。 资源示例包括：
CSS 文件
JavaScript 文件
HTML 文件
图像文件
另请参阅：
在 Mozilla.org 学习 Web 开发
开发工具概述
从命令菜单打开资源文件
当知道要检查的网页资源文件的名称时，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文档浏览上下文，例如浏览器选项卡、浏览器窗口或框架。 请参阅 浏览上下文 或