现在Chrome 18已经在上周发布了所需的api，我在Chrome网络商店中发布了我的Chrome扩展。扩展自动保存CSS或JS在开发工具到本地磁盘的更改。去看看吧。

只要你没有在element.style中插入CSS:

转到您已添加的样式。应该有一个链接说inspector-stylesheet:

单击它，它将打开您在源代码面板中添加的所有CSS 复制粘贴——耶!

如果你一直在使用element.style:

您只需右键单击HTML元素，单击Edit as HTML，然后复制并粘贴带有内联样式的HTML。

新版本的Chrome有一个叫做工作区的功能来解决这个问题。您可以定义web服务器上的哪些路径对应于系统上的哪些路径，然后使用ctrl-s编辑并保存。

参见:http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

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

从Chrome 65开始，本地覆盖是一个新的，轻量级的方式来做到这一点。这是一个与工作区不同的特性。

设置覆盖

进入资源面板。 进入覆盖标签。 单击“为覆盖选择文件夹”。 选择要将更改保存到的目录。 在视图的顶部，单击允许，给予DevTools对目录的读写访问权。 做出你的改变。在下面的动图中，你可以看到背景:玫瑰棕色的变化在页面加载中持续存在。

重写如何工作

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

重写和工作区之间的区别

Workspaces is designed to let you use DevTools as your IDE. It maps your repository code to the network code, using source maps. The real benefit is if you're minifying your code, or using code that needs to get transpiled, like SCSS, then the changes you make in DevTools (usually) get mapped back into your original source code. Overrides, on the other hand, let you modify and save any file on the web. It's a good solution if you just want to quickly experiment with changes, and save those changes across page loads.

我知道这是一个老帖子，但我这样保存它:

转到资源窗格。 单击Show Navigator(在左侧显示导航器窗格)。 单击所需的CSS文件。(它将在编辑器中打开，包括您所做的所有更改) 右键单击编辑器并保存更改。

您还可以看到本地修改，以查看您的修订，非常有趣的功能。 还可以使用脚本。

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

导航到开发人员工具的Sources面板，右键单击左侧面板(列出文件的地方)并选择将文件夹添加到工作区。通过单击Elements面板中所选元素的每个CSS规则右上方的样式表，可以快速地在Sources面板中找到样式表。

添加文件夹后，你必须让Chrome访问该文件夹。 接下来，需要将网络资源映射到本地资源。

重新加载页面后，Chrome现在加载映射文件的本地资源。为了让事情变得更简单，Chrome只显示本地资源(所以你不会对你是编辑本地资源还是网络资源感到困惑)。要保存更改，请在编辑文件时按CTRL + S。

p.s.

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