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

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

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

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

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

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

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

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

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

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

p.s.

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

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

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

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

要回答你关于任何可以保存更改的扩展的问题的最后一部分，有一个修补程序

它允许您将更改从Chrome开发工具直接保存到GitHub。从那里，你可以在GitHub上设置一个接收后的钩子来自动更新你的网站。

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

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

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

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

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