80

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;};
ppsreejith
  • 3,318
  • 2
  • 25
  • 27
mark
  • 59,016
  • 79
  • 296
  • 580

3 Answers3

175

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.

ppsreejith
  • 3,318
  • 2
  • 25
  • 27
  • Nice, but it destroys all the log. And if you remove the clear() statement, then it clutters the log with zillion position messages. Is it the best we can have? – mark Oct 15 '12 at 02:56
  • Ok try the above, i changed it to log it to the title. :) – ppsreejith Oct 15 '12 at 03:21
  • 9
    What about this? `document.onmousemove = function(e) { document.title = "X: " + e.pageX + " - Y: " + e.pageY; };` – Heitor Jun 23 '16 at 07:46
  • 8
    As a note to followers, this answered "used to" destroy the log but was edited and now only gives you a nice little tooltip if you let your mouse cursor hover in any location long enough. – rogerdpack Oct 14 '16 at 07:12
  • Working fine Nice solution to avoid unusal installing extensions – Chandra Shekhar Sep 30 '18 at 09:55
  • 1
    @Heitor Unfortunately, Chrome doesn't show the document title in its window. No title? Ugh. – David Spector Aug 21 '23 at 16:08
53

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 (to create a Live Expression, click on the eye in the top menu of the console).

"("+x+", "+y+")"

And this works on SVGs.

Fifi
  • 3,360
  • 2
  • 27
  • 53
dcmorse
  • 1,011
  • 11
  • 15
7

When i need to see the coordinates for my mouse, i use this Chrome addon: Coordinates addon

Morten S
  • 99
  • 1
  • 8
  • It is not working in the Debug Mode in chrome or any browser. – Chandra Shekhar Sep 30 '18 at 09:52
  • This is a addon for Chrome, so you can't use it in other browers. I did just test the addon, and it's still working as it should. It shows the coordinates of your mouse all the time, even if you open the chrome debug mode/ Chrome DevTools. – Morten S Dec 13 '18 at 15:21
  • @ChandraShekharRam You have to enable it when you want to use it by clicking on the icon in the chrome bar (upper-right). This is a much better solution than writing in the logs. – Robouste Dec 14 '18 at 14:27
  • I would have voted this up, but it's now a dead link. The extension I found only shows the coordinates when you click it on, instead of on mousemove. Useless. – David Spector Aug 21 '23 at 16:19