有没有办法告诉Chrome Web调试器在页面坐标中显示当前鼠标位置?

mar*_*ark 47 html javascript debugging google-chrome

我经常使用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;};
Run Code Online (Sandbox Code Playgroud)

pps*_*ith 118

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

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

这将在元素工具提示中为鼠标移动提供鼠标位置.

  • 简单而有个性. (7认同)
  • 那这个呢?`document.onmousemove = function(e){document.title ="X:"+ e.pageX +" - Y:"+ e.pageY; };` (4认同)
  • 作为对追随者的说明,该回答“用来”销毁日志,但已被编辑,现在如果您将鼠标光标悬停在任意位置足够长的时间,则只会给您一个很好的小提示。 (4认同)
  • 非常好.但是当鼠标超过svg时不起作用.=( (3认同)

dcm*_*rse 12

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

在控制台中输入以下内容:

var x, y; document.onmousemove=(e)=>{x=e.pageX;y=e.pageY;}
Run Code Online (Sandbox Code Playgroud)

输入此作为实时表达:

"("+x+", "+y+")"
Run Code Online (Sandbox Code Playgroud)

这适用于SVG。

  • 提示:要创建实时表情,请按“全视之眼”图标。除了不明显之外,这是最好的答案。 (2认同)

小智 5

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