当我使用 CSS 时,我经常会在浏览器中进行测试——比如 Chrome——右键单击一个元素,单击“检查元素”,然后在此处编辑 CSS。使用箭头键更改边距和填充等内容使排列变得非常容易。
然后将这些更改应用到 CSS 文件并不难,但如果我可以右键单击检查器中的选择器并选择“导出”或“复制”,并在我的剪贴板。
这样的事情存在吗?
当我使用 CSS 时,我经常会在浏览器中进行测试——比如 Chrome——右键单击一个元素,单击“检查元素”,然后在此处编辑 CSS。使用箭头键更改边距和填充等内容使排列变得非常容易。
然后将这些更改应用到 CSS 文件并不难,但如果我可以右键单击检查器中的选择器并选择“导出”或“复制”,并在我的剪贴板。
这样的事情存在吗?
我已经找到了答案,至少从 Chrome v14 开始。
在元素部分,只需单击 CSS 规则旁边的“文件名:行号”链接。显示的 CSS 文件将包含所有修改。
这个地方正好:
在 Chrome 中,您可以右键单击 Sources 选项卡中的 CSS 文件,然后单击“Local Modifications”
这将向您显示所有本地更改。每个修订都带有时间戳,您可以回滚到任何以前的修订。
Firediff是一个 Firebug 插件,用于跟踪在 Firebug 中所做的更改。它记录了您将在 HTML 窗格中执行的所有操作(很棒),还记录了您对 Web Developer Toolbar 扩展的简短使用(不是很好),例如 Shift-Ctrl-F 以获取以 px 为单位的字体大小信息。
我在 Chrome 中看到了一个 Firebug 扩展,但没有对其进行测试,我将 Firediff 与 Firefox 一起使用。
我构建了一个 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
我之前在 SO 上推荐过这个产品(我与他们没有任何关系)。
优秀的产品。听起来正是您正在寻找的东西以及更多。
编辑:这里的其他几个答案提到了谷歌浏览器链接到本地文件的能力(这非常酷)。看看其他答案!
如果您编辑外部 CSS,那么您可以将其最新版本从资源面板拖到任何支持 DnD 的文本编辑器中(参见http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/,有关更多详细信息,请参阅“持久更改”部分。)您还可以将 CSS 更改恢复到样式表资源的任何早期版本(在任何样式表修订的右键单击弹出菜单中。)
正如 cloudworks 所提到的,这个问题的答案已经改变。这现在可以通过Chrome DevTools Autosave扩展来很好地完成。该工具跟踪在 Chrome 开发者工具控制台中所做的 CSS 和 JavaScript 更改,并将它们保存回本地文件。有关安装和设置扩展的说明,请参阅@addyosmani在他的博客上写的指南,这里。
还有一个方便的截屏视频,很好地详细说明了扩展。
使用Workspaces,您可以在检查器(在 Chrome 中)中键入 CSS 时保存它们。问题是每个更改都会自动保存,并且无法禁用此功能,如http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/和禁用 Chrome 开发人员工具中 CSS 更改的自动保存.
如果您使用的是 Firefox 库存开发工具,您可以直接在工具对话框中编辑 css - 单击 CSS 视口按钮(即顶部带有{}
符号的按钮)并直接编辑您的 css。它将在浏览器中实时更新,完成后只需将其复制粘贴到您的 css 文件中即可。好的!
专门为 Safari 添加答案 - 这是可能的。
当您在检查器的样式部分中为现有的 CSS 文件编辑 CSS 时,您可以点击Cmd-S
以重新保存整个文件的更改。但是,如果您使用的是像 Sass / 预处理器 / 使用捆绑生成 CSS 等元语言,我认为这并不能真正解决这个问题,尽管 CSS 源映射可能是可能的。
当您在样式部分顶部编辑 CSSStyle Attribute
以添加内联样式(不绑定到现有 CSS 文件)时,似乎无法轻松导出所有这些更改。现在,我只是为每个元素手动复制和粘贴覆盖。
Apple 官方文档有点过时,但可以在这里找到:Web Inspector Tutorial - Editing Code to Change Your Webpage。
在 Chrome 中,您可以在 css 检查器中单击并按住 + 按钮,然后选择将更改添加到检查器样式表。它不如直接在你的css-selectors中编辑方便,但你写的都在inspector-stylesheet.css中
我的即将推出测试版的产品LIVEditor正是这样做的。
为了让您更容易理解,您可以将 Firebug 的检查器嵌入到您的文本编辑器中。
这样,在使用 Firebug 或 Webkit 的开发人员工具对其进行调整后,您不必在代码编辑器中再次手动进行更改。