: Tool to help measure web page elements 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,

@Radia289

Check out a Chrome extension called Dimensions (demo too), download 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!

Vote Up Vote Down

@Shanna688

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!

Vote Up Vote Down

@Speyer780

Web Developer for chrome does this:

Vote Up Vote Down