Usa el panel Elements para inspeccionar y editar elementos 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 DOM específicos y modificarlos con otras herramientas.
El panel Elements también tiene las siguientes pestañas que contienen herramientas relevantes:
Styles:
- Visualiza y depura las reglas de CSS aplicadas a un elemento de 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 e interactuando con el modelo de caja.
- Accede a las opciones de edición de contenedores con las insignias que se encuentran en el árbol del DOM.
Computed: Enumera las propiedades resueltas que se aplican a un elemento a medida que Chrome las renderiza.
Diseño: Contiene opciones para modificar superposiciones de cuadrícula y flexbox.
Event listeners: 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: Enumera 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 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 o desactivar y, además, inspeccionar el árbol de accesibilidad de la página.
Abre el panel Elements
De forma predeterminada, cuando abres las Herramientas para desarrolladores, se abre el panel Elements. 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 , haz lo siguiente:
- Abre las Herramientas para desarrolladores.
- Abre el menú de comandos presionando lo siguiente:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Comienza a escribir
Elements, selecciona Show Elements y presiona Enter. Las Herramientas para desarrolladores muestran el panel Elements en el cajón en la parte inferior de la ventana de Herramientas para desarrolladores.