I often debug my javascript code using the Chrome web debugger. In the elements tab, hovering over an element show a tooltip with a few pieces of information, including the width and the height of that element.
Sometimes, I need to see the page coordinates of the current mouse position. But it seems the debugger does not display this kind of information.
So, is there a way to add it? Like an extension or maybe there are other options?
EDIT
Using the accepted answer I could add the following bookmarklet and have exactly what I wanted:
javascript:document.onmousemove = function(e){var x = e.pageX;var y = e.pageY;e.target.title = "X is "+x+" and Y is "+y;};
To get the current mouse position we are going to trigger a mouse event. In this case we will use 'mousemove' to log the current X and Y coordinates of the mouse to the console. For a more detailed list of mouse events you could have a read of this.
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.
Combining ppsreejith's answer with JHarding's answer with Chrome 70+'s Live Expressions you can get constantly updating (x, y)
coordinates without filling up the devtools console:
Enter this in the console:
var x, y; document.onmousemove=(e)=>{x=e.pageX;y=e.pageY;}
Enter this as a Live Expression:
"("+x+", "+y+")"
And this works on SVGs.
When i need to see the coordinates for my mouse, i use this Chrome addon: Coordinates addon
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With