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

Question

如何保存Styles panel的Google Chrome Developer Tools的CSS更改？

在工具网站上提到了we can see all change in resource panel

但是我在CSS文件上本地工作但是资源面板中没有显示更改

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

Answer 1

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

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

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

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

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

P.S。

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

Answer 2

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

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

Answer 3

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

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

设置覆盖

1. 转到来源面板。
2. 转到覆盖标签。
3. 点击选择要覆盖的文件夹。
4. 选择要将更改保存到的目录。
5. 在视口顶部，点击允许，为DevTools提供对目录的读写权限。
6. 进行更改。在下面的GIF中，您可以看到app-funnel-grid { padding: 0 2rem 2rem; overflow-x: auto; height: 100%; .board-container { align-items: stretch; background-color: white; display: inline-flex; flex-direction: row; justify-content: flex-start; padding: 0 .5rem; height: 100%; .board-column { border-right: 1px solid $gray-300; display: flex; flex-direction: column; max-height: 100%; min-width: 260px; &:last-of-type { border-right: none; } } } } .board-heading { color: $secondary; display: flex; padding: .5rem; border-bottom: 1px solid $gray-300; .count { border: 1px dotted; border-radius: 100%; display: inline-block; font-size: .85rem; margin-left: auto; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; } }; .board-body { max-height: 100%; overflow-y: auto; padding: .5rem; .card { border: none; .card-body { .card-title { display: flex; align-items: start; justify-content: space-between; } } } } .board-body { &.drag-over-border { .card { display: none; } } } .drag-handle { cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } .drag-handle:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } .drag-over-border { border: $green solid 1px; } 更改在页面加载过程中仍然存在。



覆盖如何工作

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

覆盖和工作区之间的区别

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

Answer 4

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

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

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

Answer 5

你正在查看“资源”的错误部分。

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

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

Answer 6

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

Tin.cr Website

Chrome Web Store Link

Andy's Blog Article

Answer 7

现在Chrome 18已经上周发布了所需的API，我在Chrome网上商店发布了我的chrome extension。该扩展会自动将Developer Tools中的CSS或JS更改保存到本地磁盘中。去看看吧。

Answer 8

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

为此，我喜欢在＆＃34;之前采取＃34; ＆＃34;＆＃34;＆＃34;＆＃34;来自控制台的dom快照： copy(document.getElementsByTagName('html')[0].outerHTML)

然后我将它放在差异工具中以查看我的更改。

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

Answer 9

要回答有关可以保存更改的任何扩展程序的问题的最后部分，请hotfix

它允许您将Chrome Dev Tools中的更改直接保存到GitHub。从那里你可以在GitHub上设置一个post-receive hook来自动更新你的网站。

Answer 10

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

中

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



1. 点击它，它将打开你在源面板中添加的所有CSS

2. 复制并粘贴 - 是的！

如果您已使用element.style：

您只需右键单击HTML元素，单击“编辑为HTML”，然后使用内联样式复制并粘贴HTML。

Answer 11

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

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

1）您需要一个正在运行的本地服务器，例如节点等，或者此vscode扩展将为您创建服务器：live server VSCode extension，安装它，然后运行服务器。

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

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

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

更多Edit Files With Workspaces

请注意，在样式选项卡上所做的更改不会反映在文件系统文件中。

相反，您需要转到devtools-> source-> your_folder，然后在此处进行更改并重新加载页面以查看效果。