如何保存 Chrome 开发者工具样式面板的 CSS 更改？
如何保存 Google Chrome Developer Tools 的 Styles panel 的 CSS 更改？
在工具的网站上提到 we can see all change in resource panel
https://i.stack.imgur.com/qi3lY.png
但我正在本地处理 CSS 文件，但更改未显示在资源面板中
https://i.stack.imgur.com/EmG8e.jpg
https://i.stack.imgur.com/MxS2o.jpg
顺便问一下，您知道 Chrome 开发者工具的任何插件、保存 css 更改的工具吗？ 我知道 Firebug 有很多https://stackoverflow.com/search?q=firebug+CSS+changes+save
您可以从 Chrome 开发工具本身保存您的 CSS 更改。 Chrome 现在允许您将本地文件夹添加到您的工作区。在允许 Chrome 访问文件夹并将文件夹添加到本地工作区后，您可以将 Web 资源映射到本地资源。
导航到 Developer Tools 的 Sources 面板，右键单击左侧面板（列出文件的位置）并选择 Add Folder to Workspace。您可以通过单击“元素”面板中选定元素的每个 CSS 规则右上角的样式表来快速访问“源”面板中的样式表。
https://i.stack.imgur.com/FNGRh.jpg
添加文件夹后，您必须授予 Chrome 访问该文件夹的权限。
接下来，您需要将网络资源映射到本地资源。
https://i.stack.imgur.com/hZYS7.png
重新加载页面后，Chrome 现在会加载映射文件的本地资源。为了让事情更简单，Chrome 只显示本地资源（这样您就不会混淆您是在编辑本地资源还是网络资源）。要保存更改，请在编辑文件时按 CTRL + S。
ps
您可能必须打开映射文件并开始编辑以使 Chrome 应用本地版本（日期 201604.12）。
DevTools 技术作家和开发者倡导者在这里。
从 Chrome 65 开始，Local Overrides 是一种新的轻量级方式来执行此操作。这是与工作区不同的功能。
设置覆盖
转到来源面板。转到覆盖选项卡。单击为覆盖选择文件夹。选择要将更改保存到的目录。在视口顶部，单击“允许”以授予 DevTools 对该目录的读写权限。进行更改。在下面的 GIF 中，您可以看到 background:rosybrown 的变化在页面加载后仍然存在。
https://i.stack.imgur.com/l8ITN.gif
覆盖如何工作
当您在 DevTools 中进行更改时，DevTools 会将更改保存到您计算机上文件的修改副本中。当您重新加载页面时，DevTools 会提供修改后的文件，而不是网络资源。
覆盖和工作区之间的区别
Workspaces 旨在让您将 DevTools 用作您的 IDE。它使用源映射将您的存储库代码映射到网络代码。真正的好处是，如果您正在缩小代码，或者使用需要转译的代码，例如 SCSS，那么您在 DevTools 中所做的更改（通常）会映射回您的原始源代码。另一方面，覆盖允许您修改和保存网络上的任何文件。如果您只想快速尝试更改并在页面加载时保存这些更改，这是一个很好的解决方案。
新版本的 Chrome 具有一项称为工作区的功能，可以解决此问题。您可以定义网络服务器上的哪些路径对应于系统上的哪些路径，然后只需使用 ctrl-s 进行编辑和保存。
请参阅：http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
我知道这是一篇旧帖子，但我以这种方式保存它：
转到源窗格。单击显示导航器（以在左侧显示导航器窗格）。单击所需的 CSS 文件。 （它将在编辑器中打开，包含您所做的所有更改）右键单击编辑器并保存您的更改。
您还可以通过 Local Modifications 查看您的修订，非常有趣的功能。也可以使用脚本。
您正在查看“资源”的错误部分。
它不在“本地存储”下，而是在“框架”下：
https://i.stack.imgur.com/3tSsK.png
上面的屏幕截图显示了原始样式与在 devtools 中所做的新修改的差异。您可以右键单击左窗格中的项目并将其保存回磁盘。
Tincr Chrome 扩展更容易安装（无需运行节点服务器）并且还带有 LiveReload 之类的开箱即用功能！谈论双向编辑！ :)
现在 Chrome 18 已于上周发布，其中包含所需的 API，我在 Chrome 网上应用店中发布了我的 chrome extension。该扩展程序自动将开发人员工具中的 CSS 或 JS 更改保存到本地磁盘中。去看看吧。
2019 年更新：由于其他答案有点过时，我将在此处添加更新的答案。在最新版本中，无需将 chrome 文件夹映射到文件系统。
https://i.stack.imgur.com/iXtwx.png
所以，假设我在桌面中有一个包含 HTML、CSS、JS 文件的 web 文件夹，当我在 chrome 中进行更改时我想更新它：=
1）您需要一个运行的本地服务器，例如节点等，或者这个 vscode 扩展为您创建服务器：live server VSCode extension，安装它，运行服务器。
2）从正在运行的本地服务器加载 chrome 中的 html 页面。
3）打开devTools->Sources->Filesystem->Add folder to workspace
https://i.stack.imgur.com/Ih3jt.png
4) 添加用于运行本地服务器的文件夹。在最新的 chrome 中不需要额外的映射！达达！
更多关于它Edit Files With Workspaces
https://i.stack.imgur.com/ZE1Tp.png
只要您没有在 element.style 中粘贴 CSS：
转到您添加的样式。应该有一个链接说检查器样式表：
https://i.stack.imgur.com/vZ4hj.png
单击它，它将打开您在源面板中添加的所有 CSS 复制并粘贴它 - 耶！
如果你一直在使用 element.style：
您只需右键单击您的 HTML 元素，单击编辑为 HTML，然后复制并粘贴带有内联样式的 HTML。
仅供参考，如果您使用内联样式或直接修改 DOM（例如添加元素），工作区无法解决此问题。这是因为 DOM 存在于内存中，并且没有与 DOM 的活动状态相关联的实际文件。
为此，我喜欢从控制台拍摄 dom 的“之前”和“之后”快照：copy(document.getElementsByTagName('html')[0].outerHTML)
然后我将它放在一个差异工具中以查看我的更改。
https://i.stack.imgur.com/SVyIq.png
全文：https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a
要回答您关于可以保存更改的任何扩展程序的问题的最后一部分，有 hotfix
它允许您将更改从 Chrome 开发工具直接保存到 GitHub。从那里你可以在 GitHub 上设置一个 post-receive 挂钩来自动更新你的网站。
