Browser Developer Tools: What Is The Position of The HTML Element

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

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

How do I view the x and y position of an element through Chrome DevTools?

You could type this into the console,

document.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
e.target.title = "X is "+x+" and Y is "+y;
};

This will give you mouse position on mouse move in the element tooltip.

How to get position information of HTML element

Works in Chrome, Safari, and Firefox:

1. Right-click the <div> and choose 'Inspect Element'.
2. In the inspector choose the "Console" tab and type in $0.offsetParent. Press enter.
3. The result is the offset parent of your selected element.

Bonus: In Chrome and Safari, If you right-click the result in the console you can reveal it in the elements panel.

Call Inspect element on pixel position (x,y)

So I think I found the answer to my question. I should've instead asked if there was a programmatic way to get HTML element at pixel position (x, y), to which @Wumm's comment above answers it. You can use elementFromPoint(x, y) to get HTML element.

Secondly, the answer to the way I posed my question is answered by @zfrisch. So there is no automatic way to invoke Devtools themselves.

HTML code - how to find out absolute position on the page?

Selenium-webdriver can give you information about any DOM element you want:

d = Selenium::WebDriver.for :chrome
d.get "http://www.google.com"
elem = d.find_element(:name, "btnI")
elem.location
=> #<struct Selenium::WebDriver::Point x=532, y=356>

---

Related Topics