Chip Cullen

Browser Dev Tools: Element Inspector Popover

I was "today years old", as they say, when I stumbled across this feature in Chrome's Dev Tools. While you have Dev Tools open, if you hit Command + Shift + C (on Mac, I assume Ctrl + Shift + C on windows), you get this popover with lots of info as you hover over DOM elements:

A page on PBS.org in Chrome with the layout inspector popover appearing while the mouse is hovering over various elements

But wait, it gets better!

A coworker quickly pointed out that Firefox has the same shortcut!

A page on PBS.org in Firefox with the layout inspector popover appearing while the mouse is hovering over various elements

At that point, I checked, and yep - Safari also has this shortcut!

A page on PBS.org in Safari with the layout inspector popover appearing while the mouse is hovering over various elements

Differences

The information you get is between all three is a bit different. The versions in Firefox and Safari pretty much just show layout information. The Chrome version also includes some helpful accessibility information as well:

The Chrome layout inspector, with accessibility features pointed out by an arrow

I don't know how I didn't know about this super handy feature, but now I do! I hope it helps you!