如何保存Chrome开发者工具的“样式”面板中的CSS更改？

如何保存Google Chrome开发者工具的“样式”面板的CSS更改？

在工具的网站上提到我们可以在资源面板中看到所有更改

但是我在本地处理CSS文件，但是对我来说，更改没有显示在“资源”面板中

顺便说一句，您是否知道任何可保存Chrome开发者工具的CSS更改的插件和工具？ 我知道Firebug有很多https://stackoverflow.com/search?q=firebug+CSS+changes+save

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

• 导航到“开发人员工具”的“源”面板，在左面板（列出文件的位置）上单击鼠标右键，然后选择“ 将文件夹添加到工作区”。通过单击“每个元素”面板中所选元素的每个CSS规则右上方的样式表，可以快速进入“源”面板中的样式表。

• 添加文件夹后，您必须授予Chrome访问该文件夹的权限。

• 接下来，您需要将网络资源映射到本地资源。

• 重新加载页面后，Chrome现在会加载映射文件的本地资源。为简化起见，Chrome仅向您显示本地资源（因此您对正在编辑本地资源还是网络资源不会感到困惑）。要保存更改，请CTRL + S在编辑文件时按。

ps

您可能需要打开映射的文件并开始编辑，以使Chrome应用本地版本（日期为201604.12）。

DevTools技术作家和开发者在这里提倡。

从Chrome 65开始，Local Overrides是一种新的轻量级方法。这是与工作区不同的功能。

设置替代

1. 转到“ 源”面板。
2. 转到替代标签。
3. 单击选择替代文件夹。
4. 选择要将更改保存到的目录。
5. 在视口顶部，单击允许以授予DevTools对目录的读写权限。
6. 进行更改。在下面的GIF中，您可以看到background:rosybrown更改在页面加载中仍然存在。

替代如何工作

在DevTools中进行更改时，DevTools会将更改保存到计算机上文件的已修改副本中。重新加载页面时，DevTools将提供修改后的文件，而不是网络资源。

覆盖和工作空间之间的区别

Workspaces旨在允许您将DevTools用作IDE。它使用源映射将您的存储库代码映射到网络代码。真正的好处是，如果您要缩减代码或使用需要转译的代码（例如SCSS），那么您在DevTools中所做的更改（通常）通常会映射回原始源代码。另一方面，通过覆盖，您可以修改和保存Web上的任何文件。如果您只是想快速尝试更改，并在页面加载中保存这些更改，那么这是一个很好的解决方案。

Chrome的新版本具有一项称为工作区的功能，可以解决此问题。您可以定义Web服务器上的哪些路径与系统上的哪些路径相对应，然后仅使用ctrl-s进行编辑和保存。

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

我知道这是一个旧帖子，但是我这样保存：

1. 转到“源”窗格。
2. 单击显示导航器（以在左侧显示导航器窗格）。
3. 单击所需的CSS文件。（它将在编辑器中打开，其中包含您所做的所有更改）
4. 右键单击编辑器，然后保存更改。

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

您在“资源”的错误部分中查找。

它不在“本地存储”下，而在“框架”下：

上面的屏幕截图显示了原始样式与devtools中进行的新修改的区别。您可以右键单击左窗格中的项目，然后将其保存回磁盘。

Tincr Chrome扩展程序易于安装（无需运行节点服务器），并且还具有LiveReload之类的功能！谈论双向编辑！:)

Tin.cr网站

Chrome网上应用店链接

安迪的博客文章

既然上周发布了带有所需API的Chrome 18，我就在Chrome网上商店中发布了chrome扩展程序。该扩展程序会自动将Developer工具中CSS或JS中的更改保存到本地磁盘中。去看看吧。

仅供参考，如果您使用内联样式或直接修改DOM（例如添加元素），则工作区无法解决此问题。这是因为DOM驻留在内存中，并且没有与DOM的活动状态关联的实际文件。

为此，我想从控制台拍摄dom的“之前”和“之后”快照： copy(document.getElementsByTagName('html')[0].outerHTML)

然后，将其放入差异工具中以查看更改。

全文：https : //medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

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

它使您可以将Chrome开发工具中的更改直接保存到GitHub。从那里，您可以在GitHub上设置接收后挂钩，以自动更新您的网站。

只要您没有将CSS粘贴在element.style：

1. 转到您添加的样式。应该有一个链接说检查员样式表：

2. 单击该按钮，它将打开您在“源”面板中添加的所有CSS。

3. 复制并粘贴-是的！

如果您一直在使用element.style：

您可以右键单击HTML元素，单击“编辑为HTML”，然后复制和粘贴带有内联样式的HTML。

2019年更新：由于其他答案有些过时，我将在此处添加更新的答案。在最新版本中，无需将chrome文件夹映射到文件系统。

因此，假设我在桌面上有一个包含HTML，CSS，JS文件的Web文件夹，当我在chrome中进行更改时，我想对其进行更新：=

1）您需要一个正在运行的本地服务器，例如node等，或者此vscode扩展会为您创建服务器：实时服务器VSCode扩展，安装它，然后运行服务器。

2）从运行本地服务器加载chrome中的html页面。

3）打开devTools-> Sources-> Filesystem-> Add文件夹到工作区

4）添加用于运行本地服务器的文件夹。最新的chrome浏览器无需其他映射！-

更多有关使用工作区编辑文件的信息

请注意，在“样式”选项卡上所做的更改将不会反映在文件系统文件中。 相反，您需要转到devtools-> source-> your_folder，然后在此处进行更改并重新加载页面以查看效果。