Usa el panel Elements para inspeccionar y editar los 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 del DOM específicos y modificarlos con otras herramientas.
El panel Elements también tiene las siguientes pestañas que contienen herramientas relevantes:
Estilos:
- Visualiza y depura las reglas de CSS aplicadas a un elemento desde todas las hojas de estilo.
- Busca CSS no válido, anulado, inactivo o algún otro CSS 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.
Calculadas: Muestra las propiedades resueltas que se aplican a un elemento a medida que Chrome las renderiza.
Diseño: Contiene opciones para modificar las superposiciones de cuadrícula y flexbox.
Objetos de escucha de eventos: Muestra una lista de todos los objetos de escucha de eventos y sus atributos. Te permite encontrar la fuente de los objetos de escucha de eventos y filtrar los objetos de escucha pasivos o de bloqueo.
Puntos de interrupción del DOM: Muestra los puntos de interrupción de cambio de DOM agregados desde el panel Elements y te permite habilitarlos, inhabilitarlos, quitarlos o mostrarlos.
Properties: Selecciona un nodo del DOM para inspeccionar y ordenar las propiedades propias y heredadas del objeto.
Accesibilidad: Muestra los elementos que tienen etiquetas ARIA y sus propiedades. Te permite inspeccionar y activar o desactivar un árbol de accesibilidad (experimental).
Abrir el panel de elementos
De forma predeterminada, cuando abres las 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 Elements.
Para abrir manualmente el panel Elements, sigue estos pasos:
- Abre Herramientas para desarrolladores.
- Para abrir el menú de comandos, presiona lo siguiente:
- En macOS: Command + Mayúsculas + P
- Windows, Linux y ChromeOS: Control + Mayúsculas + P
- Comienza a escribir
Elements, selecciona Mostrar elementos y presiona Intro. Herramientas para desarrolladores muestra el panel Elementos en el panel lateral, en la parte inferior de la ventana de Herramientas para desarrolladores.