如何保存样式面板的CSS谷歌Chrome开发工具?
在工具的网站上提到，我们可以在资源面板中看到所有的变化
但我在本地工作的CSS文件，但更改没有显示在资源面板为我
顺便问一下，你知道任何插件，工具，以保存css更改Chrome开发工具? 我知道Firebug有很多https://stackoverflow.com/search?q=firebug+CSS+changes+save
当前回答
仅供参考，如果您使用内联样式或直接修改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/
我知道这是一个老帖子，但我这样保存它:
转到资源窗格。 单击Show Navigator(在左侧显示导航器窗格)。 单击所需的CSS文件。(它将在编辑器中打开，包括您所做的所有更改) 右键单击编辑器并保存更改。
您还可以看到本地修改，以查看您的修订，非常有趣的功能。 还可以使用脚本。
2019年更新:由于其他答案有点过时，我将在这里添加更新的答案。在最新版本中，不需要将chrome文件夹映射到文件系统。
所以，假设我有一个网页文件夹包含HTML,CSS,JS文件在桌面上，我想要更新当我在chrome:=更改
1)你需要一个运行的本地服务器，如节点等，或者这个vscode扩展为你创建服务器:live服务器vscode扩展，安装它，运行服务器。
2)从运行的本地服务器加载HTML页面。
3)打开devTools->Sources->Filesystem->将文件夹添加到工作区
4)添加运行本地服务器时使用的文件夹。没有额外的映射需要在最新的chrome!哈!
更多关于它编辑文件与工作区
注意，在styles选项卡上所做的更改不会反映在文件系统文件上。 相反，你需要去devtools->source->your_folder，然后在那里进行更改并重新加载页面以查看效果。
要回答你关于任何可以保存更改的扩展的问题的最后一部分，有一个修补程序
它允许您将更改从Chrome开发工具直接保存到GitHub。从那里，你可以在GitHub上设置一个接收后的钩子来自动更新你的网站。
只要你没有在element.style中插入CSS:
转到您已添加的样式。应该有一个链接说inspector-stylesheet:
单击它，它将打开您在源代码面板中添加的所有CSS 复制粘贴——耶!
如果你一直在使用element.style:
您只需右键单击HTML元素，单击Edit as HTML，然后复制并粘贴带有内联样式的HTML。
