javascript - Is there a way to tell Chrome web debugger to show the current mouse position in page coordinates? - Stack Overflow

admin管理员组

文章数量:1135133

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;};

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;};

• javascript
• html
• google-chrome
• debugging

Share Improve this question Follow edited Sep 16, 2015 at 17:56 ppsreejith 3,42822 gold badges2626 silver badges2727 bronze badges asked Oct 15, 2012 at 2:36 markmark 62.5k9494 gold badges339339 silver badges663663 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 185

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

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

And this works on SVGs.

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

本文标签：