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.
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).
And if you just want a box that can be dragged around there's Page Ruler:
Great job, it's amazing how accurate it is. Getting this tool to be reliable had to be a substantial struggle.
If you find this extension useful, there might be a situation when you need to measure stuff that is not inside your browser. SnapRuler (http://www.snaprulerapp.com) is an OSX tool that can measure anything you see on screen.
It's become part of my daily work flow. For the price and time saved, I can't recommend it enough.
Its on my list with ColorSnapper (another small dev made utility), between the two, I rarely take screenshots anymore. I find it more useful than browser plugins as often my rendering issues are with old browsers that lack such utilities.
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?
It also struggles with textured backgrounds..
I am very impressed.
How did he make it work? I didn't think this would be possible.
Yes, extremely impressed with the tool.
EDIT: Looked at the code. He takes screenshot of the active tab when extension is clicked. And then parses the PNG in measureDistances function when mouse moves.
For a mouse at position X, Y, it tries to find the farthest Top, Bottom, Right, Left points with same color/threshold. This is why it is able to see through 'transparent' Google logo.
It's beautiful, and does a terrific job displaying the tool's functionality in a playful, interactive way. Kudos!
So you press capslock (aka ctrl) with left hand and L with right hand -- all fingers on one row.
I don't think typically is the right word here. I've certainly done it before, but I'd wager that under (and possibly well under) a quarter of programmers actually have this remapping on their machines. This could be totally wrong, but is based on the people I've worked with and gone to school with.
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?
To build it just put 'choose color' into script editor and save it as an application.
By the way source may be found here https://github.com/mrflix/dimensions
Uncaught TypeError: Cannot read property '0' of undefined tooltip.js:84
on the extension website it works fine :/
The problem appears to be that it maps 2x pixels to "normal" 1x pixels as output. So all the measurements are scaled up 200%, with the top left corner as the origin.
I was hoping it was really just doing by pixel testing, but it seems to pick up on html elements too.
Or could it be buggy on my retina fisher price here?
This is AMAZING.
You have no idea how easier you just made my job!