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

【问题标题】：How to save CSS changes of Styles panel of Chrome Developer Tools?如何保存 Chrome 开发者工具样式面板的 CSS 更改？
【发布时间】：2011-10-14 04:23:52
【问题描述】：

如何保存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

【问题讨论】：

现在有一个用于 DevTools 扩展的 API，用于接收有关正在更改的资源的通知——因此您可以创建一个将与您选择的 IDE 集成的扩展，或者只是将资源内容发布到 WebDAV 服务器： developer.chrome.com/extensions/…
我认为这个问题及其答案已经过时，因为 Chrome 已经将其修改后的 CSS 保存功能移至“源”面板。该功能相当令人困惑，并且有些误导：我在相关的 Stack Overflow 帖子中详细探讨了 Chrome 的这种修改后的 CSS 保存功能：stackoverflow.com/questions/16005435/…
Export CSS changes from inspector (webkit, firebug, etc)的可能重复
Local Overrides 是一种新方法，从 Chrome 65 开始。覆盖是与工作区不同的功能。

标签： html css google-chrome google-chrome-extension google-chrome-devtools

【解决方案1】：

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

导航到开发者工具的 Sources 面板，右键单击左侧面板（文件在其中列出），然后选择 Add Folder to Workspace。 您可以通过单击“元素”面板中选定元素的每个 CSS 规则右上角的样式表来快速访问“源”面板中的样式表。

添加文件夹后，您必须授予 Chrome 访问该文件夹的权限。
接下来，需要将网络资源映射到本地资源。

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

附言

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

【讨论】：

我只想在我的主题样式表的底部添加我在实时编辑我的 CSS 时提出的任何 CSS 差异。而已。有没有办法想出一个我可以复制和粘贴的 CSS 的“差异”？看到另一个问题：stackoverflow.com/questions/21871535/… 背景故事是我正在编辑属于某个主题的 CSS，我只能在样式表的底部添加 CSS，不能编辑上面的任何内容。如果某人只能将 custom.css 添加到具有其 CSS 覆盖的网站，则同样适用。
paul-irish，对如何使 diff/patch 仅对本地更改 CSS（无远程更改）感兴趣。 SaveAs 并没有真正解决灵活性和加速的问题...
现在chrome正在自动保存本地文件（不按CTRL + S）如何防止？
对我不起作用。将 CSS 文件保存在本地文件夹中，将远程映射到本地并重新加载后，所有更改都消失了。 :( 在元素面板中编辑本地文件并将文件保存在源中也不会保留我的更改。
Chrome 46 检查器中似乎存在一个错误，即在重新加载页面时，只有在“源”面板中更改映射的本地文件时才会重新应用映射的本地文件。您甚至可以在外部编辑器中更改它，但您必须在 Sources 面板中打开并聚焦它。

【解决方案2】：

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

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

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

【讨论】：

对我来说，Frames 内也没有任何东西。我又添加了一张有问题的屏幕截图
我不确定您的“框架”如何为空。这听起来很破碎。在 Canary 版本中试试这个（您可以将它与当前版本一起安装）：tools.google.com/dlpage/chromesxs
Canary 无法打开。我还找到了这个解决方案justin.my/2011/04/why-my-google-chrome-canary-cannot-run，但它仍然无法正常工作。安装完成后我收到此消息k.min.us/iefbE2.jpg
截至本周末（2012 年 5 月 21 日），我相信此解决方案不再有效。我曾经做过与您展示的相同的事情来编写大块 new css（不是旧的或编辑的）。但是现在，至少对我而言，单击该 HTML 文件只会显示原始 HTML，而不会显示新的 CSS 规则。它仍然对您有用吗？如果没有，您是否有新的解决方案来实现这一目标？
这在 Chrome 48 中也不适合我。无论如何还要这样做？

【解决方案3】：

现在 Chrome 18 已于上周发布，包含所需的 API，我在 Chrome 网上商店发布了我的 chrome extension。该扩展程序自动将开发人员工具中的 CSS 或 JS 更改保存到本地磁盘中。去看看吧。

【讨论】：

【解决方案4】：

Tincr Chrome 扩展更易于安装（无需运行节点服务器）并且还带有 LiveReload 之类的开箱即用功能！谈论双向编辑！ :)

Tin.cr Website

Chrome Web Store Link

Andy's Blog Article

【讨论】：

像 browsersync.io 这样的开源工具要好得多，支持所有现代浏览器并提供更多功能

【解决方案5】：

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

转到源窗格。
单击显示导航器（显示左侧的导航器窗格）。
单击所需的 CSS 文件。（它将在编辑器中打开，包含您所做的所有更改）
右键单击编辑器并保存更改。

你也可以通过Local Modifications查看你的修改，非常有趣的功能。也可以使用脚本。

【讨论】：

我找不到“显示导航器”
@NickyLarson，我编辑了我的答案，包括这个按钮在哪里。
再次阅读原始问题。他不是在编辑 CSS 文件。他正在元素面板的样式选项卡中进行更改。

【解决方案6】：

要回答您关于任何可以保存更改的扩展的问题的最后一部分，hotfix

它允许您将更改从 Chrome 开发工具直接保存到 GitHub。从那里你可以在 GitHub 上设置一个 post-receive 挂钩来自动更新你的网站。

【讨论】：

【解决方案7】：

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

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

【讨论】：

我认为 OP 想看看他在 Elements 面板的 Styles 选项卡中所做的更改。这些更改不一定与特定的源文件相关联。

【解决方案8】：

仅供参考，如果您使用内联样式或直接修改 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

【讨论】：

【解决方案9】：

只要你没有在 `element.style` 中粘贴 CSS：

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

点击它，它将打开您在源面板中添加的所有 CSS
复制并粘贴它 - 耶！

如果您已经使用过`element.style`：

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

【讨论】：

如果你找不到那个inspector-stylesheet，因为你在dom中搜索时迷路了，只需Ctrl+P（或CMD+P），同时DevTools专注并开始编写“inspec”.. .它会立即弹出，然后输入。 i.imgur.com/WSWcbh8.png

【解决方案10】：

这里是 DevTools 技术作家和开发者倡导者。

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

设置覆盖

转到来源面板。
转到覆盖标签。
单击选择要覆盖的文件夹。
选择要将更改保存到的目录。
在您的视口顶部，单击允许以授予 DevTools 对该目录的读写权限。
进行更改。在下面的 GIF 中，您可以看到 background:rosybrown 更改在页面加载时仍然存在。

覆盖的工作原理

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

覆盖和工作区的区别

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

【讨论】：

这行得通，但还是太复杂了。如果您只能为当前会话启用此功能，我会更喜欢。恕我直言，像“保留当前会话的资源更改”这样的复选框将更适合 Web 开发人员的工作流程。 Web 开发人员在日常业务中不需要持续更改，如果您忘记删除这些覆盖并在几周后返回，甚至可能会导致额外的头痛。覆盖对最终用户来说很好 - 不适用于调试。仍然赞成。
我同意其他评论。它根本不直观，也不会保存所有更改，因此并没有那么有用。我们最好只编写一个小的 chrome 扩展来监听任何更改并保存它们。那就是如果有一个 API 或我们可以挂钩的流程......还没有查到。
对不起，先生，liveSCSS 不是已弃用且不再开发了吗？参考stackoverflow.com/a/57622797/10189759
@Kayce Basques 开发 chrome 扩展怎么样？当您注入样式表（和 js）时，所有这些功能都不起作用，对吧？这种开发的任何解决方案（加速从 chrome 开发工具到本地扩展源文件的 css/js 更新）。谢谢

【解决方案11】：

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

所以，假设我在桌面上有一个包含 HTML、CSS、JS 文件的 web 文件夹，当我在 chrome 中进行更改时我想更新它：=

1) 你需要一个运行的本地服务器，比如 node 等，或者这个 vscode 扩展为你创建服务器：live server VSCode extension，安装它，运行服务器。

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

3) 打开 devTools->Sources->Filesystem->将文件夹添加到工作区

4) 添加用于运行本地服务器的文件夹。在最新的 chrome 中不需要额外的映射！哒哒！

更多信息Edit Files With Workspaces

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

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

【讨论】：

但是 OP 特别询问了在样式选项卡中所做的更改...

只要你没有在 element.style 中粘贴 CSS：

如果您已经使用过element.style：

设置覆盖

覆盖的工作原理

覆盖和工作区的区别

只要你没有在 `element.style` 中粘贴 CSS：

如果您已经使用过`element.style`：