It does not work on layout absolute. Any idea?

The dimensions are wrong if the values (properties) have changed after dimensions plugin is activated. Possible solutions would be to activate the plugin by holding down CTRL (like Photoshop CC) and deactivate it by releasing CTRL.

In mac, there is a similar tool and it provides a threshold option to accurately measure two borders.

e.g. In below screenshot top is calculated from above input rather than from within the current input

When using dimensions in an element with a direction set to rtl, this is what displays:

Hello,I hope to use this extension in Firefox, what should i do?Thanks.

Reported by Ben Walker via mail.

I like my toolbars clean :)

I assigned a hotkey to the plugin and hid the button. The hotkey only works when the button is visible, though.

I have been using this —amazing extension— for a couple of days, but the constant change of cursor type it's kinda annoying, particularly when measuring wireframes/mockups/comps, since usually you end up with a big zoom cursor.

My suggestion is to remove it entirely, since the current axis are the most precise "cursor" you can get. In case that doesn't cut it, maybe using the crosshair cursor could do the job.

I find your extension rather useful, do you accept donations somewhere/somehow?

When I run the plugin and then refresh the page it seams to crash and can't be started anymore. I have to restart the browser or disable and reenable it in the Chrome settings.

• Fix that Dimensions can be reactivated in the same tab without reload (bug appears when installed from Chrome Web Store)
• Fix 'Add to Chrome' button on the website
• wire links on the website
• create extension screenshots and artwork for the store

This extension doesn't appear to work for me on any webpage.

I'm getting the following error appearing in the Chrome console:

Uncaught TypeError: Cannot read property '0' of undefined

• In this file: tooltip.js:84
• In this function: onInputMove

Its failing on the '0' I've starred below

if('ontouchstart' in window){
    x = event.touches[***0***].clientX;
    y = event.touches[0].clientY;
  } else {
    x = event.clientX;
    y = event.clientY;
  }

N.B. I have Windows 8 laptop (Lenovo Yoga) with a touch screen - which might have something to do with the 'ontouchstart' bit.

Feature request :

@mrflix it will be really helpful If this feature also works in an iframe cc @joaoportela and @molethiaz
Thank you :)

Love this. Looking forward to future enhancements. One request, press esc to exit the measuring tool.

It would be nice to have an option to increase/decrease contrast tolerance as for some cases you can get quite strange results. I attached an example where the width is calculate incorrectly.

seems mousemove (or touchmove) doesn't work at device mode in chrome latest version.
So, only way to show dimensions is just click on the page

It would be nice if one could measures the maximum width and height of an object, e.g. to get the diameter of the circles at the Extension's website. For example one could compute the maximum of all measured widths and heights while holding a key. In this way you can hold the key and draw a small circle with your mouse within the circle element, to surely cover the diameter.

When the extension is active and the page is reloaded, the plugin fails to work upon activation.

With non 100% page zoom: indicators are offset and seemingly broken.

Screenshot of measuring on https://github.com/mrflix/dimensions with 110% zoom:

I'm seeing some inconsistencies in what Dimensions wants to measure in retina vs. non-retina screens. In the non-retina screen, it has no problem selecting the border of this element, but in the retina screen, it extends beyond it.

Dimensions works by taking a screenshot of the page via a Chrome API. Thus Dimensions should take a new screenshot whenever something in the viewport changes.

It already does that for scrolling – with a slight delay to take the scroll inertia on OSX into account.
However it doesn't take DOM changes into account (e.g. changes of the html via Javascript).

Whenever I have dimensions enabled I will trigger it by pressing Cmd + D, while actually I wanted to add a bookmark. I changed the shortcut in "extensions" section but it doesn't seem to be helping, the shortcut remained Cmd + D?

It seemed like measuring the elements from mouse axis? But the mouse point taking 1px itself, therefore it always has 1px difference.

I've set an Alt + D keyboard shortcut to toggle the extension (as recommended) and this worked great.

However, when the extension button is hidden from the Chrome toolbar the keyboard shortcut no longer works and the extension can't be turned on or off.

I wouldn't have thought this is expected behaviour... (I'm using Chrome Version 37.0.2062.120)

Thanks!

Mockups

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

Does it support figma ? We are not using PNGs or JPEGs.

In the y-direction it sometimes steps over borders like this very white image. Is there a way to set a threshold?

Measurements often seem to be off by 1px. the element should measure 400x300px, but the measured dimensions are 399x299px

Looks awesome and works great! My only suggestion would be an icon color that pops a bit more when Chrome is set to dark mode. My nav-bar is dark grey and I can barely see the icon :(

https://developer.chrome.com/extensions/activeTab

activeTab was developed for specifically this kind of extension - click to do something for a bit. I believe it won't affect functionality.

The addon is pretty neat. Please implement this addon for Mozila Firefox too.

Any chance you’d be willing to upload this to https://addons.opera.com/en/developer/upload/, so that Opera users can enjoy your extension too?

You probably don’t even have to change the code.

cc @shwetank

From #19 (comment)

I think it has to do with dimensions already running in one tab – that it bugs in another tab

Right now the plugin only measures spacings between two elements via pixels, so measuring with text or icons can become a bit tricky if the cursor is moved around.

I guess it would make sense to implement an option(default?) to measure sizes of DOM elements by their real css dimensions instead of their rendered dimensions.

I've tried a lot, but doesn't work in Brave or Firefox Browser, any chances of updates?
-Btw, I loved the idea of the extension! 🥰

An option to annoate measurements.

perhaps store an array of points based on the url in localstorage?

As of Chrome 41 (Chrome 41.0.2272.76 x64, OSX 10.10.1), having the extension enabled prevents new bookmarks from being added. Neither CMD+D, the star icon in the address bar or the Bookmarks menu work.

Detect the background color (or contrast) of the current element and adjust colours accordingly.

Sorry if this is an obvious question, but I can't get the extension to work on pages I'm working on on my computer, only sites that are hosted on the web. Is it possible to use this extension on my local projects?

Setting a keyboard shortcut is mentioned in the app description, but there is no options page for Dimensions. Is there another way to set a shortcut? Maybe some more detailed instructions would be helpful. Thanks!