Detector de posicion del raton: seguimiento en vivo de coordenadas X/Y
Este detector hace algo que la mayoria de herramientas omiten: muestra los cuatro sistemas de coordenadas al mismo tiempo -- screen, client, page y offset -- para que veas exactamente como difieren en tiempo real. Mueve el raton sobre la cuadricula de abajo y haz clic para registrar coordenadas.
Herramienta de coordenadas a pantalla completaPor que existen cuatro sistemas de coordenadas
Si estas construyendo algo interactivo en la web -- drag-and-drop, canvas, un juego -- te encontraras con al menos cuatro pares de coordenadas distintos para la misma posicion del raton. No son redundantes; cada uno responde a una pregunta diferente.
| Propiedad | Midio desde | Cambia al hacer scroll? | Cambia al mover ventana? |
|---|---|---|---|
screenX / screenY | Monitor fisico | No | Si |
clientX / clientY | Viewport del navegador | No | No |
pageX / pageY | Documento completo | Si | No |
offsetX / offsetY | Elemento bajo el cursor | Depende | No |
La mayoria de herramientas online muestra solo uno o dos sistemas. Eso basta para una lectura rapida, pero oculta la informacion que necesitas para depurar. Este detector muestra los cuatro simultaneamente.
Prueba: Lleva la pagina arriba y anota los valores de page y client. Desplazate media pagina abajo. Los valores client no cambian; los page aumentan la distancia del scroll.
Screen vs Client: la gran confusion
screenX mide desde la esquina del monitor fisico. Si tu ventana no esta en la esquina, screenX sera mas alto que clientX. clientX mide desde el viewport del navegador.
Atencion: Con escalado DPI superior al 100% puede haber un factor de escala adicional. Ver nuestra guia de escalado DPI.
Coordenadas page y scroll
pageX/pageY son identicos a clientX/clientY cuando la pagina esta arriba del todo. Al desplazarte, divergen: pageY aumenta con el scroll, clientY no. Importa cuando guardas una posicion para reproducirla despues del scroll.
Coordenadas offset para interaccion con elementos
offsetX/offsetY miden desde el elemento bajo el cursor, no desde la pagina. Utiles para drag-and-drop dentro de un contenedor, pero saltan cuando el cursor cruza un elemento hijo.
Solucion: Usa e.currentTarget.getBoundingClientRect() y calcula e.clientX - rect.left manualmente.
Uso del registro de coordenadas
La cuadricula tiene una caracteristica que la diferencia: clic para capturar. Cada clic registra la posicion en los tres sistemas. Puedes capturar varios puntos y copiarlos en formato tabulado para Excel o scripts.
Flujo: 1) Clic en cada posicion objetivo. 2) "Copiar". 3) Pegar en tu script. Las columnas screenX/screenY son para pyautogui.click(x, y). Ver guia PyAutoGUI.
Como el escalado DPI afecta estos numeros
En pantallas de alta DPI, el navegador reporta pixeles CSS, no fisicos. A 150% de escala, un pixel CSS equivale a 1.5 fisicos. Comprueba window.devicePixelRatio. Ver nuestra guia DPI y la guia de pixeles fisicos vs logicos.
Dispositivos tactiles y movil
En pantallas tactiles no hay mousemove, pero si touchmove. El detector funciona en movil: toca y arrastra dentro de la cuadricula. screenX/screenY en movil suelen coincidir con clientX/clientY.
Comparacion con otras herramientas
| Caracteristica | Herramientas tipicas | Este detector |
|---|---|---|
| Sistemas mostrados | 1-2 | 4 simultaneos |
| Capturar puntos con clic | Raro | Si, con copiar/exportar |
| Lineas guia | A veces | Si, ambos ejes |
| Soporte movil | Habitualmente roto | Funciona via touchmove |
| Contenido educativo | Nulo o minimo | Guia completa |
| Anuncios | Heavy | Ninguno |
Preguntas frecuentes
Por que cambia screenX al mover la ventana del navegador?
Mide desde el monitor fisico. Al mover la ventana, cada punto de la pagina cambia su distancia al borde del monitor.
Que coordenadas debo usar para mi script?
PyAutoGUI y AutoHotkey: usa screenX/screenY. Puppeteer/Playwright: usa clientX/clientY o pageX/pageY.
Puedo obtener el color del pixel en la posicion del cursor?
La seguridad del navegador impide leer pixeles arbitrarios. getImageData solo funciona en canvas. Para color a pantalla completa usa Digital Color Meter o una extension. Ver guia de coordenadas.
Por que salta offsetX al cruzar un elemento hijo?
Porque el elemento de referencia cambia. Usa e.clientX - container.getBoundingClientRect().left para un offset estable.
Funciona en un iframe?
Si, pero screenX/screenY seran relativos a la posicion del iframe.