此页面由 Cloud Translation API 翻译。

在工作区中编辑和保存文件

Kayce Basques

Sofia Emelianova

本教程提供了一个机会，让您通过设置工作区来进行练习，以便在自己的项目中使用该工作区。借助 Workspace，您可以将在 DevTools 中进行的更改保存到存储在计算机上的源代码中。

概览

借助工作区，您可以将在 DevTools 中进行的更改保存到计算机上同一文件的本地副本。例如，假设：

启用工作区后，您在 DevTools 中所做的 CSS 更改会保存到桌面上的源代码中。

如果您使用的是新型框架，它可能会将您的源代码从易于维护的格式转换为经过优化以尽快运行的格式。工作区通常能够借助源映射将优化的代码映射回原始源代码。

DevTools 社区致力于支持 Source Maps 在各种框架和工具中提供的功能。如果您在使用工作区与所选框架搭配使用时遇到问题，或者在进行一些自定义配置后使其正常运行，请在邮寄名单中发起会话或在 Stack Overflow 上提问，以便与其他开发者工具社区成员分享您的知识。

完成本教程，即可动手体验 Workspace。

将此演示代码库克隆到您计算机上的某个目录。例如，替换为 ~/Desktop。
在 ~/Desktop/devtools-workspace-demo 中启动本地 Web 服务器。下面是用于启动 SimpleHTTPServer 的一些示例代码，但您可以使用自己喜欢的任何服务器。
```
cd ~/Desktop/devtools-workspace-demo
# If your Python version is 3.X
# On Windows, try "python -m http.server" or "py -3 -m http.server"
python3 -m http.server
# If your Python version is 2.X
python -m SimpleHTTPServer
```
在本教程的其余部分中，此目录将称为 /devtools-workspace-demo。
在 Google Chrome 中打开一个标签页，然后前往本地托管的网站版本。您应该能够通过网址（例如 localhost:8000）访问它。确切的端口号可能会有所不同。

在本地托管的演示页面上打开 DevTools。
依次前往 Sources > Workspace，然后在您克隆的 devtools-workspace-demo 文件夹中设置工作区。您可以通过以下几种方式实现此目的：
- 将该文件夹拖放到来源中的编辑器中。
- 点击选择文件夹链接，然后选择文件夹。
- 点击 Add folder（添加文件夹），然后选择相应文件夹。
在顶部的提示中，点击允许，以向开发者工具授予对该目录的读写权限。

在工作区标签页中，index.html、script.js 和 styles.css 旁边现在会显示一个绿点。这些绿点表示 DevTools 已在网页的网络资源与 devtools-workspace-demo 中的文件之间建立了映射。

“Workspace”标签页现在会显示本地文件与网络文件之间的映射。

在文本编辑器中打开 /devtools-workspace-demo/styles.css。请注意，如何将 h1 元素的 color 属性设置为 fuchsia。

$在文本编辑器中查看 styles.css。$
关闭文本编辑器。
返回 DevTools，点击 Elements 标签页。
将 <h1> 元素的 color 属性的值更改为您喜欢的颜色。为此，请执行以下操作：
1. 点击 DOM 树中的 <h1> 元素。
2. 在 Styles 窗格中，找到 h1 { color: fuchsia } CSS 规则，然后将颜色更改为您喜欢的颜色。在此示例中，颜色设置为绿色。
样式窗格中 styles.css:1 旁边的绿点表示您所做的任何更改都会映射到 /devtools-workspace-demo/styles.css。
再次在文本编辑器中打开 /devtools-workspace-demo/styles.css。color 属性现在已设置为您的首选颜色。
重新加载页面。<h1> 元素的颜色仍设为您喜欢的颜色。之所以能这样，是因为当您进行更改时，DevTools 会将更改保存到磁盘。然后，当您重新加载页面时，本地服务器会从磁盘提供经过修改的文件副本。

您在 Elements 面板上看到的节点树表示网页的 DOM。
如需显示网页，浏览器会通过网络提取 HTML，解析 HTML，然后将其转换为 DOM 节点树。
如果网页包含任何 JavaScript，该 JavaScript 可能会添加、删除或更改 DOM 节点。CSS 也可以通过 content 属性更改 DOM。
浏览器最终会使用 DOM 来确定应向浏览器用户呈现哪些内容。
因此，用户看到的网页的最终状态可能与浏览器提取的 HTML 大不相同。
这使得 DevTools 难以确定应在何处保存在 Elements 面板中进行的更改，因为 DOM 会受到 HTML、JavaScript 和 CSS 的影响。

简而言之，DOM 树 !== HTML。

如果您想保存对网页 HTML 所做的更改，请在 Sources 面板中执行此操作。

您还可以在 Sources 面板中更改 JavaScript。不过，在更改网站时，您有时需要访问其他面板，例如元素面板或控制台面板。您可以让 Sources 面板与其他面板一起打开。

打开元素标签页。
按 Command+Shift+P（Mac）或 Control+Shift+P（Windows、Linux、ChromeOS）。系统随即会打开命令菜单。
输入 QS，然后选择显示快速来源。现在，DevTools 窗口底部会显示一个快捷来源标签页。

该标签页显示的是 index.html 的内容，这是您上次在 Sources 面板中编辑的文件。快速来源标签页会显示 Sources 面板中的编辑器，以便您在打开其他面板时编辑文件。
按 Command+P（Mac）或 Control+P（Windows、Linux、ChromeOS）打开打开文件对话框。
输入 script，然后选择 devtools-workspace-demo/script.js。
请注意演示中的 Edit and save files in a workspace 链接。其样式是常规样式。
在 Quick Source（快捷来源）标签页中，将以下代码添加到 script.js 的底部。
```
document.querySelector('a').style = 'font-style:italic';
```
按 Command+S（Mac）或 Control+S（Windows、Linux、ChromeOS）保存更改。
重新加载页面。页面上的链接现在采用了斜体字体。