2

I'm wondering if there's a tool out there that can be used to measure all the elements of a web page. I find Chrome's element inspector very handy, and I'm curious if there is a tool that would enable me to measure each element of a web page at once. I tried using Instant Wireframe but that seems to be broken. Does anyone know of any other design tools that may help? For any browser...

Example:

Element measurements

Improve this question
9
  • 1
    google.com/…
    – Scott
    Commented Jun 15, 2015 at 5:52
  • Funny, but not helpful.
    – BobSacamano
    Commented Jun 15, 2015 at 6:06
  • 6
    Ahh.,. but more effort than you've shown in your question. :) Seriously, have you tried anything there? There are Chrome extensions, Firefox Extensions, shareware... lots to choose from. Based on your question... it kind of looks like advertising for that particular extension. I'm not stating it is.. just that it looks like it since that's the only thing you mention and you provide a link to it.
    – Scott
    Commented Jun 15, 2015 at 6:08
  • Yes, I have tried a number of different extensions for both Chrome, and Firefox, but haven't found anything that suits the specific needs set out in my question. After reaching dead ends, I'm now asking here if anyone knows of a tool. Do you know of a tool that can do what is shown in my example?
    – BobSacamano
    Commented Jun 15, 2015 at 6:16
  • 2
    Why do you need to get all the measurements?
    – Joonas
    Commented Jun 15, 2015 at 8:23

3 Answers 3

Reset to default
5

Web Developer for chrome does this:

example

Improve this answer
2
  • 1
    Oh yea. Forgot to say this earlier. I came up with a possible reason for why someone down voted. The screenshot you linked is for div order, not div dimensions. Though that option is visible in the screenshot... Also, to show image dimensions, you need to go to the image tab and similarly enable image dimensions separately.
    – Joonas
    Commented Jun 16, 2015 at 16:49
  • Ah, I was on the rush and totally forgot the dimensions but thanks anyway
    – ekclone
    Commented Jun 18, 2015 at 6:53
2

Check out a Chrome extension called Dimensions (demo too), download here.

enter image description here

Some info from the page:

A tool for designers to measure screen dimensions

Images & HTML Elements

Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser.

Mockups

Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring.

Keyboard Shortcut

For the best experience set a keyboard shortcut in the Extension Settings to quickly enable and disable Dimensions.

Open Source

Dimensions is Open Source and hosted on Github. Want to port it to Firefox? Go ahead and fork it. Pull requests are welcomed!

Improve this answer
1
  • How does this tool "measure each element of a web page at once"?
    – allcaps
    Commented Jun 17, 2015 at 7:03
1

If the site loads jQuery, you can enter this in the Developer Console:

$.each($('*'), function(i, e) { console.log(i, $(e).width(), $(e).height(), e ); });

It gives you an indexed list, width and height of all items. Like always, when you hover an item in the list, the item get's highlighted.

Another nice tool to see size is the FireFox developer 3d view. It is not an add-on. It is build-in. You can see the size and nesting of elements. Choose Tools > Web Developer > Web Console. Click the gear icon. Select 3D view. An 3D icon is added next to the gear... Click it!

enter image description here

Improve this answer
2
  • I feel like this isn't really answering the question well
    – Zach Saucier
    Commented Jun 16, 2015 at 21:44
  • I feel like this-isn't-really-answering-the-question-well-comments are not very constructive.
    – allcaps
    Commented Jun 17, 2015 at 7:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.