65

我经常使用 Chrome 网络调试器调试我的 javascript 代码。在元素选项卡中,将鼠标悬停在一个元素上会显示一个工具提示,其中包含一些信息,包括该元素的宽度和高度。

有时,我需要查看当前鼠标位置的页面坐标。但似乎调试器不显示这种信息。

那么,有没有办法添加呢?像扩展程序一样,或者可能还有其他选择?

编辑

使用接受的答案,我可以添加以下书签并拥有我想要的内容:

javascript:document.onmousemove = function(e){var x = e.pageX;var y = e.pageY;e.target.title = "X is "+x+" and Y is "+y;};
4

3 回答 3

153

你可以在控制台中输入这个,

document.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
e.target.title = "X is "+x+" and Y is "+y;
};

这将在元素工具提示中为您提供鼠标移动时的鼠标位置。

于 2012-10-15T02:50:40.543 回答
33

ppsreejith答案JHarding答案与 Chrome 70+ 的Live Expressions相结合,您可以获得不断更新(x, y)的坐标,而无需填满 devtools 控制台:

在控制台中输入:

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

将此作为实时表达式输入:

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

这适用于 SVG。

于 2019-01-26T02:55:21.757 回答
7

当我需要查看鼠标的坐标时,我会使用这个 Chrome 插件: 坐标插件

于 2017-06-21T09:14:59.553 回答