此页面由 Cloud Translation API 翻译。

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

Kayce Basques

Sofia Emelianova

本教程让您有机会练习设置工作区，以便您在自己的项目中使用工作区。借助工作区，您可以将在开发者工具中所做的更改保存到计算机上存储的源代码中。

概览

借助工作区，您可以将在开发者工具中所做的更改保存到计算机上同一文件的本地副本中。例如，假设：

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

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

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

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

将此演示代码库克隆到计算机上的某个目录中。例如，替换为 ~/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-workspace-demo 文件夹中设置工作区。您可以通过以下几种方式实现这一目标：
- 将该文件夹拖放到 Sources 的 Editor 中。
- 点击选择文件夹链接，然后选择相应文件夹。
- 点击 添加文件夹，然后选择相应文件夹。
在顶部的提示符中，点击 Allow 以授予开发者工具对目录执行读取和写入的权限。

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

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

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

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

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

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

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

Sources 面板也是更改 JavaScript 的地方。但有时，在对网站进行更改时，您需要访问其他面板（例如元素面板或控制台面板）。您可以与其他面板一起打开来源面板。

打开元素标签页。
按 Command+Shift+P (Mac) 或 Ctrl+Shift+P（Windows、Linux、ChromeOS）。系统随即会打开命令菜单。
输入 QS，然后选择 Show Quick Source。现在，开发者工具窗口底部有一个 Quick Source 标签页。

该标签页正在显示 index.html 的内容，即您在来源面板中修改的最后一个文件。快速来源标签页提供了来源面板上的编辑器，以便您可以在打开其他面板的同时修改文件。
按 Command+P (Mac) 或 Ctrl+P（Windows、Linux、ChromeOS）打开 Open File 对话框。
输入 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）即可保存更改。
重新加载页面。网页上的链接现已变为斜体。