如何通过Chrome DevTools查看元素的x和y位置？

Question

请问有没有办法使用Chrome DevTools的Inspect功能或任何扩展程序查看屏幕对象的X和Y坐标？

使用Inspect时，DevTools可以显示鼠标悬停在对象上时的大小，但不会显示对象的位置。

欢迎提供任何帮助。谢谢。

- Eleison Christiano

Answer 1

你可以在控制台中输入这段代码：

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

这将在鼠标移动时在元素提示中给出鼠标位置。

- Dre Ross

Answer 2

此外，GUI标尺也可以帮助——在Web开发工具的设置中启用它（来自Chrome v102的屏幕截图）：

- revelt

---

这并不是问题所涉及的内容，但是您的提示非常好，尽管没有显示x和y值，但它们在开发中非常有帮助。非常感谢！ - Eleison Christiano