0

As web designer maybe you use daily the browser (Firefox / Chrome) Inspect Element tool more than browsing.

Sometimes to obtain the desired result is very complicated, the CSS changes & the new values added thru browser Inspect Element tool does not apply to only one element (div, p, span etc). After you accomplish the desired result do you have the option do highlight the values that was modified and new values added with a different color or in a separately menu / section?.

For example:

  1. Display with yellow background modified values.
  2. Display with red background new values added.

Question: Does any browser / add-on have at Inspect Element the option to display (highlight) only modified and new added values?

Of course, will be so gorgeous to have a separate menu / section to display separately all modified & new values inserted.

Marius
  • 459
  • 1
  • 4
  • 17

1 Answers1

0

I can't believe it, but Inspect Element in Firefox has exactly what I've looking for:

1. Highlight modified and new added values

2. Copy modified rules

enter image description here

Now you can style at once multiple div's / span's / paragraphs, pseudo-elements etc till you'll accomplish your desired result. After that you can copy from one place all modified rules in different elements, at a 1 click!

If you use Inspect Element for CSS as a right little panel / sidebar (how I use) => see in picture the "blue arrow" (click that black arrow and menu "Changes" will appear).

I hope to help others this great feature of Firefox (well hidden), which will save you a lot of time!

I do not find this function in Chrome browser (or is better hidden than in Firefox).

Marius
  • 459
  • 1
  • 4
  • 17