此页面由 Cloud Translation API 翻译。

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

Kayce Basques

Sofia Emelianova

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

概览

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

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

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

开发者工具社区致力于在各种框架和工具中支持源映射提供的功能。如果您在使用工作区与所选框架搭配使用时遇到问题，或者在进行一些自定义配置后使其正常运行，请在邮寄名单中发起会话或在 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 文件夹中设置工作区。您可以通过以下几种方式完成此操作：
- 将该文件夹拖放到编辑器中的 Sources（来源）。
- 点击选择文件夹链接，然后选择文件夹。
- 点击 Add folder（添加文件夹），然后选择相应文件夹。
在顶部的提示中，点击允许，以向开发者工具授予对该目录的读写权限。

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

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

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

$在文本编辑器中查看 Styles.css。$
关闭文本编辑器。
返回开发者工具，点击 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> 元素的颜色仍设为您喜欢的颜色。这之所以有效，是因为您进行更改后开发者工具将更改保存到磁盘。然后，当您重新加载页面时，本地服务器会从磁盘传送该文件的修改后的副本。

您在 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。不过，在更改网站时，您有时需要访问其他面板，例如元素面板或控制台面板。可以使来源面板与其他面板一起打开。

打开元素标签页。
按 Command+Shift+P（Mac）或 Control+Shift+P（Windows、Linux、ChromeOS）。命令菜单随即会打开。
输入 QS，然后选择显示快速源代码。现在，开发者工具窗口的底部有一个 Quick Source 标签页。

该标签页显示的是 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) 或 Ctrl+S（Windows、Linux、ChromeOS）以保存更改。
重新加载页面。页面上的链接现在为斜体。