google-chromegoogle-chrome-extensiongoogle-chrome-devtoolsdevtools

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


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.


Solution

  • 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.