Usa el Modo de inspección para enfocarte y analizar elementos específicos de tu página web.
Descripción general
Activar el modo de inspección de DevTools (selector de selectores) te permite colocar el cursor sobre los elementos de la página y ver información de estilo y accesibilidad. Si haces clic en un elemento mientras el modo de inspección está activo, se destacará el elemento DOM correspondiente en el árbol del DOM del panel Elementos y se mostrarán los estilos relevantes en la pestaña Estilos.
Cómo activar el modo Inspect
Para activar el modo de inspección, haz lo siguiente:
- Abre DevTools.
- Haz clic en el botón Modo de inspección en la barra de acciones.
El selector de selectores está activo cuando el ícono del modo de inspección es azul.
También puedes usar un atajo en Chrome para abrir el panel Elementos en el modo Inspeccionar. Presiona una de las siguientes opciones:
- macOS: Cmd+Option+C
- Windows, Linux y ChromeOS: Ctrl + Mayúsculas + C
Usa el modo Inspect para ver información de estilo y accesibilidad
Cuando el modo de inspección esté activo, coloca el cursor sobre los elementos de la página para destacarlos y mostrar una superposición de información sobre herramientas. El panel Elementos expandirá automáticamente el árbol DOM para destacar el elemento sobre el que colocas el cursor.
Según el elemento, la información sobre herramientas del Modo de inspección mostrará las siguientes propiedades de diseño:
- Los selectores del elemento.
- Son las dimensiones del elemento, en píxeles.
- Es el color de fondo del elemento.
- Es el color del texto del elemento.
- Las propiedades de la fuente del elemento.
- Es el padding del elemento, en píxeles.
- Es el margen del elemento, en píxeles.
Además, los elementos que usen CSS grid o CSS flexbox tendrán un ícono diferente junto al nombre del elemento.
En la sección de accesibilidad de la información sobre herramientas, se mostrará la siguiente información:
- El nombre y el rol del elemento que se informa a la tecnología de accesibilidad.
- Indica si el elemento se puede enfocar con el teclado.
Si colocas el cursor sobre los encabezados de texto en particular, se mostrará una relación de contraste, que mide la diferencia de brillo entre los colores de primer plano (color del texto) y de fondo.
Una buena relación de contraste es vital para que el texto sea legible. Obtén información para corregir el texto con contraste bajo.
Cómo conservar y ocultar la información sobre herramientas del modo de inspección
Para mantener la información sobre herramientas del modo Inspect mientras puedes mover el puntero del mouse a otro lugar, mantén presionado lo siguiente:
- macOS: Ctrl + Opción
- Windows, Linux y ChromeOS: Ctrl + Alt
Para ocultar temporalmente la información sobre herramientas de inspección mientras mueves el puntero del mouse, mantén presionada la tecla Ctrl.
Inspecciona los elementos a los que no se puede acceder
Inicialmente, el modo de inspección no puede segmentar los elementos con la propiedad CSS pointer-events: none;.
Para inspeccionar los elementos a los que no se puede acceder, presiona Mayús mientras colocas el cursor sobre ellos.
