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

Export CSS changes from inspector (webkit, firebug, etc)

提问by hookedonwinter

When I'm working with CSS, I'll often test in a browser - say, Chrome - right click an element, click Inspect Element, and edit the CSS right there. The use of arrow keys to change things like margin and padding makes lining things up super easy.

当我使用 CSS 时，我经常在浏览器中进行测试——比如 Chrome——右键单击一个元素，单击“检查元素”，然后在那里编辑 CSS。使用箭头键来更改边距和填充等内容使排列变得非常容易。

It's not too hard to then take those changes and apply them to the CSS file, but it would be cool if I could just right click the selector in the inspector and select "export" or "copy", and have the contents available in my clipboard.

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

Does something like this exist?

这样的东西存在吗？

采纳答案by Nicholas Zographos

I have found the answer to this, at least as of Chrome v14.

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

While in the Elements section, just click on the "filename:linenumber" link next to the CSS rules. The CSS file that shows up will contain all of the modifications.

在 Elements 部分，只需单击 CSS 规则旁边的“filename:linenumber”链接。显示的 CSS 文件将包含所有修改。

This place exactly:

这个地方正是：

回答by Chris MacDonald

In Chrome, you can right-click a CSS file in the Sources tab and click "Local Modifications"

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

This shows you all of your local changes. Each revision is timestamped and you can rollback to any previous revision.

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

See the Live Editing and Revision Historysection of this tutorial.

请参阅本教程的实时编辑和修订历史部分。

回答by FelipeAls

Firediffis a Firebug add-on that tracks changesdone in Firebug. It logs everything you'll do in the HTML pane (great) but also your brief use of the Web Developer Toolbar extension (not so great), say Shift-Ctrl-F to obtain a font-size information in px.

Firediff是一个 Firebug 插件，用于跟踪在 Firebug 中所做的更改。它记录了您将在 HTML 窗格中执行的所有操作（很棒）以及您对 Web Developer Toolbar 扩展的简短使用（不太好），比如 Shift-Ctrl-F 以获取 px 中的字体大小信息。

I have seen a Firebug extension in Chrome but didn't test it, I use Firediff with Firefox.

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

回答by Jarred Sumner

I built a Chrome extension that does exactly this.

我构建了一个 Chrome 扩展程序来做到这一点。

It's called StyleURL- it takes whatever CSS changes you made in Chrome Inspector and outputs valid CSS as the diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

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

Here's an example where I added "padding-bottom: 50px" to this page:

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

It's open-source and on GitHub too: https://github.com/Jarred-Sumner/styleurl-extension

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

回答by Adrian B

In Chrome there is also the Changestab in the console drawer that displays all the modifications of CSS. It's not an export, but at least it is very convenient to quickly grasp what has changed.

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

回答by Bryan Downing

I've suggested this product on SO before (I'm not affiliated with them in any way).

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

http://www.skybound.ca/

http://www.skybound.ca/

Excellent product. Sounds like exactly what you're looking for and much more.

优秀的产品。听起来正是您正在寻找的东西等等。

EDIT:Several other answers here have mentioned Google Chrome's ability to link to your local files (which is very very cool). Check out the other answers!

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

回答by Alexander Pavlov

If you edit external CSS, then you can drag its latest revision out of the Resources panel into any text editor that supports DnD (see http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/, the "Persisting Changes" section for more detail.) You can also revert your CSS changes to any earlier version of the stylesheet resource (in the right-click popup menu of any stylesheet revision.)

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

回答by Andrew Craswell

As mentioned by cloudworks, the answer to this has changed. This can now be accomplished rather well by the Chrome DevTools Autosaveextension. This tool tracks CSS and JavaScript changes made within the Chrome Developer Tools console, and saves them back to local files. For instructions to install and setup the extension, please refer to the guide written by @addyosmanion his blog, here.

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

There is also a handy screencastwhich details the extension rather well.

还有一个方便的截屏视频，其中详细介绍了扩展程序。

回答by Giorgio Tempesta

With Workspacesyou can have your CSS saved as you type them in your inspector (in Chrome). The problem is that every change is automatically saved and there's no way to disable this feature, as pointed in http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/and Disable automatic saving of CSS changes in Chrome Developer Tools.

使用工作区，您可以在检查器（在 Chrome 中）中输入 CSS 时保存它们。问题是每个更改都会自动保存，并且无法禁用此功能，如http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/和在 Chrome 开发者工具中禁用 CSS 更改的自动保存.

回答by Abraham Brookes

If you're using the Firefox stock dev tools you can edit the css directly in the tools dialog - click the CSS viewport button (that's the button at the top with the {}symbol) and edit your css directly. It will update in realtime in the browser and when you're done just copy-paste it directly into your css file. Nice!

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