问如何在Chrome开发者工具的样式面板中保存CSS更改？

EN

您可以从Chrome Dev工具本身保存您的CSS更改。Chrome现在允许你添加本地文件夹到你的工作区。在允许Chrome访问该文件夹并将该文件夹添加到本地工作区后，您可以将web资源映射到本地资源。

• 导航到开发人员工具的源代码面板，在左侧面板(列出文件的位置)中单击鼠标右键，然后选择将文件夹添加到工作区。通过单击元素面板中选定元素的每个CSS规则右上角的样式表，可以快速转到源面板中的样式表。

​

​

• 添加文件夹后，您必须授予Chrome访问该文件夹的权限。

​

• 接下来，您需要将网络资源映射到本地资源。

​

​

• 重新加载页面后，Chrome现在加载映射文件的本地资源。为了简单起见，Chrome只向你显示本地资源(这样你就不会混淆你是在编辑本地资源还是在编辑网络资源)。要保存更改，请在编辑文件时按CTRL + S。

附注：

您可能需要打开映射文件并开始编辑，以使Chrome应用本地版本(日期201604.12)。

这里是DevTools技术作家和开发者的倡导者。

从Chrome65开始，Local Overrides是一种新的、轻量级的方式。这是一个与工作空间不同的功能。

设置覆盖

1. 转到Sources面板。
2. 转到Overrides选项卡。
3. 单击为directory.
4. Make选择要将更改保存到的目录的文件夹。
5. 在视口顶部，单击允许，授予

对DevTools所做更改的读写访问权限。在下面的GIF中，您可以看到background:rosybrown更改在页面加载过程中持续存在。

​

​

重写的工作原理

当您在DevTools中进行更改时，DevTools会将更改保存到计算机上文件的修改副本中。重新加载页面时，DevTools将提供修改后的文件，而不是网络资源。

重写和工作区之间的区别

Workspace旨在让您使用DevTools作为您的集成开发环境。它使用源图将您的存储库代码映射到网络代码。真正的好处是，如果您正在缩小代码，或者使用需要转换的代码，例如SCSS，那么您在DevTools中所做的更改(通常)会映射回原始源代码。另一方面，覆盖允许您修改和保存web上的任何文件。如果您只是想快速尝试更改，并在页面加载时保存这些更改，那么这是一个很好的解决方案。

新版本的Chrome有一个叫做工作区的特性来解决这个问题。您可以定义with服务器上的哪些路径与系统上的哪些路径相对应，然后仅使用ctrl-s进行编辑和保存。

请参阅：http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/