<< Back to posts

How to view (x,y) coordinates in Chrome Debugger

Posted on January 2, 2024 • Tags: websites google chrome debugging

How to view the real-time (x,y) coordinates of your mouse relative to the top-left of your viewport in the Google Chrome debugger, from this StackOverflow answer.


1) Paste this into the Console:

var x, y; document.onmousemove=(e)=>{x=e.clientX;y=e.clientY;}
  1. Click the Live Expression icon, and paste this into the “Expression” field:
"("+x+", "+y+")"

The Live Expression icon is this one:

Screenshot 2024-01-02 at 8.53.41 PM


You should now see this:

Screenshot 2024-01-02 at 8.52.13 PM

The coordinates will automatically update as you move your mouse around.


Instead of getting the (x,y) coordinates with respect to the top-left of your viewport, if you want to get the coordinates relative to the top-left of the webpage (i.e. accounting for scrolls), then use:

var x, y; document.onmousemove=(e)=>{x=e.pageX;y=e.pageY;}

So if you scrolled down 100px, then an element that appeared at (clientX = 100, clientY = 200) would have (pageX = 100, pageY = 300)

Note that element.getBoundingClientRect() returns the clientX/Y style coordinates (i.e. it tells you the bounding box relative to the top-left of your viewport).