从检查器（webkit、firebug 等）导出 CSS 更改

Posted 2023-03-05

【中文标题】从检查器（webkit、firebug 等）导出 CSS 更改

【英文标题】：Export CSS changes from inspector (webkit, firebug, etc)

【发布时间】：2011-03-22 06:31:14

【问题描述】：

当我使用 CSS 时，我经常会在浏览器中进行测试——比如 Chrome——右键单击一个元素，单击检查元素，然后在此处编辑 CSS。使用箭头键更改边距和内边距等内容，让排列变得超级容易。

然后将这些更改应用到 CSS 文件并不太难，但是如果我可以在检查器中右键单击选择器并选择“导出”或“复制”并获得内容，那就太酷了在我的剪贴板中可用。

这样的东西存在吗？

【问题讨论】：

为此编写 Safari/Chrome 扩展应该不难。使用上下文菜单允许用户右键单击一个元素，然后获取对象的 currentStyle 属性，也许发送到剪贴板？

也许我应该先去搜索一下，然后再在这里发表评论。 ***.com/questions/162644/…

的可能重复项

不错。我很想看到一些关于 chrome / web-kit 的答案，但那里有一些很好的答案。谢谢@MiffTheFox

查看 Backfire：blog.quplo.com/2010/08/… 没试过，但听起来很有希望。

@BryanDowning 完成！那太棒了。感谢您的 ping。

【参考方案1】：

至少从 Chrome v14 开始，我已经找到了答案。

在元素部分，只需点击 CSS 规则旁边的“文件名：行号”链接。显示的 CSS 文件将包含所有修改。

就是这个地方：

【讨论】：

请注意，这也适用于通过 + 图标添加到 Inspector 中的新 CSS 选择器

这仅适用于已添加到检查器样式表的更改。它不适用于对现有类选择器的规则集所做的更改。

【参考方案2】：

在 Chrome 中，您可以右键单击 Sources 选项卡中的 CSS 文件，然后单击“Local Modifications”

这会显示您所有的本地更改。每个修订都带有时间戳，您可以回滚到任何以前的修订。

See the Live Editing and Revision History 本教程的部分。

【讨论】：

似乎你只能回滚到你最后一次引用。因此，如果您不小心刷新/关闭标签等，您将丢失更改。

这如何与 webpack 等现代捆绑器一起工作，其中您的所有 css 都捆绑到一个文件中？

我没有看到这个“本地修改”，这个答案是否过时了？

@LukePighetti 如果我打开我感兴趣的源文件 > 右键单击​​ > 本地修改，我会在 v79 (12/2019) 中看到它。这将在“控制台抽屉”上打开一个标题为“更改”的选项卡，该选项卡的左侧菜单包含我所有更改的文件。您也可以通过单击菜单省略号 > 更多工具 > 更改来访问它。

【参考方案3】：

Firediff 是一个 Firebug 插件，用于跟踪在 Firebug 中完成的更改。它记录了您将在 html 窗格中执行的所有操作（很棒），还记录了您对 Web 开发人员工具栏扩展的简短使用（不是很好），例如 Shift-Ctrl-F 以获取以 px 为单位的字体大小信息。

我在 Chrome 中看到了一个 Firebug 扩展，但没有对其进行测试，我在 Firefox 中使用 Firediff。

【讨论】：

很酷的插件。绝对让我更接近我想要的地方。等待，看看是否有更好的结果（例如，将格式化的 css 复制到剪贴板）。

【参考方案4】：

在 Chrome 中，控制台抽屉中还有 Changes 选项卡，其中显示了 CSS 的所有修改。不是导出，但至少很方便快速掌握发生了什么变化。

【讨论】：

这个答案提供了一个内置的浏览器解决方案，用于查看更改，无需安装额外的扩展。它跟踪对任何样式表（或 JS）所做的更改，作为具有单独文件的逐项差异，并显示逐行添加、删除和单个字符更改。虽然没有导出，但与 2011 年的当前最佳答案相比，它是当今更好的解决方案。

9 年后这些答案中有很多噪音，但这很容易成为最佳答案。唯一缺少的是导出差异的快速方法，这样您就可以在脚本或 IDE 中自动处理更改，而不必并排执行并手动调整样式表。

【参考方案5】：

我构建了一个 Chrome 扩展程序来实现这一点。

它被称为 StyleURL - 它采用您在 Chrome Inspector 中所做的任何 CSS 更改并输出有效的 CSS 作为差异：https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

这是一个示例，我在此页面中添加了“padding-bottom: 50px”：

它是开源的，也在 GitHub 上：https://github.com/Jarred-Sumner/styleurl-extension

【讨论】：

非常方便的工具！

所有不工作的链接都接受 github。请更新，听起来很有希望

【参考方案6】：

现在 Firefox 和 Chrome 都支持这个功能，但是值得注意的是，在某些平台上如果不是所有的 Chrome 默认不显示它，你需要启用“更改”视图才能看到它（在我的 Kubuntu Linux 20.04 中它不是默认情况下），您可以通过以下方式启用它：转到开发人员工具栏中的“自定义和控制 DevTools”按钮 >“更多工具”>“更改”，然后转到选项卡将出现在按钮上：

在 Firefox 中无需启用它，但如果您来自 Chrom* 世界，可能很难找到它。只需检查“检查器”选项卡右侧的最后一部分：

【讨论】：

谢谢 - 我目前 2020 年的 chrome 没有这个！

【参考方案7】：

我之前在 SO 上推荐过这个产品（我与他们没有任何关系）。

http://www.skybound.ca/

优秀的产品。听起来正是您正在寻找的东西，还有更多。

编辑：这里的其他几个答案都提到了谷歌浏览器链接到您的本地文件的能力（这非常酷）。查看其他答案！

【讨论】：

看起来非常棒。可惜是80美元。谢谢@Bryan，很好的发现

这里的答案在过去几年发生了变化。 Chrome DevTools 现在allows you to write your changes back to the file。激动人心的时刻！

【参考方案8】：

如果您编辑外部 CSS，则可以将其最新修订版从资源面板拖到任何支持 DnD 的文本编辑器中（请参阅http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/，“持续更改”部分了解更多详细信息。）您还可以恢复您的CSS 更改为任何早期版本的样式表资源（在任何样式表修订的右键弹出菜单中。）

【参考方案9】：

正如 cloudworks 所提到的，这个问题的答案已经改变。这现在可以通过Chrome DevTools Autosave 扩展很好地完成。该工具跟踪在 Chrome 开发者工具控制台中所做的 CSS 和 javascript 更改，并将它们保存回本地文件。有关安装和设置扩展的说明，请参阅 @addyosmani 在他的博客 here 上编写的指南。

还有一个方便的screencast 很好地详细说明了扩展。

【参考方案10】：

使用Workspaces，您可以在检查器（在 Chrome 中）中键入 CSS 时保存它们。问题是每个更改都会自动保存，并且无法禁用此功能，正如http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ 和Disable automatic saving of CSS changes in Chrome Developer Tools 中所指出的那样。

【参考方案11】：

如果您使用的是 Firefox 库存开发工具，您可以直接在工具对话框中编辑 css - 单击 CSS 视口按钮（即顶部带有 符号的按钮）并直接编辑您的 css。它将在浏览器中实时更新，完成后只需将其复制粘贴到您的 css 文件中即可。不错！

【参考方案12】：

专门为 Safari 添加答案 - 有可能。

当您在检查器的样式部分中为现有 CSS 文件编辑 CSS 时，您可以点击 Cmd-S 重新保存整个文件以及所做的更改。但是，如果您使用的是像 Sass / 预处理器 / 使用捆绑生成 CSS 等元语言，我认为这并不能真正解决这个问题，尽管使用 CSS 源映射可能是可能的。

当您在样式部分顶部的 Style Attribute 下编辑 CSS 以添加内联样式（不绑定到现有 CSS 文件）时，似乎无法轻松导出所有这些更改。现在，我只是为每个元素手动复制和粘贴覆盖。

Apple 官方文档有些过时，但可在此处找到：Web Inspector Tutorial - Editing Code to Change Your Webpage。

【参考方案13】：

在 Chrome 中，您可以在 css 检查器中单击并按住 + 按钮，然后选择将更改添加到检查器样式表。不如直接在你的css-selectors中编辑方便，但是你写的都在inspector-stylesheet.css中

【参考方案14】：

我即将推出的产品 LIVEditor 正是这样做的。

为了让您更容易理解，您可以考虑将 Firebug 的检查器嵌入到您的文本编辑器中。

这样您就不必在使用 Firebug 或 Webkit 的开发者工具调整代码编辑器之后再次手动在代码编辑器中进行更改。

【讨论】：

听起来不错。太糟糕了，它适用于 Windows。

一般来说，链接到工具或库should be accompanied by usage notes, a specific explanation of how the linked resource is applicable to the problem, or some sample code，或者如果可能的话，以上所有。