使用 Microsoft Edge DevTools 查看页面资源View page resources with Microsoft Edge DevTools

本指南指导你如何使用 Microsoft Edge DevTools 查看网页的资源。This guide teaches you how to use Microsoft Edge DevTools to view the resources of a web page. 资源是页面为了正确显示而需要的文件。Resources are the files that a page needs in order to display correctly. 资源示例包括 CSS、JavaScript 和 HTML 文件以及图像。Examples of resources include CSS, JavaScript, and HTML files, as well as images.

本指南假定你熟悉 Web 开发和 Microsoft Edge DevTools的基础知识。This guide assumes that you are familiar with the basics of web development and Microsoft Edge DevTools.

打开资源Open resources

当您知道要检查的资源的名称时,"命令菜单"提供了一种**** 快速打开资源的方法。When you know the name of the resource that you want to inspect, the Command Menu provides a fast way of opening the resource.

  1. 选择 Control+P(Windows、Linux)或 Command+P (macOS)。Select Control+P (Windows, Linux) or Command+P (macOS). 打开"打开文件 "对话框。The Open File dialog opens.

    打开文件对话框

  2. 从下拉列表中选择文件,或开始键入文件名,在自动完成框中突出显示正确的文件后 Enter 选择。Choose the file from the dropdown, or start typing the filename and select Enter once the correct file is highlighted in the autocomplete box.

    在打开文件对话框中键入文件名

在"网络"工具中打开资源Open resources in the Network tool

导航 到检查资源的详细信息Navigate to Inspect the details of a resource.

检查网络工具中的资源

显示来自其他面板的网络工具中的资源Reveal resources in the Network tool from other panels

下面的 " 浏览资源"部分显示如何查看来自 DevTools UI 各个部分的资源。The Browse resources section below shows you how to view resources from various parts of the DevTools UI. 如果你曾经想要在网络工具中检查资源,**** 请将鼠标悬停在资源上,打开上下文菜单 \ (右键单击) ,然后选择"网络"面板中的"展示"。If you ever want to inspect a resource in the Network tool, hover on the resource, open the contextual menu (right-click), and choose Reveal in Network panel.

网络面板中的展示

浏览资源Browse resources

浏览"网络"面板中的资源Browse resources in the Network panel

导航到 记录网络Navigate to Log network activity.

网络日志中的页面资源

按目录浏览Browse by directory

查看按目录组织的网页的资源:To view the resources of a webpage organized by directory:

  1. 打开 DevTools。Open DevTools.

  2. 选择 "源"工具,然后在左上角的****"导航器"窗格中,选择"页面" 选项卡。Choose the Sources tool, and then in the Navigator pane in the upper left, choose the Page tab.

  3. Choose the More options (...) button to the right of the Page tab, and then choose Group by folder.Choose the More options (...) button to the right of the Page tab, and then choose Group by folder.

    源工具的导航器窗格中的页面选项卡

    下面细目了上图中的不明显项。Here is a breakdown of the non-obvious items in the previous figure.

    页面项Page item 描述Description
    top 主文档 浏览上下文The main document browsing context.
    airhorner.com 域。The domain. 嵌套在它下的所有资源都来自该域。All resources nested under it come from that domain. 例如,文件的完整 URL comlink.global.j 可能是 https://airhorner.com/scripts/comlink.global.jsFor example, the full URL of the comlink.global.j file is probably https://airhorner.com/scripts/comlink.global.js.
    scripts 目录。A directory.
    (index) 主 HTML 文档。The main HTML document.
    sw.js 服务工作线程运行时上下文。A service worker runtime context.
  4. 选择一个资源,在编辑器中查看 Choose a resource to view it in the Editor.

    在编辑器中查看文件

按文件名浏览Browse by filename

默认情况下," 页面" 选项卡按目录对资源进行分组。By default, the Page tab groups resources by directory. 若要将每个域的资源显示为一个简单列表,而不是按目录分组:To display the resources for each domain as a flat list, instead of grouping them by directory:

  1. 导航到 "源" 工具。Navigate to the Sources tool.

  2. 在左侧 导航器 (窗格中,) " 页面" 选项卡。In the Navigator pane (on the left), choose the Page tab.

  3. 选择 "更多选项 ... ",然后清除"按文件夹 分组"旁边的选中标记Choose More options ... and then clear the checkmark next to Group by folder.

    按文件夹分组选项

    资源按文件类型进行组织。Resources are organized by file type. 在每个文件类型内,资源按字母顺序进行组织。Within each file type, the resources are organized alphabetically.

    清除按文件夹分组复选框后的页面选项卡

按文件类型浏览Browse by file type

根据资源文件类型将资源分组在一起:To group resources together based on their file type:

  1. 选择" 应用程序" 选项卡。 应用程序 工具 将打开。Choose the Application tab. The Application tool opens. 默认情况下, 清单窗格 通常先打开。By default the Manifest pane usually opens first.

    应用程序工具

  2. 向下滚动到"框架 " 窗格。Scroll down to the Frames pane.

    框架窗格

  3. 展开您感兴趣的部分。Expand the sections in which you are interested.

  4. 选择一个资源进行查看。Choose a resource to view it.

    在应用程序面板中查看资源

在"网络"面板中按类型浏览文件Browse files by type in the Network panel

导航到"按资源类型筛选"。Navigate to Filter by resource type.

在网络日志中筛选 CSS

联系 Microsoft Edge DevTools 团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
原始页面位于此处,由 Kayce Basques\(Chrome DevTools & Lighthouse 的技术作家\)撰写。The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.