web-dev-qa-db-fra.com

Existe-t-il un moyen d'indiquer à Chrome Web Debugger d'indiquer la position actuelle de la souris dans les coordonnées de la page?

Je débogue souvent mon code javascript à l'aide du débogueur Web Chrome. Dans l'onglet des éléments, survolez un élément avec une info-bulle contenant quelques informations, notamment la largeur et la hauteur de cet élément.

Parfois, j'ai besoin de voir les coordonnées de la page de la position actuelle de la souris. Mais il semble que le débogueur n'affiche pas ce type d'informations.

Alors, y a-t-il un moyen de l'ajouter? Comme une extension ou peut-être il y a d'autres options?

MODIFIER

En utilisant la réponse acceptée, je pouvais ajouter le bookmarklet suivant et obtenir exactement ce que je voulais:

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
38
mark

Vous pouvez taper ceci dans la console,

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

Cela vous donnera la position de la souris lors du déplacement de la souris dans l'info-bulle de l'élément.

101
ppsreejith

Quand j'ai besoin de voir les coordonnées de ma souris, j'utilise cet addon Chrome: Additif de coordonnées

4
Morten S

Combinaison de ppsreejith 's answer avec JHarding ' s answer avec Chrome 70 +/ Live Expressions vous pouvez mettre à jour en permanence les coordonnées (x, y) sans remplir les devtools console:

Entrez ceci dans la console:

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

Entrez ceci en tant qu'expression vivante:

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

 

Et cela fonctionne sur les SVG.

1
dcmorse