49

Modern Web Developer tools (in Chrome / FF / IE, eg.) provide a way to see the "Box Model" and "Computed CSS Properties" of a particular element. However;

Is there a way to monitor the final computed/layout position easily with such tools?

Preferably absolute, but within the parent container is also suitable. I am amendable to using any of the previously mentioned [Windows] browsers, but prefer to use Chrome.

user2864740
  • 60,010
  • 15
  • 145
  • 220

2 Answers2

131

In Chrome, Firefox, Edge and IE11+, when an element is selected, you can access this element in the console window by typing:

$0

You can then query and manipulate using the Javascript DOM API, which has a very useful method called Element.getBoundingClientRect().

So all you have to do is type the following into the console window when an element is selected:

$0.getBoundingClientRect()

and the browser will return an object such as:

{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }

I find it very useful to have the following live expression in Chrome Dev Tools:

!!$0 && JSON.stringify($0.getBoundingClientRect())

Wayne Maurer
  • 12,333
  • 4
  • 33
  • 43
  • Are those values correct? How can an element have an height of `28` when it starts at `72` and ends at `99` (`99 - 72 = 27`? Same for the width...) – winklerrr Dec 17 '18 at 15:24
  • 3
    in Chrome Dev Tools, you can also add a "live expression" with `$0` to get updated values – Dave Thieben May 08 '19 at 17:52
21

Chrome dev tools -> Settings -> General -> Elements -> Show Rulers.

You can also install Chrome plugins that will give you a little more functionality.

dwilson
  • 351
  • 1
  • 5
  • 2
    The rulers are fairly neat, but not precise or dynamic enough. I'd like to be able to keep my eye on a dynamically changing value during page reflows, much like the current "Box Model" display. For the plugin, do you have a recommendation? The few I looked up seemed more oriented to general site development and issue identification. – user2864740 Nov 08 '14 at 20:30
  • I haven't really needed anything in addition to the basic rulers, so I don't really have an educated recommendation on the plugin. There seem to be quite a few of them out there and the functionality looks like it may be close to what you need. – dwilson Nov 10 '14 at 18:14