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

时间:2012-10-15 02:36:59

标签: javascript html google-chrome debugging

我经常使用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;};

3 个答案:

答案 0 :(得分:106)

您可以在控制台中输入

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

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

答案 1 :(得分:5)

ppsreejithanswerJHardinganswer与Chrome 70+的Live Expressions结合使用,您可以不断更新(x, y)无需填充devtools控制台即可进行协调:

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

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

作为实时表达形式输入

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

这适用于SVG。

答案 2 :(得分:4)

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