当我使用 CSS 时，我经常会在浏览器中进行测试——比如 Chrome——右键单击一个元素，单击“检查元素”，然后在此处编辑 CSS。使用箭头键更改边距和填充等内容使排列变得非常容易。
然后将这些更改应用到 CSS 文件并不难，但如果我可以右键单击检查器中的选择器并选择“导出”或“复制”，并在我的剪贴板。
这样的事情存在吗？
问问题
61123 次
14 回答
79
我已经找到了答案，至少从 Chrome v14 开始。
在元素部分，只需单击 CSS 规则旁边的“文件名：行号”链接。显示的 CSS 文件将包含所有修改。
这个地方正好：
于 2011-10-10T17:54:50.373 回答
50
在 Chrome 中，您可以右键单击 Sources 选项卡中的 CSS 文件，然后单击“Local Modifications”
这将向您显示所有本地更改。每个修订都带有时间戳，您可以回滚到任何以前的修订。
于 2012-11-01T19:37:56.033 回答
11
Firediff是一个 Firebug 插件，用于跟踪在 Firebug 中所做的更改。它记录了您将在 HTML 窗格中执行的所有操作（很棒），还记录了您对 Web Developer Toolbar 扩展的简短使用（不是很好），例如 Shift-Ctrl-F 以获取以 px 为单位的字体大小信息。
我在 Chrome 中看到了一个 Firebug 扩展，但没有对其进行测试，我将 Firediff 与 Firefox 一起使用。
于 2010-07-28T16:53:58.473 回答
8
在 Chrome 中，控制台抽屉中还有“更改”选项卡，其中显示了 CSS 的所有修改。不是导出，但至少可以很方便的快速掌握发生了什么变化。
于 2019-11-19T08:42:43.893 回答
7
我构建了一个 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
于 2018-08-02T21:47:17.657 回答
7
Firefox 和 Chrome 现在都支持此功能，但值得注意的是，在某些平台上，如果不是所有 Chrome 默认不显示它，您需要启用“更改”视图才能看到它（在我的 Kubuntu Linux 20.04 中它不是默认情况下），您可以通过以下方式启用它：转到开发人员工具栏中的“自定义和控制 DevTools”按钮 > “更多工具” > “更改”，然后选项卡将出现在按钮上：
在 Firefox 中无需启用它，但如果您来自 Chrom* 世界，可能很难找到它。只需检查“检查器”选项卡右侧的最后一部分：
于 2020-06-27T01:08:49.163 回答
5
我之前在 SO 上推荐过这个产品（我与他们没有任何关系）。
优秀的产品。听起来正是您正在寻找的东西以及更多。
编辑：这里的其他几个答案提到了谷歌浏览器链接到本地文件的能力（这非常酷）。看看其他答案！
于 2010-08-05T02:26:55.517 回答
4
如果您编辑外部 CSS，那么您可以将其最新版本从资源面板拖到任何支持 DnD 的文本编辑器中（参见http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/，有关更多详细信息，请参阅“持久更改”部分。）您还可以将 CSS 更改恢复到样式表资源的任何早期版本（在任何样式表修订的右键单击弹出菜单中。）
于 2011-12-14T13:47:30.287 回答
4
正如 cloudworks 所提到的，这个问题的答案已经改变。这现在可以通过Chrome DevTools Autosave扩展来很好地完成。该工具跟踪在 Chrome 开发者工具控制台中所做的 CSS 和 JavaScript 更改，并将它们保存回本地文件。有关安装和设置扩展的说明，请参阅@addyosmani在他的博客上写的指南，这里。
还有一个方便的截屏视频，很好地详细说明了扩展。
于 2015-03-02T19:31:32.670 回答
2
使用Workspaces，您可以在检查器（在 Chrome 中）中键入 CSS 时保存它们。问题是每个更改都会自动保存，并且无法禁用此功能，如http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/和禁用 Chrome 开发人员工具中 CSS 更改的自动保存.
于 2015-05-03T11:56:41.087 回答
0
如果您使用的是 Firefox 库存开发工具，您可以直接在工具对话框中编辑 css - 单击 CSS 视口按钮（即顶部带有{}符号的按钮）并直接编辑您的 css。它将在浏览器中实时更新，完成后只需将其复制粘贴到您的 css 文件中即可。好的！
于 2016-05-26T08:23:29.940 回答
0
专门为 Safari 添加答案 - 这是可能的。
当您在检查器的样式部分中为现有的 CSS 文件编辑 CSS 时，您可以点击Cmd-S以重新保存整个文件的更改。但是，如果您使用的是像 Sass / 预处理器 / 使用捆绑生成 CSS 等元语言，我认为这并不能真正解决这个问题，尽管 CSS 源映射可能是可能的。
当您在样式部分顶部编辑 CSSStyle Attribute以添加内联样式（不绑定到现有 CSS 文件）时，似乎无法轻松导出所有这些更改。现在，我只是为每个元素手动复制和粘贴覆盖。
Apple 官方文档有点过时，但可以在这里找到：Web Inspector Tutorial - Editing Code to Change Your Webpage。
于 2018-04-07T18:49:00.937 回答
0
在 Chrome 中，您可以在 css 检查器中单击并按住 + 按钮，然后选择将更改添加到检查器样式表。它不如直接在你的css-selectors中编辑方便，但你写的都在inspector-stylesheet.css中
于 2019-04-21T22:38:36.287 回答
-1
我的即将推出测试版的产品LIVEditor正是这样做的。
为了让您更容易理解，您可以将 Firebug 的检查器嵌入到您的文本编辑器中。
这样，在使用 Firebug 或 Webkit 的开发人员工具对其进行调整后，您不必在代码编辑器中再次手动进行更改。
于 2012-07-11T09:42:16.517 回答