Ems instead of px in Chrome developer tools?

Question

I use ems everywhere in my style-sheets rather than px. But the computed styles/metrics in Chrome Developer Tools seem to default to showing me px, even for elements where I've explicitly used ems in the style-sheet:

(This is a picture of the computed lengths for a button with an icon from Font Awesome. I set the padding to 0.4em and I brought this up to see how tall the icon is.) Sure I can just divide everything by 16, but for numbers like "14.841" that's not so easy to do in my head. Is there a setting somewhere to change the length measurement unit? (Kind of like in most desktop graphics and image manipulation programs where I can choose pixels, points, inches or centimeters?) Either that, or is there somewhere else in the dev tools that can show the lengths in ems? (The rulers, ...?)

Answer 1

The values shown on the Computed tab are just that: computed. Therefore, they are listed in a "absolute" length unit like pixels and not a "relative" length unit like ems, rems or percentage, which all base their size off of some other criteria. For instance, if you set an elment to 100% of the viewport width, it will show you how many pixels the width of the element computes to and there is no option to view the value in any other unit. Likewise, because you're using ems, how big your icon is will be based off the inherited font-size value.

In fact, I haven't tested this but I think the px values shown on the computed tab are technically shown in device pixels and not CSS pixels, as CSS pixels themselves are relative length units (since their size is based on the DPI of the device screen).

Relative Length Units

Absolute Length Units