Usa el panel Elementos para inspeccionar y editar elementos DOM.
Descripción general
El panel Elementos 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 Elementos también tiene las siguientes pestañas que contienen herramientas relevantes:
Estilos:
- Ver y depurar las reglas de CSS aplicadas a un elemento de 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 cuadro.
- Accede a las opciones de edición de contenedores con las insignias que se encuentran en el árbol del DOM.
Cálculo: Lista las propiedades resueltas aplicadas 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 objetos de escucha pasivos o de bloqueo.
Puntos de interrupción de DOM: Muestra una lista de los puntos de interrupción de cambios 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: Muestra una lista de los elementos que tienen etiquetas ARIA y sus propiedades. Te permite activar o desactivar e 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 el panel Elementos de forma manual, haz lo siguiente:
- Abre las Herramientas para desarrolladores.
- Para abrir el menú de comandos, 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 que se encuentra en la parte inferior de la ventana de Herramientas para desarrolladores.