是否有任何浏览器/附加组件在 Inspect Element 中提供仅显示突出显示已修改和新添加的值的选项?

问题描述

作为网页设计师,您可能每天使用浏览器(Firefox / Chrome)检查元素工具比浏览更多。

有时要获得所需的结果非常复杂,CSS 更改和通过浏览器检查元素工具添加的新值不仅适用于一个元素(div、p、span 等)。完成所需的结果后,您是否可以选择突出显示修改的值并使用不同颜色或在单独的菜单/部分中添加的新值?。

例如:

  1. 以黄色背景显示修改后的值。
  2. 以红色背景显示新值。

问题:是否有任何浏览器/附加组件在 Inspect Element 中提供仅显示(突出显示)已修改和新添加的值的选项?

当然,如果有一个单独的菜单/部分来分别显示所有已修改和插入的新值,那就太好了。

解决方法

我简直不敢相信,但 Firefox 中的 Inspect Element 正是我想要的:

1.突出显示修改过的和新增的值

2.复制修改后的规则

enter image description here

现在您可以同时设置多个 div/span/段落、伪元素等的样式,直到您获得所需的结果。之后您可以从一个地方复制不同元素中所有修改过的规则,只需点击 1 次

如果您将 Inspect Element for CSS 用作右侧的小面板/侧边栏(我的使用方式)=> 请参见图片中的“蓝色箭头”(单击该黑色箭头和菜单“更改”将出现)。

希望能帮到其他人 Firefox 的这个伟大的功能(隐藏的很好),这会为你节省很多时间!

我在 Chrome 浏览器中没有发现这个功能(或者比 Firefox 隐藏得更好)。

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...