css - teclado - inspeccionar elemento google chrome

Herramientas de desarrollo del navegador: ¿cuál es la posición del elemento HTML?

Question

Las herramientas modernas para desarrolladores web (en Chrome / FF / IE, por ejemplo) proporcionan una forma de ver el "Modelo de caja" y las "Propiedades de CSS calculadas" de un elemento en particular. Sin embargo;

¿Hay una manera de monitorear la posición final de cálculo / diseño fácilmente con tales herramientas?

Preferiblemente absoluto, pero dentro del contenedor principal también es adecuado. Soy modificable para usar cualquiera de los navegadores [Windows] mencionados anteriormente, pero prefiero usar Chrome.

Answer 1

En Chrome, Firefox, Edge e IE11 +, cuando se selecciona un elemento, puede acceder a este elemento en la ventana de la consola escribiendo:

$0

Luego puede consultar y manipular usando la API DOM de Javascript , que tiene un método muy útil llamado Element.getBoundingClientRect() .

Así que todo lo que tiene que hacer es escribir lo siguiente en la ventana de la consola cuando se selecciona un elemento:

$0.getBoundingClientRect()

y el navegador devolverá un objeto como:

{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }

Answer 2

Herramientas de desarrollo de Chrome -> Configuración -> General -> Elementos -> Mostrar reglas.

También puedes instalar complementos de Chrome que te darán un poco más de funcionalidad.