使用开发人员工具动态查看修改后的 CSS

使用开发人员工具动态查看修改后的 CSS

在开发人员工具上,您可以动态修改 CSS,并且显示会立即改变。

但如果你点击查看页面源代码,你将获得文档的原始 css

通过命令或插件获得该 CSS 将会非常棒。

答案1

如何使用开发人员工具动态查看修改后的 CSS?

火狐

您在规则视图中所做的编辑将反映在样式编辑器,反之亦然。

来源Firefox 开发人员工具检查和编辑 CSS

要打开样式编辑器,请从“Web 开发人员”菜单(在 Mac 上是“工具”菜单的子菜单)中选择“样式编辑器”选项。工具箱将出现在浏览器窗口的底部,其中样式编辑器已激活:

样式编辑器

来源Firefox 开发者工具样式编辑器


铬合金

持久更改

  • 修改外部样式表规则后,资源面板中相应的资源文本会更新,并且此类样式表资源的修订历史记录会存储起来,直到 DevTools 窗口关闭。

  • 激活资源面板,在资源树中找到 tutorial.css。注意树节点是可以展开的。单击节点标题旁边的箭头,您将看到上面所做的所有资源修改。

  • 选择任意修订版本即可查看其与原始样式表资源的差异(按行突出显示)。

    在此处输入图片描述

  • 您可以将样式表修订节点拖放到大多数文本编辑器中以导出修订内容。

来源编辑样式

相关内容