Chrome 开发者工具 第二十章（使用工作区进行文件编辑和保存）

Chrome 开发者工具的工作区功能提供了一种便利的方式，允许开发者直接在浏览器中编辑文件，并将更改实时保存到本地文件系统中。这个功能对于想要快速迭代和测试代码更改的开发者来说是一个巨大的福音。

工作区的概念和设置

工作区允许你将在开发者工具中所做的更改映射到本地文件，这意味着你可以直接在开发者工具中编辑代码，并且更改会自动保存到本地文件中。这样，你就不需要在外部编辑器和开发者工具之间来回切换，从而提高工作效率。

为了设置工作区，你需要在本地运行一个 HTTP 服务器，并且在 Chrome 中打开你的本地网站。然后，在开发者工具的 “源代码/来源” 面板中，切换到工作区创个，在工作区添加一个文件夹。

Chrome 会要求你授权访问本地文件系统，一旦完成，你就可以在 “源代码/来源” 面板中看到本地文件与网络资源之间的映射。

点击“允许”按钮以授予开发者工具对目录进行读取和写入的权限后，可以看到一些文件旁边有一个绿点，这些绿点表示开发者工具已在页面的网络资源与工作区源码文件之间建立了映射。

CSS 和 JavaScript 的实时编辑

在工作区中，你可以直接编辑 CSS 和 JavaScript 文件。当你在 “源代码/来源” 面板中更改样式时，这些更改会实时反映在本地的 CSS 文件中。同样，你也可以在 “源代码/来源” 面板中编辑 JavaScript 文件，并保存更改到本地文件系统。
例如，在chrome开发者工具的“源代码/来源”窗口中，修改了某一文件的CSS样式，将color的值从red改为blue，并按Ctrl+S保存后，会发现代码源文件也会发生改变。

HTML 文件的编辑

虽在 “元素” 面板中直接编辑 DOM 并不会影响本地 HTML 文件。

在 “源代码/来源” 面板中打开 HTML 文件并进行编辑。更改并保存后，当你刷新页面时，更改会保留下来，因为它们已经被写入到了本地文件中。

工作区的限制和相关功能

工作区的一个限制是，如果你使用的框架对源代码进行了优化，可能会需要源代码映射来将更改正确地映射回原始源代码。（请参考上一章节：Chrome 开发者工具 第十九章（源代码映射Source Maps））
此外，开发者工具还提供了 “本地替换” 功能，它允许你模拟 Web 内容或请求标头，这在你需要快速测试更改而不关心如何将更改映射到源代码时非常有用。

结论

工作区是 Chrome 开发者工具中一个强大的特性，它极大地简化了前端开发和调试的工作流程。通过允许开发者直接在浏览器中编辑和保存文件，它减少了开发者在不同工具之间切换的需要，使得开发过程更加流畅和高效。