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 del DOM específicos y modificarlos con otras herramientas.
El panel Elements también tiene las siguientes pestañas que contienen herramientas relevantes:
Estilos:
- Ver y depurar las reglas de CSS aplicadas a un elemento desde todas las hojas de estilo
- Encuentra cualquier CSS no válido, anulado, inactivo o de otro tipo que no funcione según lo previsto.
- Edita elementos agregando una declaración, aplicando una clase y, también, interactuando con el modelo de caja.
- Accede a las opciones de edición del contenedor con las insignias que se encuentran en el árbol del DOM.
Calculado: Enumera las propiedades resueltas que se aplican a un elemento a medida que 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 los objetos de escucha pasivos o de bloqueo.
Puntos de interrupción de DOM: Muestra los puntos de interrupción de cambio de DOM agregados desde el panel Elementos y te permite habilitarlos, inhabilitarlos, quitarlos o mostrarlos.
Propiedades: Selecciona un nodo DOM para inspeccionar y ordenar las propiedades propias y heredadas del objeto.
Accesibilidad: Enumera los elementos que tienen etiquetas ARIA y sus propiedades. Te permite activar y desactivar, y también inspeccionar un árbol de accesibilidad (experimental).
Abre el panel Elementos
De forma predeterminada, cuando abres 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 manualmente el panel Elementos, haz lo siguiente:
- Abre las Herramientas para desarrolladores.
- Abre el menú de comandos presionando 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 Elements en el cajón en la parte inferior de la ventana de Herramientas para desarrolladores.