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

Posted 2023-03-05

【中文标题】有没有办法告诉 Chrome 网络调试器在页面坐标中显示当前鼠标位置？

【英文标题】：Is there a way to tell Chrome web debugger to show the current mouse position in page coordinates?

【发布时间】：2012-10-05 00:16:26

【问题描述】：

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

【参考方案1】：

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

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

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

【讨论】：

不错，但它会破坏所有日志。而且，如果您删除 clear() 语句，那么它会用无数的位置消息使日志变得混乱。这是我们能拥有的最好的吗？

好的，试试上面的，我把它改成把它记录到标题中。 :)

这个怎么样？ document.onmousemove = function(e) document.title = "X: " + e.pageX + " - Y: " + e.pageY; ;

作为对追随者的说明，此回答“用于”销毁日志但已被编辑，现在仅在您将鼠标光标悬停在任何位置足够长的时间时才会为您提供一个不错的小工具提示。跨度>

运行良好 避免异常安装扩展的好解决方案

【参考方案2】：

当我需要查看鼠标坐标时，我会使用这个 Chrome 插件： Coordinates addon

【讨论】：

它在 chrome 或任何浏览器的调试模式下都不起作用。

这是 Chrome 的插件，所以你不能在其他浏览器中使用它。我只是测试了插件，它仍然可以正常工作。它一直显示你的鼠标坐标，即使你打开了 chrome 调试模式/Chrome DevTools。

@ChandraShekharRam 当您想使用它时，您必须通过单击镀铬栏（右上角）中的图标来启用它。这是一个比写日志更好的解决方案。

【参考方案3】：

将ppsreejith 的answer 与JHarding 的answer 与Chrome 70+ 的Live Expressions 结合使用，您可以不断更新(x, y) 坐标，而无需填满devtools 控制台：

在控制台中输入：

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

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

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

这适用于 SVG。

【讨论】：

提示：要创建实时表情，请按 All Seeing Eye 图标。除了不明显之外，这是最好的答案。