在“自述文件”页中，单击“ 演示 ”链接。 实时页面将在 Microsoft Edge 中打开。

右键单击演示网页，然后选择“ 检查 ”以打开 DevTools。

DevTools 示例列表

以下演示演示了 DevTools 功能。

下面显示了其中一些示例。

To Do 演示

这个简单的“要办事项”列表网页用于演示各种 DevTools 功能。 它具有文件 .html 、 .js 文件和 .css 文件：

呈现的页面： TODO 应用

源代码： demo-to-do

演示网页（包含辅助功能问题）

此动物收容所演示网页可用于探索各种 DevTools 功能，包括辅助功能测试功能。

在新窗口或选项卡中打开 演示网页，其中包含辅助功能问题 。

右键单击呈现的网页中的任意位置，然后选择“ 检查 ”。 DevTools 将在演示网页旁边打开。

以下文章将引导你完成使用此演示网页：

使用 DevTools 进行辅助功能测试概述 - 长文，其中部分演示了使用各种 DevTools 功能通过“演示网页和辅助功能问题”来执行辅助功能测试。

使用“检查”工具通过将鼠标悬停在网页上来检测辅助功能问题 - 从上述文章各节派生的几篇简短文章之一。

辅助功能测试功能 - DevTools 的辅助功能测试功能列表，以及指向使用“演示网页和辅助功能问题”的多个文章的链接。

源代码存储库

这是源代码存储库及其目录，用于存储此演示网页的文件：

MicrosoftEdge/Demos > devtools-a11y-testing - 包含文件，包括：

index.html - 演示网页，包括将数据发送到 buttons.js JavaScript 文件的页面部分和输入表单。 若要查看呈现的网页，请使用上面的演示网页链接。

buttons.js - 包含演示网页使用的 JavaScript 代码。

styles.css 、 light-theme.css 和 dark-theme.css - 控制演示网页的 CSS 文件。

演示网页中使用的图像文件。

以下文章或文章部分将引导你完成使用此演示网页：

在源工具概述 中使用 调试器的基本方法 。 本文部分简要介绍了使用 源 工具中的 JavaScript 调试器在演示网页中查找 bug 的步骤。 若要修复 bug，请在添加输入字符串之前将其转换为数字。

调试 JavaScript 入门 - 更深入地演练如何使用演示网页和调试器、演示调试器的各种功能以及设置不同类型的断点。

源代码存储库

这是源代码存储库及其目录，用于存储此演示网页的文件：

MicrosoftEdge/Demos > devtools-js-get-started - 包含文件：

README.md - 包含指向呈现的演示网页的链接，以及有关使用演示网页的深入教程文章。

index.html - 具有将数据发送到 JavaScript 文件并显示 JavaScript 结果的输入表单的网页。

get-started.js - 演示网页中的表单使用的 JavaScript 文件。

若要下载 Demos 存储库的单个目录，请执行以下操作：

转到 https://download-directory.github.io/ ，然后粘贴 URL https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do 。

该文件 .zip 位于下载目录中。 将这些网页源文件解压缩到合适的位置。

另请参阅：

在新窗口或选项卡中，转到 MicrosoftEdge/Demos 存储库。

如果未显示绿色的“ 代码 ”按钮，请单击左上角路径“ Microsoft Edge / 演示 ”中的“ 演示 ”，转到存储库的“main”页。

单击“ 代码 ”下拉列表按钮，然后单击 URL https://github.com/MicrosoftEdge/Demos.git 旁边的“ 复制 ”按钮。 例如，可以将 URL 粘贴到 git bash 或Visual Studio Code对话框中。

或者，单击“ 代码 ”下拉列表按钮，然后单击“ 使用 Visual Studio 打开 ”（如果出现）。 提供了 处理程序选择器 项的列表，每个已安装的 Visual Studio 实例一个。 仅当登录时，才会显示此选项。

在“Visual Studio Code”活动栏中，单击“ 源代码管理 ( “) ”按钮，然后单击“ 克隆存储库 ”按钮。

在 “提供存储库 URL ”文本框中，粘贴复制的 URL： https://github.com/MicrosoftEdge/Demos.git ，然后按 Enter 。 此时会打开文件夹选择对话框。

导航到所需路径（如 C:\Users\username\Documents\GitHub 或 Users/username/GitHub ），然后单击“ 选择存储库位置 ”按钮。

此时会显示“ 克隆 git 存储库 ”消息，然后系统会提示你打开克隆的存储库。 单击“ 打开 ”按钮：

如果系统提示 你是否信任... ，请单击“ 是 ”按钮。 或者，单击“ 否 ”按钮并继续执行本演练的大部分部分。

资源管理器 树列出了许多演示，包括 演示操作 。

另请参阅：

在 Microsoft Edge 中，打开一个新选项卡。

右键单击网页，然后选择“ 检查 ”。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。

在 DevTools 的main工具栏上，选择“ 源 ”选项卡。如果该选项卡不可见，请单击“ 更多选项卡 ( ) 按钮。

在左侧 的“源 ”选项卡中，选择“ 文件系统 ”选项卡，该选项卡与 “页面 ”选项卡分组。如果未显示“ 文件系统 ”选项卡，请单击“ 更多选项卡 ( ) 按钮。

单击“ + 将文件夹添加到工作区 ”。 此时会打开文件夹选择对话框。

选择特定文件夹（例如 演示操作）， 或选择 Demos 根文件夹：

在 DevTools 上，系统会提示“DevTools 请求对 (目录) 的完全访问权限”。 单击“ 允许” 按钮：

若要编辑文件，请参阅下一部分中的编辑步骤。

另请参阅：

在 Microsoft Edge 中，打开新选项卡，然后按 Ctrl+O (Windows/Linux) 或 Command+O (macOS) 。 此时会打开文件选择对话框。

从 Demos 存储库的本地副本中选择一个 HTML 文件，例如 C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html 。 文件 .html 在 Microsoft Edge 中打开并呈现。

右键单击网页，然后选择“ 检查 ”。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。

在 DevTools 的main工具栏上，选择“ 源 ”选项卡。如果该选项卡不可见，请单击“ 更多选项卡 ( ) 按钮。

在 DevTools 的左侧，选择“ 页面 ”选项卡，然后选择 HTML 文件，例如 index.html 或 (索引) 。

按 Esc 打开 DevTools 底部的 抽屉 。

在抽屉中，单击“ 更多工具 ( ) 按钮，然后选择“ 更改” 工具。

在 源 工具的中间编辑器窗格中，编辑 .html 文件。 例如，在 demo-to-do/index.html 文件夹中的标题行中 <h1> ， 将“我的任务” 更改为 “我修改的任务 ”：

<h1>📋 My modified tasks</h1>
如果未启用编辑，请单击“ 允许 ”按钮，通过执行上述 “源”工具中的“从文件系统 (工作区打开文件夹) ”选项卡中 的步骤，授予对文件夹的读/写访问权限。
更改显示在抽屉的“更改”工具中，并在“源”工具的“index.html”选项卡中的文件名中添加一个星号：
按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 保存更改。  将从“源”工具的“index.html”选项卡中删除星号。
刷新页面。  更改显示在呈现的网页中;例如，已 修改 的单词将添加到标题中：
从文件资源管理器打开本地 HTML 文件并在浏览器中对其进行编辑
在 Windows 上的文件资源管理器或 macOS 上的 Finder 中，从 Demos 存储库的本地副本中选择一个 HTML 文件，例如 C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html。  文件 .html 在 Microsoft Edge 中打开并呈现。
按照上述部分中的步骤进行操作。
在 Visual Studio Code 中打开演示文件夹
下载或克隆 Demos 存储库后：
在Visual Studio Code的“活动栏”中，单击“资源管理器” () 按钮。  此时会打开 “资源管理器 ”窗格。
在 “资源管理器 ”窗格中，单击“ 打开文件夹” 按钮。  “ 打开文件夹 ”对话框随即打开。  导航到 demo-to-do 演示存储库中克隆的文件夹，选择该文件夹或转到该文件夹，然后单击“ 选择文件夹 ”按钮：
上面显示了克隆 Demos 存储库的存储库位置示例。  克隆demo-to-do的 Demos 存储库的文件夹将在 Visual Studio Code 资源管理器中打开：
或者，可以打开 Demos 存储库的根文件夹，以浏览 “资源管理器 ”窗格中的所有演示文件夹。
另请参阅：
适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展 - 在 Visual Studio Code 中打开本地文件夹并在 Visual Studio Code 中使用 DevTools。
呈现的演示网页和源代码的 URL 模式
Demos 存储库中的大多数自述文件都有一个链接，用于从 GitHub.io 服务器打开呈现 .html 的文件。  有时，GITHUB.COM 有 HTML 源文件的 URL，但需要派生 github.io 服务器 URL 以显示呈现的文件，而不是在 GitHub 目录中显示源代码的代码 .html 列表。
若要从 GitHub.com 处的源代码目录的 URL 转换为 GitHub.io 上呈现的演示网页的 URL，模式如下所示。
假设 GitHub.com 网页源代码的 URL 为：
https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do/
该 GITHUB.COM URL 的关键组件包括：
https://github.com/[org]/[repo]/tree/main/[path]
相比之下，所需的 GitHub.io URL 模式是：
https://[org].github.io/[repo]/[path]
若要填充该 GitHub.io URL 模式，请在此示例中：
[org] 为 MicrosoftEdge。
[存储库] 为 Demos。
[path] 为 demo-to-do。
因此，为呈现的演示网页生成的 GitHub.io 服务器 URL 为：
https://MicrosoftEdge.github.io/Demos/demo-to-do/
这些 URL 不区分大小写。
打开和编辑文件：
使用“工作区” (“文件系统”选项卡) 编辑文件  - 在浏览器中，在 DevTools 的 “源 ”工具中打开本地文件夹。
使用“文件系统”选项卡在“源”工具概述中定义本地工作区。
Visual Studio Code的 Microsoft Edge DevTools 扩展中比较的方法。  汇总并比较了用于编辑网页文件的多个选项。
Microsoft Edge IDE 集成 - 使用 Visual Studio Code 或 Visual Studio（包括 Microsoft Edge DevTools）进行网页应用开发。
下载和克隆：
步骤 5：在安装适用于Visual Studio Code的 DevTools 扩展中克隆演示存储库。
克隆存储库 - GitHub 文档。
运行本地 Web 服务器：
步骤 6：在安装用于Visual Studio Code的 DevTools 扩展中设置 localhost 服务器。