7 ms·
Dimensions – Measure everything you see in the browser
- lfx 12y agoThis 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
- deleted 12y ago[deleted]
- AVTizzle 12y agoThe 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 12y agoUseful for quick measurements, when you need to measure between several elements at once there's Tape: https://chrome.google.com/webstore/detail/tape/jmfleijdbicilompnnombcbkcgidbefb 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/jlpkojjdgbllmedoapgfodplfhcbnbpn https://chrome.google.com/webstore/detail/page-ruler/jlpkojj...
- LukeB_UK 12y agoI really like tape, been using it for a while now and it's come in handy a lot.
- ymir 12y agoDisclaimer: 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 12y agoAny chance we'll ever see a cross-platform version of it? It looks pretty good, with all the little useful features!
- ymir 12y agoUnfortunately not anytime soon, screen recognition mechanisms used in the app rely a lot on OSX foundations.
- fuzzywalrus 12y agoFunny, 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 12y agoThis is super cool. It will compliment another tool I use called screen ruler very nicely!
- peterjmag 12y agoThis 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).
- Raphmedia 12y agoHa! I also uses the screenshot feature as a ruler.
- crisnoble 12y agoFor 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 12y agoNote: this saves the image to your clipboard instead, overwriting anything you've cut/copied.
- eli 12y agoAnother great reason to have a clipboard manager.
- program 12y agoThe very interesting thing is that it goes through transparent portions of png backgrounds. Try it in the google logo. I am very impressed.
- solutionyogi 12y agoWhat? 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/dimensions.js#L98 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.js#L94 https://github.com/mrflix/dimensions/blob/master/js/worker.j... Great work.
- panorama 12y agoThis 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 12y agoI like Digital Color Meter, included with OS X.
- peterjmag 12y agoThere'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/discover-the-digitalcolor-meter-tool-on-your-mac/ http://www.techrepublic.com/blog/apple-in-the-enterprise/dis...
- bvm 12y agoI use: https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg https://chrome.google.com/webstore/detail/colorpick-eyedropp... which is ugly but functional.
- jackmoore 12y agoI use Sip, a free osx app, give it a shot: https://itunes.apple.com/us/app/sip/id507257563?mt=12 https://itunes.apple.com/us/app/sip/id507257563?mt=12
- tomhenderson 12y agoI 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 12y agodon'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 :/
- boernard 12y agoDoesn't work on my mbp 13" either... Also only grabs some random measurements
- deleted 12y ago[deleted]
- mindhunter 12y agoI 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 12y agoDoesn'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 12y agoOn 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 12y agoI have the exact same problem. Hopefully it gets resolved, this looks really helpful!
- progx 12y agoWould be nice if you add a "copy size to clipboard" function, when click on an element.
- qpleple 12y agoIt could copy to clipboard on click, or Cmd+click.
- MasoInar 12y agoDoesn't work on my machine :( Uncaught TypeError: Cannot read property '0' of undefined tooltip.js:84
- StavrosK 12y agoSame here. Can't get this to work.
- alaskamiller 12y agoLike http://xscopeapp.com/ http://xscopeapp.com/ but in browser
- naviehuynh 12y agoAlt+D is my favorite shortcut to focus Chrome omnibox :(
- ushi 12y agoThen it is time to learn about Ctrl+L
- cozuya 12y agoOr F6. I've doubled your productivity!
- hobarrera 12y agoCtrl+L keeps most of your fingers on the home row. ;-)
- palgrave 12y agoOnly if you have a mutant right pinky finger.
- Smirnoff 12y agoProgrammers 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 12y ago>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.
- platz 12y ago
- ianbannerman 12y agoThis is great! Unforunately, does not work with iframes. A couple sites I'm stuck with are iframe heavy :/
- oakio 12y agoI'm sorry. I've been stuck with inception style iframes on a large site. WTF, always frustrating.
- Raphmedia 12y agoColor me impressed. This is AMAZING. You have no idea how easier you just made my job!
- samwillis 12y agoThis 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 12y agoYeah being able to set some kind of threshold in the edge detection would be super handy. It also struggles with textured backgrounds..
- deleted 12y ago[deleted]
- ellysetaylor21 12y agoNow I dont't need Crtl+u every time thanks man (Y)
- oakio 12y agoSuper handy. Nice work.
- msane 12y agoI want one of these that does ems, rems and even vw/vh ...
- igl 12y agoJust 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 12y agoIt's picking up everything visible, not just images.
- igl 12y agoMy problem is that it is picking up invisible elements too.
- djrconcepts 12y agoThis is a great extension! Very useful.