csslayoutpositionbrowserweb-developer-toolbar

Browser developer tools: what is the Position of the HTML element?

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.

Solution

  • 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())