Measure Page Elements The Easy Way
Perhaps you’re the guy who still has to hit the “Print Screen” button, paste into Photoshop, and use the marquee tool to measure the pixel width of an element in a website you’re working on.
If so, here are a couple alternatives.
01. XRAY Bookmarklet
My first choice, is to make use of XRAY. It is just a javascript that allows you to click any block element on a page, and it gives you a list of details for that element.
Try it. Just click the XRAY button, then click anywhere on this page. It’ll highlight the block, and give you details like the element id, width, height, position, margin, padding and more.
For best use, right click the XRAY button, Select “Bookmark this link” and save it to your link toolbar. Or just drag the button to your toolbar. That way it’ll always be a handy button up top, for any page you’re viewing.
02. MeasureIt Addon
The MeasureIt Firefox Addon is handy as it allows you to click and drag to manually measure a block element.
03. Web Developer Toolbar
If you aren’t using this Firefox Addon, then you really need to be. On the WebDev toolbar, click Information » Display Element Information.
Much like XRAY, this allows you to click an element and get a list of info for it. Keyboard shortcut is Control + Shift + F.
Anyone else have any suggestions for measuring page elements?
About Chad Coleman
Chad has been building websites for friends, family and small businesses for the past 8 years. He currently lives and works in Coeur d'Alene, Idaho. Feel free to contact him regarding any design, web or development work.
June 25th, 2008 at 4:47 pm
I knew about XRay. That’s a pretty nifty bookmarklet. I’ll check the others out as well.