Categories
Applications Coding Design

The Chrome browser inspector has a very cool feature

I primarily use Firefox Developer Edition as my day to day browser. I use the excellent Firefox page inspector several times a day to troubleshoot issues for our customers, and write CSS for a variety of tweaks on sites that I use.

As much as I enjoy using the Firefox browser inspector, I noticed a feature in the Chrome Dev Tools that I really like, and would love to see introduced to Firefox. It’s bit like a heads-up display that’s very helpful for seeing an element’s styles at a glance.

If I select an element in Firefox, I see fairly basic information about the element such as the element’s dimensions, and the type of element it is, like this:

Selecting an element in the Firefox page inspector

On the other hand, when I select the same element using the Chrome browser inspector, I see more information about the element, like this:

Selecting an element with the Chrome page inspector

Chrome provides not only information about the image’s dimensions, and the type of element it is, but also other useful information such as the font color, style, and margins (in this case).

Even though I can see all the details of the element in each browser’s inspector panel, this extra information when I select an element is a really nice touch.

unsplash-logoFeatured image by Abby Anaday

By Paul

Enthusiast, writer, Happiness Engineer at Automattic. I take photos too. Passionate about my wife, Gina and #proudDad.

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.