此页面由 Cloud Translation API 翻译。

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

Kayce Basques

Sofia Emelianova

本教程提供了一个练习机会：设置工作区可以在您自己的项目中使用它借助 Workspace，您可以保存通过 DevTools 存储计算机中存储的源代码。

概览

借助工作区，您可以将您在开发者工具中所做的更改保存到。例如，假设：

启用工作区后，您在开发者工具中所做的 CSS 更改将保存到源代码中。

如果您使用的是现代框架，它可能会将源代码从易于维护的格式经过优化，可以尽快投放。工作区为在源代码的帮助下，我们通常能够将优化后的代码映射回您的原始源代码地图。

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

完成本教程后，即可亲身体验工作区。

将此演示代码库克隆到计算机上的某个目录。例如，替换为 ~/Desktop。
在 ~/Desktop/devtools-workspace-demo 中启动本地 Web 服务器。下面是一些用于启动 Google Cloud 控制台的示例代码 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-workspace-demo 文件夹中设置一个工作区。您可以通过以下几种方式完成此操作：
- 将该文件夹拖放到编辑器中的 Sources（来源）。
- 点击选择文件夹链接，然后选择相应文件夹。
- 点击 Add folder（添加文件夹），然后选择相应文件夹。
在顶部提示中，点击 Allow 以向开发者工具授予目录的读取和写入权限。

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

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

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

$在文本编辑器中查看 Styles.css。$
关闭文本编辑器。
返回开发者工具，点击 Elements 标签页。
将 <h1> 元素的 color 属性的值更改为您喜欢的颜色。为此，请执行以下操作：
1. 点击 DOM 树中的 <h1> 元素。
2. 在 Styles 窗格中，找到 h1 { color: fuchsia } CSS 规则，然后将颜色更改为您喜欢的颜色。在此示例中，颜色设置为绿色。
Styles 窗格中 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 来确定其应呈现给浏览器用户的内容。
因此，用户看到的网页的最终状态可能会与浏览器抓取了。
这使得开发者工具难以解析在 Elements 面板中进行的更改因为 DOM 受 HTML、JavaScript 和 CSS 的影响。

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

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

Sources 面板也是用于更改 JavaScript 的位置。但有时您需要在进行更改的同时访问其他面板，例如Elements面板或Elements面板。系统可以使来源面板与其他面板一起打开。

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

该标签页显示的是 index.html 的内容，也就是最后一个您在来源面板中修改的文件。快速源代码标签页可让您从以下位置找到编辑器： Sources（来源）面板，以便在打开其他面板的同时修改文件。
按 Command + P (Mac) 或 Ctrl + 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）以保存更改。
重新加载页面。页面上的链接现在为斜体。