If you're looking for a convenient way to measure dimensions on websites, look no further than the
Chrome extension
called "Dimensions." This handy tool allows you to easily measure distances between various HTML elements on a webpage, making it ideal for web developers, designers, and anyone needing accurate measurements.
Accurate Measurements of Images and HTML Elements
With Dimensions, you can measure the distances between a wide range of elements, including images, input-fields, buttons, videos, gifs, text, and icons. Whether you're trying to determine the spacing between two buttons or the size of an image, this web scraping tool has got you covered.
Effortlessly Measure Mockups
Working with mockups provided as PNGs or JPEGs? No problem! Simply drag and drop them into
Chrome
, activate the Dimensions extension, and start measuring. It's a quick and efficient way to calculate dimensions on mockups without the need for complex software.
Convenient Keyboard Shortcut
Dimensions offers a convenient keyboard shortcut to start and stop the measurement process. Simply press ALT + D, and you're ready to measure distances between elements with ease. This shortcut allows for a seamless workflow, saving you time and effort.
Measure Area Boundaries and More
Need to measure the radius of a circle or determine the dimensions of a connected area? Dimensions has you covered. By pressing the ALT key, you can measure the dimensions of an entire area, bypassing any obstacles like overlapping text. It's a versatile tool that caters to a wide range of measurement needs.
An Open Source Extension
Dimensions is an open source extension available on Github. If you're interested in porting it to Firefox or contributing to its development, you can easily fork the project and submit pull requests. The community is welcome to improve and expand the functionality of this useful tool.
In conclusion, Dimensions is a powerful Chrome extension that allows you to measure dimensions on websites with ease. Despite a few mixed reviews, it offers accurate measurements for HTML elements and provides a convenient way to measure mockups. With its keyboard shortcut and ability to measure area boundaries, Dimensions is a versatile tool that can enhance your web development and design workflow. Give it a try and see how it can simplify your dimension measuring tasks!
11 Reviews For This Extension
Perfect!
doesn't work on mac at all.
Much useful for UI Developers
it doesn't work
That's what I was looking for.
This plugin works, but not everywhere, and this is not the worst thing about it. In fact, I have conducted a test in Figma, where I typically require additional measurements, and I have observed that this plugin yields inaccurate data. If I change the zoom of the canvas, the measuring brakes and after relaunching, the value changes compared to the previous one. Furthermore, the plugin is ineffective if the zoom level of the webpage is not 100%
Doesn't seem to work at all
this is a great one!
If you want to find the dimensions of a selected area on the screen, the just get Nimbus Screenshot & Screen Video Recorder
It sort of works and it sort of doesn't. First you have to make sure the extension icon is lit for the site you are trying to measure. Then you have to fight the browser. The ALT+D shortcut just highlights the address bar. For some pages and some CSS elements it snaps to the wrong things making it useless, but for others it works fine. YMMV
nice extension work perfectly