web-dev-qa-db-ja.com

Chrome Webデバッガーに現在のマウス位置をページ座標で表示するように指示する方法はありますか？

多くの場合、Chrome Webデバッガーを使用してjavascriptコードをデバッグします。要素タブで、要素の上にカーソルを合わせると、その要素の幅や高さなどのいくつかの情報を含むツールチップが表示されます。

時々、現在のマウス位置のページ座標を見る必要があります。しかし、デバッガはこの種の情報を表示しないようです。

それで、それを追加する方法はありますか？拡張機能や他のオプションがありますか？

[〜＃〜] edit [〜＃〜]

受け入れられた回答を使用して、次のブックマークレットを追加し、必要なものを正確に作成できます。

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

これをコンソールに入力して、

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

これにより、要素のツールチップでマウスを動かすとマウスの位置がわかります。

115
ppsreejith

ppsreejith の answer と JHarding の answer with Chrome 70 +の Live Expressions 常に更新できます(x, y) devtoolsコンソールをいっぱいにすることなく調整します。

これをコンソールに入力します。

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

これをライブエクスプレッションとして入力します。

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

そして、これはSVGで機能します。

8
dcmorse

マウスの座標を確認する必要があるときは、これを使用しますChrome addon： Coordinates addon

4
Morten S