DevTools 的示例代码

使用 演示 存储库了解如何使用 Microsoft Edge 开发网页和 Web 应用。 可通过多种方式查看、下载和修改这些演示网页，包括：

• Microsoft Edge 中的 DevTools。
• Visual Studio Code，包含可选的 DevTools。
• Visual Studio，包含可选的 DevTools。

若要在 Microsoft Edge 的 DevTools 中查看呈现的演示网页的源代码，请执行以下操作：

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

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

DevTools 示例列表

请参阅：

• “MicrosoftEdge/演示”存储库的自述文件中的 Microsoft Edge DevTools。

下面显示了一些示例。

待办事项演示

这个简单的待办事项列表网页用于演示各种 DevTools 功能。 它包含一个 .html 文件、一个 .js 文件和 .css 文件：

• 呈现的页面： TODO 应用

• 源代码： demo-to-do

存在辅助功能问题的演示网页

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

1. 在新窗口或选项卡中打开 具有辅助功能问题的演示网页 。

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

文章

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

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

• 辅助功能测试功能 - DevTools 的辅助功能测试功能列表，其中包含指向使用“存在辅助功能问题的演示网页”的几篇文章的链接。

源代码存储库

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

• MicrosoftEdge / 演示 > devtools-a11y-testing - 包含的文件包括：

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

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

  • styles.css、 和 light-theme.cssdark-theme.css - 控制演示网页呈现的 CSS 文件。

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

演示网页：使用 DevTools 调试 JavaScript

此演示网页可用于浏览 源 工具，尤其是 JavaScript 调试器。

1. 打开演示网页 在新窗口或选项卡中使用 DevTools 调试 JavaScript 入门 。

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

文章

这些文章或文章部分将引导你使用此演示网页：

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

• 调试 JavaScript 入门 - 更深入的演练，介绍如何将演示网页与调试器一起使用，演示调试器的各种功能，以及设置不同类型的断点。

源代码存储库

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

• MicrosoftEdge/演示 > devtools-js-get-started - 包含以下文件：

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

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

  • get-started.js - 演示网页中的窗体使用的 JavaScript 文件。

将“MicrosoftEdge / Demos”存储库克隆到驱动器

Microsoft Edge/演示存储库对于遵循各种 DevTools 文档非常有用。 可以克隆存储库，在克隆存储库的文件夹中启动 localhost Web 服务器，然后直接在 DevTools 中或在编辑器（如 VS Code）中编辑演示文件。

建议克隆存储库而不是下载存储库，以便可以拉取存储库的更新并完全参与存储库。

若要将 MicrosoftEdge/Demos 存储库克隆到本地驱动器，请执行以下操作：

1. 在命令提示符中，输入以git检查是否安装了 git。

2. 如果尚未完成， 请下载 git 并安装它。

3. 转到新窗口或选项卡中的 MicrosoftEdge/演示 存储库。

4. 单击“ 代码 ”下拉按钮，然后单击“ 将 URL 复制到剪贴板 ”按钮。

   URL 将复制到剪贴板： https://github.com/MicrosoftEdge/Demos.git

   或者，如果已安装 GitHub Desktop，请单击“ 使用 GitHub Desktop 打开 ”以克隆存储库，然后跳过下面的命令提示符步骤。

5. 打开命令提示符，如 git bash。

6. 将存储库克隆到本地驱动器，输入从 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 docs.

继续下一部分。

使用 VS Code 将“MicrosoftEdge / Demos”存储库克隆到驱动器

若要将 MicrosoftEdge/Demos 存储库克隆到本地驱动器，请执行以下操作：

1. 转到新窗口或选项卡中的 MicrosoftEdge/演示 存储库。

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

   

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

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

   

5. 导航到所需的路径，例如 C:\Users\localAccount\Documents\GitHub OR Users/username/GitHub，然后单击 选择存储库位置 按钮。

6. 将显示消息 Cloning git repository ，然后系统会提示您打开克隆的存储库。 单击 “打开 ”按钮：

   

7. 如果出现提示“ 你信任吗...”，请单击 “是 ”按钮。 或者，单击 “否 ”按钮，继续学习本演练的大部分内容。

   资源管理器树列出了许多演示，包括演示待办事项。

另请参阅：

• 克隆存储库 - GitHub docs.
• 在为 WebView2 设置开发环境中克隆 WebView2Samples 存储库。

支持克隆存储库和 git 提交/拉取/推送操作的工具

克隆存储库允许在更新存储库时更新本地副本。 许多工具支持克隆和与 GitHub 存储库同步，例如：

• 命令提示符处的 git 命令，例如“git bash”shell。 这是此处记录的主要方式。

• GitHub 桌面。 与 GitHub 存储库和拉取请求以及 VS Code 很好地集成。

• Visual Studio Code。 在左侧的“活动栏”中，单击 “源代码管理”。

• 右下角“解决方案资源管理器”选项卡旁边的 Visual Studio >Git 更改选项卡。

• Edge 浏览器中 VS Code 的“点键”版本。 在 Github.com，在查看分支或 PR) (拉取请求时，按句点 (。) 键。 在左侧的“活动栏”中，单击：

  • 源代码管理
  • GitHub 拉取请求
  • GitHub 拉取请求

下载演示存储库

建议克隆存储库而不是下载存储库，以便可以拉取存储库的更新并完全参与存储库。

如果只想下载 Demos 存储库而不是克隆它：

1. 在新窗口或选项卡中，转到 MicrosoftEdge/演示 存储库。

2. 单击“ 代码 ”下拉按钮，然后单击 “下载 ZIP”。

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

若要下载 Demos 存储库的单个目录：

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

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

另请参阅：

• 下载“为 WebView2 设置开发环境”中的 WebView2Samples 存储库。

从源工具的工作区选项卡打开演示文件夹

若要使用此部分，请首先执行上述将 “MicrosoftEdge/Demos”存储库克隆到驱动器中的步骤。

另请参阅：

• 工作区教程 (源工具 工作区选项卡)
• 在适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展中比较的方法。 汇总和比较用于编辑网页文件的几个选项。

克隆 (或下载) Edge Demos 存储库后：

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

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

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

4. 在“源”选项卡左侧，选择与“页面”选项卡分组的“工作区”选项卡。如果未显示“工作区”选项卡，请单击“更多选项卡” (“更多) 按钮。

5. 单击“ + 向工作区添加文件夹”。 将打开文件夹选择对话框。

6. 选择一个特定的文件夹，例如 demo-to-do，或选择 Demos 根文件夹：

   

7. 在 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 中对其进行编辑

若要在“源”工具中编辑文件，在执行本节中的步骤之前，可能需要按照上述“源”工具中“从”工作区“选项卡打开演示文件夹中的步骤单击”允许“按钮来授予读/写访问权限。

1. 在 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

2. 右键单击呈现的网页，然后选择 “检查”。

   DevTools 随即打开。

3. 选择 “源” 工具，然后选择 “页面 ”选项卡或“ 工作区 ”选项卡。

另请参阅：

• 在工作区中编辑和保存文件 (源工具 “工作区”选项卡) - 在浏览器中 DevTools 的 “源 ”工具中打开本地文件夹。

从浏览器的“文件打开”对话框中打开本地 HTML 文件并在 DevTools 中对其进行编辑

若要打开 .html 文件并对其进行编辑，请执行以下操作：

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

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

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

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

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

6. 按 Esc 打开 DevTools 底部的 “快速视图 ”面板。

7. 在 “快速视图 ”工具栏中，单击 “更多工具 ” (“ ) 按钮，然后选择 “更改” 工具。

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

   <h1>📋 My modified tasks</h1>
   

   如果未启用编辑，请单击“ 允许” 按钮，通过执行上述“ 源”工具中“从”工作区“选项卡打开演示文件夹 中的步骤来授予对文件夹的读/写权限。

   更改将显示在“快速视图”面板的“更改”工具中，并在“源”工具的“index.html”选项卡中将星号添加到文件名中：

   

9. 按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 保存更改。 星号已从“源”工具的“index.html”选项卡中删除。

10. 刷新页面。 更改将显示在呈现的网页中;例如，在标题中添加“ 已修改” 一词：

    

在 Visual Studio Code 中打开演示文件夹

克隆 (或下载) Edge Demos 存储库后：

1. 在 Visual Studio Code 的“活动栏”中，单击“资源管理器”) 按钮。 资源 管理器 窗格将打开。

2. 在 资源管理器 窗格中，单击 打开文件夹 按钮。 “ 打开文件夹 ”对话框随即打开。 导航到 demo-to-do 克隆的演示存储库中的文件夹，选择该文件夹或转到该文件夹，然后单击“ 选择文件夹 ”按钮：

   

   上面显示了已克隆 Demos 存储库的存储库位置示例。 demo-to-do克隆的 Demos 存储库的文件夹在 Visual Studio Code 的资源管理器中打开：

   

或者，可以打开演示存储库的根文件夹，以浏览资源 管理器 窗格中的所有演示文件夹。

另请参阅：

• 适用于 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] is MicrosoftEdge.
• [repo] is Demos.
• [path] is 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）开发网页应用。

下载和克隆：

• 步骤 5：在“安装适用于 Visual Studio Code 的 DevTools 扩展》中克隆演示存储库。
• 克隆存储库 - GitHub docs.

运行本地 Web 服务器：

• 步骤 6：在“安装适用于 Visual Studio Code 的 DevTools 扩展）中设置 localhost 服务器。