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

Question

Could anyone tell me if there is any way to view the X and Y of a screen object with Inspect from Chrome DevTools, or any extension that will allow this?

DevTools shows the size of the object when you mouse over it using Inspect, but does not display the object's position.

Every help is welcome. Thank you.

Tissue

Answer 1

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.

Bowfin

Answer 2

Also, GUI rulers can help — enable that in Web Developer tools, in Settings (screenshot from Chrome v102):

Carbaugh

That's not what the question refers to, but your tip is very good, despite not displaying x and y values, they help a lot in development. Thank you very much! – Tissue

Answer 3

Right click the element from the 'Elements' tab (the one that shows up after clicking 'Inspect') and click 'Store as global variable', then in the console evaluate temp1.getBoundingClientRect() which gives the full bounding box coordinates including the x and y position.

Jacinthe