我可以从 Google DevTools Element > Styles 选项卡保存 CSS 样式更改，还是必须转到 Sources 选项卡？答案

【问题标题】：Can I save CSS style changes from the Google DevTools Element > Styles tab, or must I go to the Sources tab?我可以从 Google DevTools Element > Styles 选项卡保存 CSS 样式更改，还是必须转到 Sources 选项卡？
【发布时间】：2016-12-16 06:40:08
【问题描述】：

今天我了解了 Google Chrome 设置工作区并将其映射到本地资源的能力。这在Sources 选项卡中完美运行，但我希望能够在Elements > Styles 选项卡中编辑css，以便我可以在进行更改时看到更改。否则我不妨将它们复制到我的编辑器中，因为我必须重新加载页面才能看到更改。

是否可以从Elements 选项卡保存更改？我想要类似于 Chrome DevTools Autosave 的功能，如果它已经内置在 Chrome 中的话。

这与Chrome Workspaces - Saves changes in Sources tab but not Elements 的问题相同，但没有一个解决方案适合我。

【问题讨论】：

标签： css google-chrome google-chrome-devtools autosave

【解决方案1】：

新的、实验性的 Workspaces 2.0 以您想要的方式处理它。

下载Chrome Canary。
Enable DevTools Experiments。
打开开发者工具。
打开Command Menu。
输入Settings，然后按Enter。
转到实验标签。
启用持久性 2.0。
重新启动 Chrome。

【讨论】：

我有金丝雀，但我没有看到“实验”选项卡或任何关于持久性的信息。只有首选项、工作区、黑盒、设备、节流和快捷方式。
我通过首先在chrome://flags/ 启用“开发人员工具实验”找到了 Persistence 2.0，但即使重新启动后它仍然没有为我保存。
哦，对了。忘了你必须启用实验。所以你启用了 Experiments 和 Persistence 2.0，然后重启了 Chrome，还是不行？
是的。我删除了工作区并重新开始，但现在我没有映射选项。在工作区选项卡中显示：Mappings are inferred automatically via the 'Persistence 2.0' experiment. 但是，样式并未从元素 > 样式选项卡中保存
现在默认使用“Persistence 2.0”。在东部，我在“实验”中看不到它。我遇到的问题：服务器在查询字符串中加载一个带有“缓存破坏”的静态 JS 文件。而且我需要 Chrome 用我的本地版本替换该文件，忽略任何查询字符串参数……这可能吗？

【解决方案2】：

将文件夹添加到工作区
映射到文件系统资源...
在 Elements Tab 中更改样式，然后输入 Tab 或 enter

在这些步骤之后，您的所有更改都在您的本地映射文件中。

【讨论】：

难道没有办法直接将更改导出到控制台吗？这确实是一个危险/破坏性的过程。
@robertotomás 你可以在 Elements Style 选项卡中找到你修改过的文件，然后点击，它将显示在 Source 面板中，右键单击文件，使用 Save as ... 选项导出文件.此外，您可以在控制台抽屉中找到修改历史记录，您可以恢复您的更改以恢复到之前的状态。