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

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

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

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

首先，设置一个本地目录，其中包含网页的源文件，例如 Workspaces 演示网页。

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

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

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

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

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

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

    或者，可以使用 Visual Studio Code 的源代码管理窗格克隆存储库，并跳过下面的命令提示符步骤。

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

  5. 将存储库克隆到本地驱动器，输入从 GitHub 存储库复制的 URL 字符串。 如果使用 git bash 命令提示符：

    # Example location where the repo directory will be added:
cd ~/GitHub
git clone https://github.com/MicrosoftEdge/Demos.git

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

继续下一部分。

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

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

    另请参阅：

  2. 转到命令提示符，例如 git bash shell 或 Microsoft Visual Studio Code 中的“终端”窗格。

  3. 更改存储 Demos 库目录的 workspaces 目录：

    cd ~/GitHub/Demos/workspaces
pwd

    用于 “源 ”工具的“ 工作区 ”选项卡的目录可以具有任意名称。 此演示目录名为 /workspaces/。

  4. 创建一个名为 “test” 的工作分支并切换到 (以避免在 “main” 分支) 中更改演示文件：

    git checkout -b test

    这相当于：

    git branch test
git switch test

  5. 运行以下命令之一，以启动 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

  6. 在 Microsoft Edge 中打开一个选项卡，然后转到站点的本地托管版本。 通常通过以下位置localhost:8080访问它：

    DevTools 工作区演示

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

    DevTools 工作区演示 网页随即打开。

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

另请参阅：

继续下一部分。

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

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

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

    DevTools 随即打开。

  2. 单击 源 (源 工具图标) 选项卡。

  3. 在左侧) 的导航器窗格 (中，单击与页面选项卡分组 (的工作区选项卡) ：

    “工作区”选项卡

  4. 单击 “添加文件夹 ”按钮。

    “ 选择文件夹 ”对话框将打开。

  5. 转到创建的克隆 /Demos/workspace/ 目录。 例如，在 “文件夹：” 文本框中，输入路径，如 C:\Users\localAccount\GitHub\Demos\workspaces\。

  6. 单击 “选择文件夹 ”按钮。

    DevTools 将提示你是否授予 DevTools 对目录 /workspaces/ 的完全访问权限。

  7. 单击 “允许” 按钮，授予 DevTools 读取和写入目录的权限。

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

    “工作区”选项卡有一个绿色的“映射”点，指示从服务器接收的资源与本地源文件之间的映射

继续下一部分。

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

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

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

  1. 在 “源 ”工具中的“ 工作区 ”选项卡中， (与 “页面 ”选项卡) 分组，选择 styles.css 以在编辑器窗格中将其打开。 color元素的h1属性设置为fuchsia：

    在文本编辑器中查看styles.css

  2. 选择“元素” (“工具图标) 工具;然后在 DOM 树中，展开该<body>元素;然后选择该<h1>元素。

    样 式 窗格显示应用于元素的 <h1> CSS 规则。 映射的文件 (映射的文件图标) 旁边styles.css:1的图标是带有绿色“映射”点的页面。 绿色的“映射”点表示你对此 CSS 规则所做的任何更改都将映射到 styles.css 目录 /Demos/workspace/ 中：

    “映射的文件”图标，带有双向箭头的页面

  3. 将元素的<h1>属性值color更改为橙色。 为此，请在 DOM 树中选择<h1>元素。 在 的 CSS 规则 h1中，单击 fuchsia，开始键入 “橙色”， 然后从颜色 列表中选择橙色：

    更改 styles.css 中的颜色属性

  4. 选择 “源” 工具，右键单击 styles.css，然后选择“ 在包含文件夹中打开”。

    文件资源管理器或 Finder 打开。

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

  6. 刷新页面。

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

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

继续下一部分。

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

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

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

  1. 继续上述操作，在 DevTools 中，单击“源” (“源”工具图标。) 选项卡。

  2. 在左侧导航 器 窗格中的“ 工作区 ”选项卡 (与 “页面 ”选项卡分组) ，选择 index.html。

    “ index.html ”选项卡将在 “源” 工具中打开。

  3. 在标记中 <h1> ，将“DevTools Workspaces Demo”替换为“I Love Cake”。

    星号将显示在 旁边。index.html

  4. 按 Ctrl+S (Windows 或 Linux) 或 Command+S (macOS) 。

    更改将保存，星号将消失。

    你在文件列表中进行了更改，而不是在 “元素” 工具的 DOM 树中。

  5. 刷新页面。 呈现页面中的标题更改为“I Love Cake”，因为该字符串已保存在映射目录/Demos/workspace/中index.html：

    从源工具更改 HTML

  6. 在 “源” 工具中，右键单击 index.html，然后选择“ 在包含文件夹中打开”。

    文件资源管理器或 Finder 打开。

  7. 在文本编辑器（如 Visual Studio Code）中打开目录中的/Demos/workspace/副本index.html。

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

    许多开发人员不直接编写 HTML，而是使用以下方法：

    • 服务器端语言，例如 Java、Python 或 PHP。
    • 站点生成器，例如 Eleventy。
    • 使用 JavaScript 代码的客户端框架。
    • HTML 以外的标记语言，例如 Markdown。

    这意味着在实践中，很少有开发人员会更改 Workspace 选项卡中的 HTML 文件。大多数开发人员使用不同类型的源文件（如 React 组件 JS 源文件）生成 HTML 文件，然后重新生成和重新加载 (这可能会在) 自动发生。

  8. 长按或右键单击 Microsoft Edge 中的 “刷新 ”按钮，然后选择“ 硬刷新” (Ctrl+Shift+R) 。

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

继续下一部分。

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

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

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

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

  2. 在 “工作区 ”选项卡中，选择 script.js。

    script.js 在“ 源 ”工具的“编辑器”窗格内的选项卡中打开。

  3. 在编辑器窗格中，将以下代码添加到 script.js底部：

    document.querySelector('a').style = 'font-style:italic';

    选项卡上 script.js 会显示一个星号。

  4. 按 Ctrl+S (Windows 或 Linux) 或 Command+S (macOS) 。

    script.js 已保存，并且星号将从选项卡中 script.js 删除。

  5. 刷新页面。

  6. 如果 HTML、JS 或 CSS 文件上不再有绿色“映射”点，请长按或右键单击 Microsoft Edge 中的 “刷新 ”按钮，然后选择“ 硬刷新” (Ctrl+Shift+R) 。

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

    页面上的链接现为斜体

继续下一部分。

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

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

    系统会添加名为 NewFile ：

    通过“工作区”选项卡添加的新文件

  2. 右键单击NewFile“工作区”选项卡，然后选择“重命名”。

  3. 将文件重命名为 test.js.

  4. 在 test.js中，添加以下行： console.log('hello from test.js');

  5. 在 “源 ”工具的“ 工作区 ”选项卡中，选择 index.html。

  6. 在 中，在 index.html行 <script src="./script.js" defer></script>下方添加行： <script src="./test.js" defer></script>

  7. 按 Ctrl+S (Windows 或 Linux) 或 Command+S (macOS) 。

    index.html 已保存。

  8. 长按或右键单击 Microsoft Edge 中的 “刷新 ”按钮，然后选择“ 硬刷新” (Ctrl+Shift+R) 。

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

    在 HTML 文件中添加对 JS 文件的引用，并在所有网页文件上添加绿色“映射”点

本教程到此结束。

如果要还原文件夹中的/workspace/编辑，可以在命令提示符下使用 git 命令，或使用 GitHub Desktop 还原当前分支中的更改，例如“main”或“test”。

另请参阅

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面可在 此处 找到，作者为 Kayce Basques。

Creative Commons 许可证 本作品根据 Creative Commons Attribution 4.0 International License 获得许可。

  • 上次更新时间为