$ npm version
npm: '8.15.0',
node: '16.17.1',
另请参阅：
内联和实时问题分析
步骤 5：克隆演示存储库
克隆 Demos 存储库是可选的。 Demos 存储库可用于遵循各种 DevTools 文档。 如果需要，可以打开现有项目目录（如果有），而不是克隆存储库。
另一种方法是，你只能下载 演示操作 目录，而不是克隆整个目录。 例如，转到 https://download-directory.github.io/ ，然后粘贴 URL https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do。 该文件 .zip 位于下载目录中。 将这些网页源文件解压缩到合适的位置。 教程开始使用适用于 Visual Studio Code的 DevTools 扩展使用示例位置：
C:\Users\username\Documents\GitHub\Demos\demo-to-do\
克隆 Demos 存储库以使用本教程的 演示操作 示例：
转到 MicrosoftEdge/Demos 存储库。
如果未显示绿色的“代码”按钮，请单击左上角路径“Microsoft Edge / 演示”中的“演示”，转到存储库的“main”页。
单击绿色的“ 代码 ”按钮，然后选择“ 复制 ”按钮。 本文假设你在Visual Studio Code中使用源代码管理功能。 或者，如果知道想要改用此方法，则可以使用所提供的其他方法之一：
使用 GitHub Desktop 打开
使用 Visual Studio 打开
下载 ZIP
在“Visual Studio Code”活动栏中，单击“源代码管理 (
“) ”按钮，然后单击“克隆存储库”按钮。
在 “提供存储库 URL ”文本框中，粘贴复制的 URL： https://github.com/MicrosoftEdge/Demos.git ，然后按 Enter。 此时会打开文件夹选择对话框。
导航到所需路径（如 C:\Users\username\Documents\GitHub 或 Users/username/GitHub），然后单击“ 选择存储库位置 ”按钮。
此时会显示“ 克隆 git 存储库 ”消息，然后系统会提示你打开克隆的存储库。 单击“ 打开 ”按钮：
如果系统提示 你是否信任...，请单击“ 是 ”按钮。 或者，单击“ 否 ”按钮并继续执行本演练的大部分部分。
资源管理器树列出了许多演示，包括演示操作。
在“Visual Studio Code”中，选择“文件>关闭文件夹”。
在活动栏中，单击“ Microsoft Edge Tools (
) 按钮。 “ Microsoft Edge 工具 ”窗格随即打开。
在 “Microsoft Edge 工具>目标 ”窗格中，单击“ 打开文件夹” 按钮。 “ 打开文件夹 ”对话框随即打开。 导航到 demo-to-do 演示存储库中克隆的文件夹，选择该文件夹或转到该文件夹，然后单击“ 选择文件夹 ”按钮：
上面显示了克隆 Demos 存储库的存储库位置示例。 demo-to-do克隆的 Demos 存储库的文件夹将在 Visual Studio Code 资源管理器中打开，并且尚不存在文件launch.json：
步骤 6：设置 localhost 服务器
如果安装了 Node.js和 npm，如上所述， npx http-server 是启动本地 Web 服务器的简单方法。 可以跳到以下步骤，或先阅读此背景信息。
在许多情况下，无需输入 URL 或运行 localhost 服务器。 例如，你能够：
打开包含网页源文件的文件夹，然后右键单击文件 .html 。
在地址栏中输入本地文件路径，例如 C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html (默认的“成功”页) 。
在 “Edge DevTools：浏览器 ”选项卡的地址栏中输入远程服务器 URL，例如 https://microsoftedge.github.io/Demos/demo-to-do/。
如果网页使用某些 API 要求网页在 Web 服务器上运行，则若要使用 DevTools，则必须启动本地 Web 服务器进行测试。 如果不在 Web 服务器上提供项目，而只是使用本地文件，则仍可以通过右键单击本地 .html 文件来使用具有调试功能的 DevTools。 专门要求应用在服务器上使用的应用功能将不起作用，并且 DevTools 的实用工具有限。
有关 http-server 的信息，请参阅 http-server：一个简单的静态 HTTP 服务器。
设置 http-server
在“Visual Studio Code”中，选择“文件>打开文件夹”>，打开包含网页的 .html、 .css和 .js 文件的目录，例如 C:\Users\username\Documents\GitHub\Demos\demo-to-do\。
在上面的示例路径中：
\Documents\GitHub\ 是存储库克隆到的位置 Demos 。
\Demos\ 是 GitHub 存储库，用于 Microsoft Edge 开发人员文档中的示例。
\demo-to-do\ 是存储库中的示例目录之一。
在“Visual Studio Code”中，选择“查看>终端”。 或者，若要使 Web 服务器保持运行而不考虑 Visual Studio 的状态，请在 Visual Studio Code 外部打开命令提示符，例如 git bash。
cd 要通过 http 提供服务的文件夹中。
在 git bash shell 中，使用正斜杠，例如：
cd C:/Users/username/Documents/GitHub/Demos/demo-to-do/
或者，如果在 Windows 上使用其他命令提示符，请使用反斜杠，例如：
cd C:\Users\username\Documents\GitHub\Demos\demo-to-do\
继续以下操作。
启动服务器 (npx http-server)
这些步骤首次启动服务器。
输入命令 npx http-server：
npx http-server
本地 Web 服务器在端口 8080 上启动。
你可能会收到如下消息：
Need to install the following packages:
http-server@14.1.1
Ok to proceed? (y)
输入 y。
Windows 提示是否允许 Node 在网络上进行通信：
选中“ 专用网络 ”复选框，然后单击“ 允许访问 ”按钮。
将显示有关服务器和 localhost URL 的信息，例如：
Starting up http-server, serving ./
Available on:
http://10.0.1.8:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server
显示的 URL 通常等效于通用标准 URL http://localhost:8080。
接下来，请参阅开始使用适用于 Visual Studio Code 的 DevTools 扩展。
开始使用适用于 Visual Studio Code 的 DevTools 扩展
打开 DevTools 和 DevTools 浏览器
适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展
DevTools 的示例代码
克隆存储库 - GitHub 文档。
) 按钮。 或者，在 Windows/Linux 上按
Ctrl+Shift+X
或在 macOS 上
按 Command+Shift+X
。 此时会打开
“扩展
市场”窗格。