
Dimensions – Measure everything you see in the browser - julien
http://felixniklas.com/dimensions/
======
peterjmag
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!

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).

~~~
crisnoble
For everyone who uses Cmd-Shift-4, try Cmd-Cntrl-Shift-4 to accomplish the
same thing without risking a 31px by 2px file cluttering your desktop when you
don't click Esc on time.

~~~
ChristianBundy
Note: this saves the image to your clipboard instead, overwriting anything
you've cut/copied.

~~~
eli
Another great reason to have a clipboard manager.

~~~
Cowicide
Very true and I can't imagine using any device without a multi-clipboard
manager. I'm pretty surprised Windows, OS X, Android, iOS, etc. don't already
have them built-in by now or at least optional within the system preferences
somewhere.

------
Flenser
Useful for quick measurements, when you need to measure between several
elements at once there's Tape:
[https://chrome.google.com/webstore/detail/tape/jmfleijdbicil...](https://chrome.google.com/webstore/detail/tape/jmfleijdbicilompnnombcbkcgidbefb)

And if you just want a box that can be dragged around there's Page Ruler:
[https://chrome.google.com/webstore/detail/page-
ruler/jlpkojj...](https://chrome.google.com/webstore/detail/page-
ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn)

~~~
LukeB_UK
I really like tape, been using it for a while now and it's come in handy a
lot.

------
ymir
Disclaimer: I'ma co-creator of SnapRuler.

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](http://www.snaprulerapp.com)) is an OSX tool
that can measure anything you see on screen.

~~~
hobarrera
Any chance we'll ever see a cross-platform version of it? It looks pretty
good, with all the little useful features!

~~~
ymir
Unfortunately not anytime soon, screen recognition mechanisms used in the app
rely a lot on OSX foundations.

------
samwillis
This is rely nice, its unfortunate that it doesn't work on gradients though...

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?

~~~
sbarre
Yeah being able to set some kind of threshold in the edge detection would be
super handy.

It also struggles with textured backgrounds..

------
program
The very interesting thing is that it goes through transparent portions of png
backgrounds. Try it in the google logo.

I am very impressed.

~~~
solutionyogi
What? I could not believe what you wrote but you are right, it does go through
transparent background.

[http://i.imgur.com/byfmzAJ.png](http://i.imgur.com/byfmzAJ.png)

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.

[https://github.com/mrflix/dimensions/blob/master/extension/d...](https://github.com/mrflix/dimensions/blob/master/extension/dimensions.js#L98)

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.

[https://github.com/mrflix/dimensions/blob/master/js/worker.j...](https://github.com/mrflix/dimensions/blob/master/js/worker.js#L94)

Great work.

------
alaskamiller
Like [http://xscopeapp.com/](http://xscopeapp.com/) but in browser

------
AVTizzle
The interactive background/header on the landing page is awesome!

It's beautiful, and does a terrific job displaying the tool's functionality in
a playful, interactive way. Kudos!

------
naviehuynh
Alt+D is my favorite shortcut to focus Chrome omnibox :(

~~~
ushi
Then it is time to learn about Ctrl+L

~~~
cozuya
Or F6. I've doubled your productivity!

~~~
hobarrera
Ctrl+L keeps most of your fingers on the home row. ;-)

~~~
palgrave
Only if you have a mutant right pinky finger.

~~~
Smirnoff
Programmers typically swap capslock for ctrl.

So you press capslock (aka ctrl) with left hand and L with right hand -- all
fingers on one row.

~~~
smeyer
>Programmers typically swap capslock for ctrl

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.

------
panorama
This is great, installing now. I too use the cmd+shift+4 method but it's
pretty unreliable.

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?

~~~
peterjmag
There's actually a little utility called DigitalColor Meter[1] built in to OS
X. It's not perfect, but it gets the job done.

[1] [http://www.techrepublic.com/blog/apple-in-the-
enterprise/dis...](http://www.techrepublic.com/blog/apple-in-the-
enterprise/discover-the-digitalcolor-meter-tool-on-your-mac/)

------
lfx
This is really impressive how it calculates size between letters.

By the way source may be found here
[https://github.com/mrflix/dimensions](https://github.com/mrflix/dimensions)

------
ianbannerman
This is great! Unforunately, does not work with iframes. A couple sites I'm
stuck with are iframe heavy :/

~~~
oakio
I'm sorry. I've been stuck with inception style iframes on a large site. WTF,
always frustrating.

------
MasoInar
Doesn't work on my machine :(

Uncaught TypeError: Cannot read property '0' of undefined tooltip.js:84

~~~
StavrosK
Same here. Can't get this to work.

------
progx
Would be nice if you add a "copy size to clipboard" function, when click on an
element.

~~~
qpleple
It could copy to clipboard on click, or Cmd+click.

------
StephenGL
This is super cool. It will compliment another tool I use called screen ruler
very nicely!

------
klausseiler
don't know why, but the extension won't work on my retina mbp 13"
[http://imgur.com/3NHVDv5](http://imgur.com/3NHVDv5)

on the extension website it works fine :/

~~~
mindhunter
I developed it on a mbp 13", just not the retina version. Someone reported the
bug that it doesn't work when the browser is zoomed. May that be the case for
you?

~~~
tobr
Doesn't work on my Retina MBP either, but it works on a connected regular res
monitor.

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.

------
msane
I want one of these that does ems, rems and even vw/vh ...

------
igl
Just testet it on a few pages... I'm sorry. It's not going to work out between
the two of us.

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?

~~~
mindhunter
It's picking up everything visible, not just images.

~~~
igl
My problem is that it is picking up invisible elements too.

------
ellysetaylor21
Now I dont't need Crtl+u every time thanks man (Y)

------
Raphmedia
Color me impressed.

This is AMAZING.

You have no idea how easier you just made my job!

------
djrconcepts
This is a great extension! Very useful.

------
oakio
Super handy. Nice work.

