使用 Demos 存储库了解如何使用 Microsoft Edge 开发网页和 Web 应用。 可通过多种方式查看、下载和修改这些演示网页，包括：
- Microsoft Edge 中的 DevTools。
- Visual Studio Code，具有可选的 DevTools。
- Visual Studio，具有可选的 DevTools。
在 Microsoft Edge 的 DevTools 中查看呈现的演示网页的源代码：
在“自述文件”页中，单击“ 演示 ”链接。 实时页面将在 Microsoft Edge 中打开。
右键单击演示网页，然后选择“ 检查 ”以打开 DevTools。
DevTools 示例列表
以下演示演示了 DevTools 功能。
下面显示了其中一些示例。
To Do 演示
这个简单的“要办事项”列表网页用于演示各种 DevTools 功能。 它具有文件 .html 、 .js 文件和 .css 文件：
呈现的页面： TODO 应用
源代码： demo-to-do
演示网页（包含辅助功能问题）
此动物收容所演示网页可用于探索各种 DevTools 功能，包括辅助功能测试功能。
在新窗口或选项卡中打开 演示网页，其中包含辅助功能问题 。
右键单击呈现的网页中的任意位置，然后选择“ 检查”。 DevTools 将在演示网页旁边打开。
文章
以下文章将引导你完成使用此演示网页：
使用“检查”工具通过将鼠标悬停在网页上来检测辅助功能问题 - 从上述文章各节派生的几篇简短文章之一。
辅助功能测试功能 - DevTools 的辅助功能测试功能列表，以及指向使用“演示网页和辅助功能问题”的多个文章的链接。
源代码存储库
这是源代码存储库及其目录，用于存储此演示网页的文件：
MicrosoftEdge/Demos > devtools-a11y-testing - 包含文件，包括：
index.html- 演示网页，包括将数据发送到buttons.jsJavaScript 文件的页面部分和输入表单。 若要查看呈现的网页，请使用上面的演示网页链接。buttons.js- 包含演示网页使用的 JavaScript 代码。styles.css、light-theme.css和dark-theme.css- 控制演示网页的 CSS 文件。演示网页中使用的图像文件。
演示网页：使用 DevTools 调试 JavaScript
此演示网页对于探索 源 工具（尤其是 JavaScript 调试器）非常有用。
在新窗口或选项卡中打开演示网页 “开始使用 DevTools 调试 JavaScript ”。
右键单击呈现的网页中的任意位置，然后选择“ 检查”。 DevTools 将在演示网页旁边打开。
文章
以下文章或文章部分将引导你完成使用此演示网页：
在源工具概述中使用调试器的基本方法。 本文部分简要介绍了使用 源 工具中的 JavaScript 调试器在演示网页中查找 bug 的步骤。 若要修复 bug，请在添加输入字符串之前将其转换为数字。
调试 JavaScript 入门 - 更深入地演练如何使用演示网页和调试器、演示调试器的各种功能以及设置不同类型的断点。
源代码存储库
这是源代码存储库及其目录，用于存储此演示网页的文件：
MicrosoftEdge/Demos > devtools-js-get-started - 包含文件：
README.md- 包含指向呈现的演示网页的链接，以及有关使用演示网页的深入教程文章。index.html- 具有向 JavaScript 文件发送数据并显示 JavaScript 结果的输入表单的网页。get-started.js- 演示网页中的表单使用的 JavaScript 文件。
将 Edge 演示存储库克隆到驱动器
Microsoft Edge/Demos 存储库可用于遵循各种 DevTools 文档。 可以克隆存储库，在克隆的存储库的文件夹中启动 localhost Web 服务器，然后直接在 DevTools 或编辑器（如 VS Code）中编辑演示文件。
建议在下载存储库时克隆存储库，以便可以拉取存储库的更新并完全参与存储库。
将 MicrosoftEdge/Demos 存储库克隆到本地驱动器：
在命令提示符下，输入
git以检查是否安装了 git。如果尚未完成， 请下载 并安装 git。
在新窗口或选项卡中转到 MicrosoftEdge/Demos 。
单击“ 代码 ”下拉按钮，然后单击“ 将 URL 复制到剪贴板 ”按钮。
URL 将复制到剪贴板：
https://github.com/MicrosoftEdge/Demos.git或者，如果已安装 GitHub Desktop，请单击“ 使用 GitHub Desktop 打开 ”以克隆存储库，并跳过下面的命令提示符步骤。
打开命令提示符，例如 git bash。
将存储库克隆到本地驱动器，输入从 GitHub 存储库复制的 URL 字符串。 如果使用命令提示符：
# example location where the repo directory will be added: cd ~/GitHub cd c:/users/localAccount/GitHub/ # alt format git clone https://github.com/MicrosoftEdge/Demos.git
有关克隆存储库的详细信息，请参阅：
- 克隆存储库 - GitHub 文档。
继续下一部分。
使用 VS Code 将 Edge 演示存储库克隆到驱动器
将 MicrosoftEdge/Demos 存储库克隆到本地驱动器：
在新窗口或选项卡中转到 MicrosoftEdge/Demos 。
单击“ 代码 ”下拉列表按钮，然后单击“ 使用 Visual Studio 打开 ”（如果出现）。 提供了 处理程序选择器 项列表，每个已安装的 Visual Studio 实例一个。 仅当登录时，才会显示此选项。
在“Visual Studio Code”活动栏中，单击“源代码管理 (
) 按钮，然后单击“克隆存储库”按钮。在 “提供存储库 URL ”文本框中，粘贴复制的 URL： https://github.com/MicrosoftEdge/Demos.git ，然后按 Enter。 此时会打开文件夹选择对话框。
导航到所需路径（如
C:\Users\localAccount\Documents\GitHub或Users/username/GitHub），然后单击“ 选择存储库位置 ”按钮。此时会显示“ 克隆 git 存储库 ”消息，然后系统会提示你打开克隆的存储库。 单击“ 打开 ”按钮：
如果系统提示 你是否信任...，请单击“ 是 ”按钮。 或者，单击“ 否 ”按钮并继续执行本演练的大部分部分。
资源管理器树列出了许多演示，包括演示作。
另请参阅：
- 克隆存储库 - GitHub 文档。
- 在为 WebView2设置开发环境中克隆 WebView2Samples 存储库。
支持克隆存储库和 git 提交/拉取/推送作的工具
克隆存储库可在更新存储库时更新本地副本。 许多工具支持克隆并与 GitHub 存储库同步，例如：
命令提示符处的 git 命令，例如“git bash”shell。 这是此处所述的main方式。
GitHub Desktop。 与 GitHub 存储库和拉取请求以及 VS Code 很好地集成。
Visual Studio Code。 在左侧的活动栏中，单击“ 源代码管理”。
右下角解决方案资源管理器选项卡旁边的 Visual Studio >Git 更改选项卡。
Edge 浏览器中 VS Code 的“点键”版本。 在 Github.com 查看分支或拉取请求 (PR) 时，请按句点 (.) 键。 在左侧的活动栏中，单击：
- 源代码管理
- GitHub 拉取请求
- GitHub 拉取请求
下载演示存储库
建议在下载存储库时克隆存储库，以便可以拉取存储库的更新并完全参与存储库。
如果只想下载 Demos 存储库，而不是克隆它：
在新窗口或选项卡中，转到 MicrosoftEdge/Demos 存储库。
单击“ 代码 ”下拉列表按钮，然后单击“ 下载 ZIP”。
该文件
.zip位于下载目录中。 将这些网页源文件解压缩到合适的位置。
下载 Demos 存储库的单个目录：
转到 https://download-directory.github.io/ ，然后粘贴 URL https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do。
该文件
.zip位于下载目录中。 将这些网页源文件解压缩到合适的位置。
另请参阅：
- 在为 WebView2 设置开发环境中下载 WebView2Samples存储库。
从“源”工具的“工作区”选项卡打开演示文件夹
若要使用此部分，请先执行 上述将 Edge 演示存储库克隆到驱动器。
另请参阅：
- 工作区教程 (源工具工作区选项卡)
- Visual Studio Code的 Microsoft Edge DevTools 扩展中比较的方法。 汇总并比较了用于编辑网页文件的多个选项。
克隆 (或下载) Edge 演示存储库后：
在 Microsoft Edge 中，打开一个新选项卡。
右键单击网页，然后选择“ 检查”。 或者，按 Ctrl+Shift+I（Windows、Linux）或 Command+Option+I (macOS)。 DevTools 随即打开。
在 DevTools 的main工具栏上，选择“源”选项卡。如果该选项卡不可见，请单击“更多选项卡 (
) 按钮。在左侧 的“源 ”选项卡中，选择“ 工作区 ”选项卡，该选项卡与 “页面 ”选项卡分组。如果未显示 “工作区 ”选项卡，请单击“ 更多选项卡 (
) 按钮。单击“ + 将文件夹添加到工作区”。 此时会打开文件夹选择对话框。
选择特定文件夹（例如 演示作），或选择 Demos 根文件夹：
在 DevTools 上，系统会提示“DevTools 请求对 (目录) 的完全访问权限”。 单击“ 允许” 按钮：
启动 localhost 服务器
如果从特定的演示文件夹（如 \Demos\demo-to-do）启动 localhost 服务器，然后转到 localhost:8080 (或直接打开本地文件（如 C:\Users\localAccount\GitHub\Demos\demo-to-do\index.html Microsoft Edge) ），则特定演示将立即显示在浏览器中。 然后，只需将特定的演示目录（如 C:\Users\localAccount\GitHub\Demos\demo-to-do\）添加到“源”工具的“工作区”选项卡。 然后，你将获得用于将 DevTools 用作 IDE 的完整功能，用于该特定演示。
从特定演示目录中启动服务器：
$ cd ~/GitHub/Demos/demo-to-do
$ npx http-server
要添加到“源”工具的“工作区”选项卡的示例目录：C:\Users\localAccount\GitHub\Demos\demo-to-do
转到 localhost:8080的结果：
从 Demos 目录启动 localhost 服务器
如果从整个 \Demos\ 文件夹内启动 localhost 服务器，然后转到 localhost:8080，则可以从浏览器中导航到每个演示。 可以将整个克隆/Demos/的文件夹添加到“源”工具的“工作区”选项卡。 然后，你将获得使用 DevTools 作为 IDE 的完整功能。
从整个 \Demos\ 目录中启动服务器：
$ cd ~/GitHub/Demos
$ cd "C:\Users\localAccount\GitHub\Demos" # alt syntax
$ npx http-server
要添加到“源”工具的“工作区”选项卡的示例目录：C:\Users\localAccount\GitHub\Demos
转到 localhost:8080的结果：
从 文件资源管理器 打开本地 HTML 文件并在 DevTools 中对其进行编辑
若要在 源 工具中编辑文件，在执行本部分中的步骤之前，可能需要单击“ 允许 ”按钮，按照上述源 工具的“从工作区”选项卡中打开演示文件夹中的步骤授予读/写访问权限。
在 Windows 上的 文件资源管理器 或 macOS 上的 Finder 中，从 Demos 存储库的本地副本中选择一个 HTML 文件，例如
C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.html。文件
.html在 Microsoft Edge 中打开并呈现。地址栏显示： 文件 |C：/Users/localAccount/GitHub/Demos/demo-to-do/index.html
选择地址栏中的 URL 会显示 URL 格式：
file:///C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html右键单击呈现的网页，然后选择“ 检查”。
DevTools 随即打开。
选择“ 源” 工具，然后选择“ 页面 ”选项卡或“ 工作区 ”选项卡。
另请参阅：
- 编辑和保存工作区中的文件 (源工具工作区选项卡) - 在浏览器中打开 DevTools 的 源 工具中的本地文件夹。
从浏览器的“文件打开”对话框打开本地 HTML 文件，并在 DevTools 中对其进行编辑
若要打开 .html 并编辑文件，请执行以下作：
在 Microsoft Edge 中，打开新选项卡，然后按 Ctrl+O (Windows/Linux) 或 Command+O (macOS) 。 此时会打开文件选择对话框。
从 Demos 存储库的本地副本中选择一个 HTML 文件，例如
C:\Users\localAccount\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”选项卡中删除星号。
刷新页面。 更改显示在呈现的网页中;例如，已 修改 的单词将添加到标题中：
在 Visual Studio Code 中打开演示文件夹
克隆 (或下载) Edge 演示存储库后：
在“Visual Studio Code”中的“活动栏”中，单击“资源管理器” (
) 按钮。 此时会打开 “资源管理器 ”窗格。在 “资源管理器 ”窗格中，单击“ 打开文件夹” 按钮。 “ 打开文件夹 ”对话框随即打开。 导航到
demo-to-do演示存储库中克隆的文件夹，选择或转到该文件夹，然后单击“ 选择文件夹 ”按钮：
上面显示了克隆 Demos 存储库的存储库位置示例。 克隆
demo-to-do的 Demos 存储库的文件夹将在 Visual Studio Code 资源管理器中打开：
或者，可以打开 Demos 存储库的根文件夹，以浏览 “资源管理器 ”窗格中的所有演示文件夹。
另请参阅：
- Microsoft适用于 Visual Studio Code 的 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 不区分大小写。
运行 localhost 服务器并在克隆的存储库文件夹（例如 C:\Users\localAccount\GitHub\Demos\workspaces）中启动它时，通常会在浏览器地址栏中看到 localhost:8080 它。
另请参阅
打开和编辑文件：
- 编辑和保存工作区中的文件 (源工具工作区选项卡) - 将 DevTools 用作浏览器内集成开发环境 (IDE) 。
- 在源工具概述中，将本地文件夹添加到工作区，以便使用 DevTools 编辑文件和将更改保存到磁盘。
- Visual Studio Code的 Microsoft Edge DevTools 扩展中比较的方法。 汇总并比较了用于编辑网页文件的多个选项。
- Microsoft Edge IDE 集成 - 使用 Visual Studio Code 或 Visual Studio（包括 Microsoft Edge DevTools）的网页应用开发。
下载和克隆：
运行本地 Web 服务器：
- 步骤 6：在安装用于Visual Studio Code的 DevTools 扩展中设置 localhost 服务器。