How to view (x,y) coordinates in Chrome Debugger
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.
Instructions
1) Paste this into the Console:
var x, y; document.onmousemove=(e)=>{x=e.clientX;y=e.clientY;}
- Click the Live Expression icon, and paste this into the “Expression” field:
"("+x+", "+y+")"
The Live Expression icon is this one:
Result
You should now see this:
The coordinates will automatically update as you move your mouse around.
Alternatives
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).