DevTools 的示例代码
使用 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 文件。
下载或克隆演示存储库
Demos 存储库可用于遵循各种 DevTools 文档。
下载演示存储库
下载 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存储库。
克隆演示存储库
克隆存储库可在更新存储库时更新本地副本。 GitHub UI 和各种工具支持克隆。 我们将介绍如何使用 Visual Studio Code 进行克隆，但你可以使用许多其他编码工具，例如 GitHub Desktop、Visual Studio 或 git bash shell。
克隆存储库：
在新窗口或选项卡中，转到 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 存储库 ”消息，然后系统会提示你打开克隆的存储库。 单击“ 打开 ”按钮：
如果系统提示 你是否信任...，请单击“ 是 ”按钮。 或者，单击“ 否 ”按钮并继续执行本演练的大部分部分。
资源管理器树列出了许多演示，包括演示操作。
另请参阅：
- 克隆存储库 - GitHub 文档。
- 在为 WebView2设置开发环境中克隆 WebView2Samples 存储库。
在源工具中打开演示文件夹并编辑文件
若要使用此部分，请先 下载或克隆演示存储库。
若要在 源 工具中编辑本地文件，可能需要首先单击“ 允许 ”按钮以授予读/写访问权限。 为此，请按照下面的 “源”工具中的“文件系统 (工作区) ”选项卡中的步骤操作 。
另请参阅：
- Visual Studio Code的 Microsoft Edge DevTools 扩展中比较的方法。 汇总并比较了用于编辑网页文件的多个选项。
从“源”工具中的“文件系统 (工作区) ”选项卡打开文件夹
下载或克隆 Demos 存储库后：
在 Microsoft Edge 中，打开一个新选项卡。
右键单击网页，然后选择“ 检查”。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。
在 DevTools 的main工具栏上，选择“源”选项卡。如果该选项卡不可见，请单击“更多选项卡 (
) 按钮。在左侧 的“源 ”选项卡中，选择“ 文件系统 ”选项卡，该选项卡与 “页面 ”选项卡分组。如果未显示“ 文件系统 ”选项卡，请单击“ 更多选项卡 (
) 按钮。单击“ + 将文件夹添加到工作区”。 此时会打开文件夹选择对话框。
选择特定文件夹（例如 演示操作），或选择 Demos 根文件夹：
在 DevTools 上，系统会提示“DevTools 请求对 (目录) 的完全访问权限”。 单击“ 允许” 按钮：
若要编辑文件，请参阅下一部分中的编辑步骤。
另请参阅：
- 使用“工作区” (“文件系统”选项卡) 编辑文件 - 在浏览器中，在 DevTools 的 “源 ”工具中打开本地文件夹。
- 使用“文件系统”选项卡在“源”工具概述中定义本地工作区。
从浏览器的“文件打开”对话框打开本地 HTML 文件，然后从“源”工具的“页面”选项卡对其进行编辑
若要在 源 工具中编辑文件，在执行本部分中的步骤之前，可能需要单击“ 允许 ”按钮，按照上述 源工具中的“从文件系统 (工作区) 打开文件夹”选项卡中 的步骤授予读/写访问权限。
若要打开 .html 并编辑文件，请执行以下操作：
在 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）进行网页应用开发。
下载和克隆：
运行本地 Web 服务器：
- 步骤 6：在安装用于Visual Studio Code的 DevTools 扩展中设置 localhost 服务器。