从检查器(webkit,firebug等)导出CSS更改
hoo*_*ter 97 css webkit web-inspector google-chrome-extension
当我使用CSS时,我经常在浏览器中测试 - 比如说Chrome,右键单击一个元素,单击Inspect Element,然后在那里编辑CSS.使用箭头键来改变边距和填充等内容可以让事情变得非常容易.
然后将这些更改应用到CSS文件并不是很难,但如果我可以在检查器中右键单击选择器并选择"导出"或"复制",并将内容提供给我,那将会很酷.剪贴板.
这样的事情存在吗？
小智 76
我找到了答案,至少从Chrome v14开始.
在Elements部分中,只需单击CSS规则旁边的"filename:linenumber"链接.显示的CSS文件将包含所有修改.
这个地方到底是:
- 请注意,这也适用于通过"+"图标在Inspector中添加的新CSS选择器 (4认同)
Chr*_*ald 45
在Chrome中,您可以在"来源"标签中右键单击CSS文件,然后点击"本地修改"
这会显示您所有的本地更改.每个修订都带有时间戳,您可以回滚到任何以前的修订版.
请参阅本教程的实时编辑和修订历史记录部分.
在 Chrome中，控制台抽屉中还有一个Changes选项卡，显示 CSS 的所有修改。不是出口，但至少可以很方便的快速掌握发生了什么变化。
- 此答案提供了一个内置浏览器解决方案，用于查看更改，无需安装其他扩展。它以单独文件的逐项差异的形式跟踪对任何样式表（或 JS）所做的更改，并显示逐行添加、删除和单个字符更改。虽然没有导出，但它是一个比 2011 年当前最佳答案更好的解决方案。 (2认同)
Firefox 和 Chrome 现在都支持这个功能，但值得注意的是，在某些平台上，如果不是所有 Chrome 默认不显示它，你需要启用“更改”视图才能看到它（在我的 Kubuntu Linux 20.04 中它不是默认情况下），以下是启用它的方法：转到开发人员工具栏中的“自定义和控制 DevTools”按钮>“更多工具”>“更改”，然后该选项卡将出现在按钮上：
在 Firefox 中无需启用它，但如果您来自 Chrom* 世界，可能很难找到它。只需检查“检查器”选项卡右侧的最后一部分：
我之前已经建议过这个产品(我没有以任何方式与他们联系).
优秀的产品.听起来正是你正在寻找的东西以及更多.
编辑:这里的其他几个答案都提到了谷歌浏览器链接到本地文件的能力(非常非常酷).看看其他答案!
- 这里的答案在过去几年中发生了变化.Chrome DevTools现在[允许您将更改写回文件](https://developers.google.com/chrome-developer-tools/docs/settings#workspace).激动人心的时刻! (2认同)
我构建了一个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。请更新，听起来很有希望 (2认同)
| 归档时间： |
|
| 查看次数： |
51987 次 |
| 最近记录： |