工作区教程 (源工具工作区选项卡)

2025-07-01

使用以下步骤将 DevTools 用作 IDE，例如在 “源 ”工具的“ 工作区 ”选项卡中进行网页编辑，将更改保存到磁盘上的源文件。

可以阅读或遵循这些步骤来演示如何在 DevTools 中设置和使用工作区。设置工作区后，通过使用 DevTools 对工作区中的文件所做的更改将保存在本地计算机上。

步骤 1：将 Edge 演示存储库克隆到本地驱动器

首先，设置包含网页源文件的本地目录，例如工作区演示网页。

将 MicrosoftEdge/Demos 存储库克隆到本地驱动器，包括 /workspaces/ 演示文件夹，如下所示：

如果尚未完成，请下载并安装 git。
在新窗口或选项卡中转到 MicrosoftEdge/Demos 。
单击“ 代码 ”下拉按钮，然后单击“ 将 URL 复制到剪贴板 ”按钮。

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

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

或者，可以使用Visual Studio Code的“源代码管理”窗格克隆存储库，并跳过下面的命令提示符步骤。
打开命令提示符，例如 git bash。
将存储库克隆到本地驱动器，输入从 GitHub 存储库复制的 URL 字符串。如果使用 git bash 命令提示符：
```
# Example ___location where the repo directory will be added:
cd ~/GitHub
git clone https://github.com/MicrosoftEdge/Demos.git
```

有关克隆存储库的详细信息，请参阅：

克隆存储库 - GitHub 文档。

继续下一部分。

步骤 2：在网页源文件目录中启动 localhost 服务器

如果尚未安装，请从 Node.js安装 Node.js 和 npm 的最新版本。

另请参阅：
- 安装适用于 Visual Studio Code 的 DevTools 扩展中的 Node.js 和 Node 包管理器 (npm ) 。
转到命令提示符，例如 git bash shell 或 Microsoft Visual Studio Code 中的“终端”窗格。
更改 Demos 存储库目录的 workspaces 目录：
```
cd ~/GitHub/Demos/workspaces
pwd
```
用于 “源” 工具的“ 工作区 ”选项卡的目录可以具有任何名称。此演示目录名为 /workspaces/。
创建名为“test”的工作分支， (切换到它，以避免更改“main”分支中的演示文件) ：
```
git checkout -b test
```
这等效于：
```
git branch test
git switch test
```
运行以下命令之一，启动 Web 服务器：
```
# Node.js option
npx http-server
```
有关详细信息和选项，请参阅安装适用于 Visual Studio Code 的 DevTools 扩展中的启动服务器 (npx http-server ) 。
```
# Python 2 option
cd ~/GitHub/demos/workspaces
python -m SimpleHTTPServer
```
```
# Python 3 option
cd ~/GitHub/demos/workspaces
python -m http.server
```
在 Microsoft Edge 中打开选项卡，然后转到站点的本地托管版本。通常通过以下方法localhost:8080访问它：

另一个常见的等效 URL 是 http://0.0.0.0:8080。 Python 服务器选项的默认端口号为 8000。确切的端口号可能不同。

此时会打开 DevTools 工作区演示 网页。

(最新演示中的链接可能显示“使用工作区编辑文件”或“编辑和保存工作区中的文件 (源工具工作区选项卡) ”。)

另请参阅：

在 MDN 中，在如何设置本地测试服务器？中运行简单的本地 HTTP 服务器- 显示 Python。

继续下一部分。

步骤 3：在源工具中添加工作区文件夹

接下来，在 DevTools 中定义工作区：

右键单击本地托管的 DevTools 工作区演示 网页，然后选择“ 检查”。或者，按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。

DevTools 随即打开。
单击“ 源 () 选项卡。
在左侧) 的“ 导航器 ”窗格 (中，单击“ 工作区 ”选项卡 (该选项卡与 “页面 ”选项卡) 分组：
单击“ 添加文件夹 ”按钮。

此时会打开 “选择文件夹 ”对话框。
转到创建的克隆 /Demos/workspace/ 目录。例如，在 “文件夹： ”文本框中，输入路径，例如 C:\Users\localAccount\GitHub\Demos\workspaces\。
单击“ 选择文件夹” 按钮。

DevTools 会提示是否授予 DevTools 对 /workspaces/ 目录的完全访问权限。
单击“ 允许 ”按钮，授予 DevTools 读取和写入目录的权限。

在 “工作区 ”选项卡中，页面图标具有绿色的“映射”点，表示 index.html、 script.js和 styles.css。绿色的“映射”点表示 DevTools 已在从 Web 服务器接收的页面的网络资源与目录中的本地源文件 /Demos/workspace/ 之间建立映射：

继续下一部分。

步骤 4：通过“元素”工具“”样式“选项卡将 CSS 更改保存到磁盘 ()

接下来，编辑 CSS 并将更改保存到源文件。此处使用 “元素 ”工具的“ 样式 ”选项卡，在用户界面控件的协助下，我们可以直接在 “源 ”工具的 “工作区 ”选项卡的文件编辑器中编辑 CSS 文件。

若要更改 CSS 文件，并使用 “元素 ”工具的“ 样式 ”选项卡将其保存到磁盘：

在 “源” 工具的“ 工作区 ”选项卡中， (“ 页面 ”选项卡) 分组，选择 styles.css 在编辑器窗格中将其打开。元素 color 的 h1 属性设置为 fuchsia：
选择 “元素 () 工具;然后，在 DOM 树中展开 <body> 元素;然后选择元素 <h1> 。

“ 样式 ”窗格显示应用于元素的 <h1> CSS 规则。映射文件 () 旁边的 styles.css:1 图标是带有绿色“映射”点的页面。绿色的“mapped”点表示对此 CSS 规则所做的任何更改都映射到 styles.css 目录中 /Demos/workspace/ ：
将元素的 color 属性 <h1> 的值更改为橙色。为此，请在 <h1>DOM 树中选择元素。在的 CSS 规则中 h1，单击， fuchsia开始键入橙色，然后从颜色列表中选择橙色：
选择 “源” 工具，右键单击， styles.css然后选择“ 在包含文件夹中打开”。

文件资源管理器或 Finder 打开。
在文本编辑器（如Visual Studio Code）中/Demos/workspace/打开目录中的副本styles.css。属性 color 现在设置为新颜色，在本示例中为橙色。更改不仅在从 Web 服务器返回的文件的副本中进行了;工作区目录中的映射文件中 /Demos/workspace/ 也进行了更改。
刷新页面。

元素的颜色 <h1> 仍设置为新颜色。更改在刷新时保留，因为在进行更改时，DevTools 会将更改保存到磁盘。刷新页面时，本地服务器从磁盘中提供文件的修改副本。

提示： 还可以通过单击彩色样本来打开颜色选取器以选取新颜色来更改颜色。所选颜色的十六进制值是颜色名称。

继续下一部分。

步骤 5：通过“源”工具“”工作区“选项卡将 HTML 更改保存到磁盘 ()

接下来，编辑 HTML 并将更改保存到源文件。若要保存对网页 HTML 文件的更改，请在“ 源 ”工具的“ 工作区 ”选项卡中添加源代码文件夹，然后在 “源 ”工具中编辑 HTML。 (更改不会仅通过更改元素工具中的 DOM 树中的 HTML 来更改源文件。)

“DevTools 工作区 ”选项卡类似于使用编辑器编辑 HTML 源文件，但允许直接在 DevTools 中编辑 HTML 源文件。

从上面继续，在 DevTools 中，单击“ 源 () 选项卡。
在左侧的“导航器”窗格中，在“工作区”选项卡 (与“页面”选项卡) 分组，选择。index.html

“ index.html ”选项卡将在 “源 ”工具中打开。
在标记中 <h1> ，将“DevTools 工作区演示”替换为“I Love Cake”。

星号显示在旁边 index.html。
按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 。

更改已保存，星号消失。

你对文件列表进行了更改，而不是 在“元素” 工具的 DOM 树中进行了更改。
刷新页面。呈现页中的标题将更改为“I Love Cake”，因为该字符串已保存在映射/Demos/workspace/目录中index.html：
在 “源”工具中 ，右键单击， index.html然后选择“ 在包含文件夹中打开”。

文件资源管理器或 Finder 打开。
在文本编辑器（如Visual Studio Code）中/Demos/workspace/打开目录中的副本index.html。

元素 <h1> 包含新文本“I Love Cake”，因为你使用源工具的编辑器进行了更改以编辑 index.html 并保存更改，并且该文件 (工作区选项卡) 映射，文件图标上的绿色“映射”点表示。

许多开发人员不直接编写 HTML，而是使用以下方法：
- 服务器端语言，如 Java、Python 或 PHP。
- 站点生成器，例如 Eleventy。
- 使用 JavaScript 代码的客户端框架。
- HTML 以外的标记语言，例如 Markdown。
这意味着在实践中，很少有开发人员会更改“工作区”选项卡中的 HTML 文件。大多数开发人员使用不同类型的源文件（例如React组件 JS 源文件）生成 HTML 文件，然后重新生成并重新加载 () 自动发生。
在 Microsoft Edge 中，长按或右键单击“ 刷新 ”按钮，然后选择“ 硬刷新 ” (Ctrl+Shift+R) 。

在 “工作区 ”选项卡中，所有 HTML、CSS 和 JS 文件上都显示绿色的“映射”点。

继续下一部分。

步骤 6：将 JavaScript 更改保存到磁盘

接下来，继续编辑工作区演示的 JavaScript 文件，并将更改保存到源文件。若要将编辑内容保存到 JavaScript 源文件，可以在源工具的“ 工作区 ”选项卡中添加源代码文件夹后，像 IDE 一样使用 DevTools 。然后，可以在源工具的编辑器中编辑并保存 JavaScript 文件。

在呈现的演示网页中，使用斜体设置 “编辑和保存工作区中文件 (源”工具“工作区选项卡) 超链接的样式：

在 DevTools 中，选择 “源” 工具，然后选择“ 工作区 ”选项卡，该选项卡与 “页面 ”选项卡分组。
在“工作区”选项卡中，选择。script.js

script.js 在 “源 ”工具的编辑器窗格中的选项卡中打开。
在编辑器窗格中，将以下代码添加到 script.js的底部：
```
document.querySelector('a').style = 'font-style:italic';
```
选项卡上会显示 script.js 一个星号。
按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 。

script.js 已保存，并且星号将从 script.js 选项卡中删除。
刷新页面。
如果 HTML、JS 或 CSS 文件上不再有绿色的“映射”点，请长按或右键单击 Microsoft Edge 中的“ 刷新 ”按钮，然后选择“ 硬刷新 (Ctrl+Shift+R) 。

页面上 的“使用工作区 (编辑文件”或“编辑和保存工作区 (源”工具“工作区选项卡) ) 超链接现在已进行斜体化：

继续下一部分。

步骤 7：使用 DevTools 添加 .js 文件

在 “源” 工具的“ 工作区 ”选项卡中，右键单击文件夹 /workspaces/ ，然后选择“ 新建文件 ”菜单项。

添加了名为 NewFile 的文件：
右键单击NewFile“工作区”选项卡，然后选择“重命名”。
将文件重命名为 test.js。
在中 test.js，添加行： console.log('hello from test.js');
在“源”工具的“工作区”选项卡中，选择。index.html
在 index.html中，在行 <script src="./script.js" defer></script>下面添加行： <script src="./test.js" defer></script>
按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 。

index.html 已保存。
在 Microsoft Edge 中，长按或右键单击“ 刷新 ”按钮，然后选择“ 硬刷新 ” (Ctrl+Shift+R) 。

在 “工作区 ”选项卡中，所有 HTML、CSS 和 JS 文件上都显示绿色的“映射”点：