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

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

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

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

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

"资料"你找错地方了。

它不在“本地存储”下面，而是在“帧”下面:

上面的截图显示了原始样式与devtools中所做的新修改的差异。您可以右键单击左侧窗格中的项目并将其保存回磁盘。

这里是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.

Tincr Chrome扩展更容易安装(不需要运行节点服务器)，还附带LiveReload一样的功能开箱即用!这就是双向编辑!：）

锡。cr的网站

Chrome网络商店链接

安迪的博客文章

仅供参考，如果您使用内联样式或直接修改DOM(例如添加一个元素)，工作区不能解决这个问题。这是因为DOM存在于内存中，并且没有与DOM的活动状态相关联的实际文件。

为此，我喜欢从控制台获取dom的“之前”和“之后”快照: 复制(document.getElementsByTagName (html) [0] .outerHTML)

然后我把它放在一个diff工具中来查看我的更改。

全文:https://medium.com/@theroccob/get- coded -out- chrome.devtools -and-into your-- defaf5651b4a