Dimensions – Measure everything you see in the browser

http://felixniklas.com/dimensions/

by julien • 12 years ago

341 54 12 years ago

felixniklas.com

lfx• 12 years ago

This is really impressive how it calculates size between letters.

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

AVTizzle• 12 years ago

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!

Flenser• 12 years ago

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

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

LukeB_UK• 12 years ago

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

ymir2• 12 years ago

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) is an OSX tool that can measure anything you see on screen.

hobarrera2• 12 years ago

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

ymir2• 12 years ago

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

fuzzywalrus• 12 years ago

Funny, I was about to recommend SnapRuler.

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.

StephenGL• 12 years ago

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

peterjmag2• 12 years ago

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

Raphmedia2• 12 years ago

Ha! I also uses the screenshot feature as a ruler.

crisnoble• 12 years ago

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• 12 years ago

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

program• 12 years ago

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• 12 years ago

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

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

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

Great work.

panorama• 12 years ago

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?

zachrose• 12 years ago

I like Digital Color Meter, included with OS X.

peterjmag2• 12 years ago

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

bvm• 12 years ago

I use: https://chrome.google.com/webstore/detail/colorpick-eyedropp... which is ugly but functional.

jackmoore• 12 years ago

I use Sip, a free osx app, give it a shot: https://itunes.apple.com/us/app/sip/id507257563?mt=12

tomhenderson• 12 years ago

I made a little applescript application so I can open the system colour picker with spotlight. That way I can use the palette at the bottom to save a the colours, and the developer picker extension to copy the code.

To build it just put 'choose color' into script editor and save it as an application.

klausseiler• 12 years ago

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

on the extension website it works fine :/

boernard• 12 years ago

Doesn't work on my mbp 13" either... Also only grabs some random measurements

mindhunter2• 12 years ago

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• 12 years ago

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.

singlow• 12 years ago

On my Ubuntu "retina" notebook (ThinkPad) it did not work at first, because I set my default zoom level in Chrome to 175%. Once I scaled back to 100% the extensions works great. I guess it doesn't really make since to do pixel measurements when the pixels arent 1:1, so I'm not sure this should be fixed or just documented.

vlunkr• 12 years ago

I have the exact same problem. Hopefully it gets resolved, this looks really helpful!

progx• 12 years ago

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

qpleple• 12 years ago

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

MasoInar• 12 years ago

Doesn't work on my machine :(

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

StavrosK• 12 years ago

Same here. Can't get this to work.

alaskamiller• 12 years ago

Like http://xscopeapp.com/ but in browser

naviehuynh• 12 years ago

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

ushi• 12 years ago

Then it is time to learn about Ctrl+L

cozuya• 12 years ago

Or F6. I've doubled your productivity!

ianbannerman• 12 years ago

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

oakio2• 12 years ago

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

Raphmedia2• 12 years ago

Color me impressed.

This is AMAZING.

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

samwillis• 12 years ago

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• 12 years ago

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

It also struggles with textured backgrounds..

ellysetaylor21• 12 years ago

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

oakio2• 12 years ago

Super handy. Nice work.

msane• 12 years ago

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

igl2• 12 years ago

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?

mindhunter2• 12 years ago

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

igl2• 12 years ago

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

djrconcepts• 12 years ago

This is a great extension! Very useful.

Dimensions – Measure everything you see in the browser

Related Stories