Usa el panel Elements para inspeccionar y editar elementos del DOM.
Descripción general
El panel Elements proporciona una interfaz sólida para inspeccionar y manipular el DOM. Puedes usar el árbol del DOM, que se asemeja a un documento HTML, para seleccionar nodos específicos del DOM y modificarlos con otras herramientas.
El panel Elements también tiene las siguientes pestañas que contienen herramientas relevantes:
Estilos:
- Visualiza y depura reglas de CSS aplicadas a un elemento desde todas las hojas de estilo.
- Busca cualquier CSS no válido, anulado, inactivo o de otro tipo que no funcione según lo previsto.
- Para editar elementos, agrega una declaración, aplica una clase y, luego, interactúa con el modelo de Box.
- Accede a las opciones de edición de contenedores con las insignias que se encuentran en el árbol del DOM.
Calculado: Enumera las propiedades resueltas que se aplican a un elemento mientras Chrome lo renderiza.
Diseño: Contiene opciones para modificar las superposiciones de cuadrícula y flexbox.
Objetos de escucha de eventos: Enumera todos los objetos de escucha de eventos y sus atributos. Te permite encontrar la fuente de los objetos de escucha de eventos y filtrar objetos de escucha pasivos o de bloqueo.
Puntos de interrupción del DOM: Muestra una lista de los puntos de interrupción de cambio de DOM agregados desde el panel Elements y te permite habilitarlos, inhabilitarlos, quitarlos o mostrarlos.
Propiedades: Selecciona un nodo del DOM para inspeccionar y ordenar las propiedades propias y heredadas del objeto.
Accesibilidad: Muestra una lista de los elementos que tienen etiquetas ARIA y sus propiedades. Te permite inspeccionar y activar o desactivar un árbol de accesibilidad (experimental).
Cómo abrir el panel de Elementos
De forma predeterminada, cuando abre Herramientas para desarrolladores, se abre el panel Elementos. También puedes inspeccionar un nodo en cualquier parte de la página para abrir automáticamente el panel Elementos.
Para abrir el panel Elementos de forma manual, haz lo siguiente:
- Abre Herramientas para desarrolladores.
- Para abrir el menú Comando, presiona lo siguiente:
- macOS: Comando + Mayúsculas + P
- Windows, Linux y ChromeOS: Control + Mayúsculas + P
- Comienza a escribir
Elements, selecciona Show Elements y presiona Intro. Las Herramientas para desarrolladores muestran el panel Elementos en el panel lateral, en la parte inferior de la ventana de Herramientas para desarrolladores.