This is awesome! Such a wonderfully simple idea, and pretty nice execution to boot. I normally rely heavily on Cmd-Shift-4 on OS X for measuring stuff on screen (click, drag, then Esc to cancel before actually taking a screenshot), but I have a feeling this extension will be a pretty significant improvement over my approach. Great work!<p>For those that don't see a use case: Chrome's dev tools work well for measuring things within the context of the box model, but so much of what I measure on a regular basis isn't captured there. The best example I can think of is measurements relative to some text's baseline—the distance between the bottom baseline of some text and the border of its parent container, including adjustments for line height, padding, and related margins, for instance. This extension would also work for things that aren't even represented in the box model, like the distance between two shapes in a <canvas> element.<p>One feature suggestion: it'd be great to be able to click or use another keyboard shortcut to set arbitrary anchor points on the page. That way, I could measure the distance between elements that aren't necessarily on the same vertical or horizontal axis. That's one thing that OS X's screenshot utility is great for (though perhaps unintentionally).
Useful for quick measurements, when you need to measure between several elements at once there's Tape:
<a href="https://chrome.google.com/webstore/detail/tape/jmfleijdbicilompnnombcbkcgidbefb" rel="nofollow">https://chrome.google.com/webstore/detail/tape/jmfleijdbicil...</a><p>And if you just want a box that can be dragged around there's Page Ruler:
<a href="https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn" rel="nofollow">https://chrome.google.com/webstore/detail/page-ruler/jlpkojj...</a>
Disclaimer: I'ma co-creator of SnapRuler.<p>Great job, it's amazing how accurate it is. Getting this tool to be reliable had to be a substantial struggle.<p>If you find this extension useful, there might be a situation when you need to measure stuff that is not inside your browser. SnapRuler (<a href="http://www.snaprulerapp.com" rel="nofollow">http://www.snaprulerapp.com</a>) is an OSX tool that can measure anything you see on screen.
This is rely nice, its unfortunate that it doesn't work on gradients though...<p>One way to fix that would be to pass the screen shot of the page (what I believe it is doing) though a edge detection filter first before measuring between colour thresholds?
The interactive background/header on the landing page is awesome!<p>It's beautiful, and does a terrific job displaying the tool's functionality in a playful, interactive way. Kudos!
This is great, installing now. I too use the cmd+shift+4 method but it's pretty unreliable.<p>Similarly, one thing I often find myself needing to do is find the hex or RGB value of an element of pixel on the fly. I know there are osx apps that do this but they're usually of the paid variety. Are there any good chrome extensions that can accomplish this?
This is really impressive how it calculates size between letters.<p>By the way source may be found here <a href="https://github.com/mrflix/dimensions" rel="nofollow">https://github.com/mrflix/dimensions</a>
don't know why, but the extension won't work on my retina mbp 13"
<a href="http://imgur.com/3NHVDv5" rel="nofollow">http://imgur.com/3NHVDv5</a><p>on the extension website it works fine :/
Just testet it on a few pages... I'm sorry. It's not going to work out between the two of us.<p>I was hoping it was really just doing by pixel testing, but it seems to pick up on html elements too.<p>Or could it be buggy on my retina fisher price here?