10个解决方案
132 votes
您可以从Chrome开发者工具本身保存CSS更改。 Chrome现在允许您将本地文件夹添加到工作区。 允许Chrome访问该文件夹并将该文件夹添加到本地工作区后，您可以将Web资源映射到本地资源。
导航到Developer Tools的Sources面板，右键单击左侧面板(列出文件的位置)，然后选择Add Folder to Workspace。 通过单击“元素”面板中所选元素的每个CSS规则右上角的样式表，可以快速访问“源”面板中的样式表。
添加文件夹后，您必须授予Chrome访问该文件夹的权限。
接下来，您需要将网络资源映射到本地资源。
重新加载页面后，Chrome现在会加载映射文件的本地资源。 为简化操作，Chrome只会向您显示本地资源(因此您不必对编辑本地资源或网络资源感到困惑)。 要保存更改，请在编辑文件时按CTRL + S。
附：
您可能必须打开映射文件并开始编辑才能使Chrome应用本地版本(日期201604.12)。
Philip Ramirez answered 2019-03-22T03:01:40Z
20 votes
新版Chrome具有称为工作空间的功能，可解决此问题。 您可以定义Web服务器上的哪些路径对应于系统上的哪些路径，然后使用ctrl-s进行编辑和保存。
请参阅：[http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/]
rjmunro answered 2019-03-22T03:02:14Z
11 votes
你正在寻找“资源”的错误部分。
它不在“本地存储”下，它位于“框架”下：
上面的屏幕截图显示了原始样式与devtools中新修改的差异。 您可以右键单击左窗格中的项目并将其保存回磁盘。
thirtydot answered 2019-03-22T03:02:54Z
11 votes
DevTools技术作家和开发人员在这里提倡。
从Chrome 65开始，Local Overrides是一种新的轻量级方法。 这是与Workspaces不同的功能。
设置覆盖
转到“来源”面板。
转到“替代”选项卡。
单击“选择要覆盖的文件夹”。
选择要将更改保存到的目录。
在视口顶部，单击“允许”以授予DevTools对目录的读写访问权限。
进行更改。 在下面的GIF中，您可以看到background:rosybrown更改在页面加载过程中仍然存在。
覆盖如何工作
当您在DevTools中进行更改时，DevTools会将更改保存到计算机上文件的修改副本中。 重新加载页面时，DevTools提供修改后的文件，而不是网络资源。
覆盖和工作区之间的区别
工作区旨在让您将DevTools用作IDE。 它使用源映射将您的存储库代码映射到网络代码。 真正的好处是，如果您正在缩小代码或使用需要转换的代码(如SCSS)，那么您在DevTools中所做的更改(通常)会映射回原始源代码。 另一方面，覆盖允许您修改和保存Web上的任何文件。 如果您只是想快速尝试更改，并在页面加载中保存这些更改，这是一个很好的解决方案。
Kayce Basques answered 2019-03-22T03:04:50Z
10 votes
Tincr Chrome扩展程序更易于安装(无需运行节点服务器)，并且还附带了LiveReload功能！ 谈论双向编辑！:)
Tin.cr网站
Chrome网上应用店链接
安迪的博客文章
Jose Browne answered 2019-03-22T03:05:37Z
10 votes
我知道这是一个旧帖子，但我这样保存：
转到“来源”窗格。
单击“显示导航器”(以显示左侧的导航器窗格)。
单击所需的CSS文件。 (它将在编辑器中打开，并进行所有更改)
右键单击编辑器并保存更改。
您还可以查看本地修改以查看您的修订，非常有趣的功能。也适用于脚本。
Guilherme de Jesus Santos answered 2019-03-22T03:06:39Z
8 votes
现在Chrome 18上周发布了所需的API，我在Chrome网上商店发布了我的Chrome扩展程序。 该扩展会自动将Developer Tools中的CSS或JS更改保存到本地磁盘中。 去看看吧。
Tomi Mickelsson answered 2019-03-22T03:07:05Z
2 votes
要回答有关可以保存更改的任何扩展的问题的最后部分，有修补程序
它允许您将Chrome Dev Tools中的更改直接保存到GitHub。 从那里你可以在GitHub上设置一个post-receive hook来自动更新你的网站。
FajitaNachos answered 2019-03-22T03:07:39Z
2 votes
仅供参考，如果您正在使用内联样式或直接修改DOM(例如添加元素)，则工作空间无法解决此问题。 这是因为DOM存在于内存中，并且没有与DOM的活动状态相关联的实际文件。
为此，我喜欢从控制台获取dom的“之前”和“之后”快照：copy(document.getElementsByTagName('html')[0].outerHTML)
然后我将它放在差异工具中以查看我的更改。
全文：[https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a]
RoccoB answered 2019-03-22T03:08:27Z
0 votes
只要你没有在element.style中坚持使用CSS：
转到您添加的样式。 应该有一个链接说检查器样式表：
单击它，它将打开您在sources面板中添加的所有CSS
复制并粘贴它 - 耶！
您是否一直使用element.style：
您只需右键单击HTML元素，单击“编辑为HTML”，然后使用内联样式复制并粘贴HTML。
Ethan answered 2019-03-22T03:09:29Z
