Saltar al contenido principal

Herramientas Disponibles en el Inspector de Elementos

El Inspector de Elementos ofrece un conjunto completo de herramientas que facilitan el análisis y modificación de páginas web. Conocer cada una de estas herramientas te permitirá aprovechar al máximo su potencial durante el desarrollo.

Principales herramientas​

Panel DOM

Visualiza y modifica la estructura HTML de la página en tiempo real.

Panel de Estilos

Examina y edita las reglas CSS aplicadas a cualquier elemento.

Panel de Layout

Visualiza y modifica el modelo de caja, flexbox y grid de los elementos.

Panel de Calculados

Observa los valores CSS finales después de aplicar cascada y herencia.

Herramientas de selección y visualización​

Selector de elementos​

La herramienta de selección (flecha) permite elegir elementos directamente en la página:

  • Activación: Haz clic en el icono de cursor o presiona Ctrl+Shift+C (Cmd+Shift+C en Mac)
  • Hover: Al pasar el cursor sobre un elemento, muestra sus dimensiones y composición
  • Selección: Al hacer clic, selecciona el elemento en el árbol DOM
  • Navegación con teclado: Usa las flechas para moverte entre elementos relacionados

Muestra la ruta jerárquica del elemento seleccionado:

html > body > main > section > div > p

Permite navegar rápidamente a cualquier elemento padre haciendo clic en su etiqueta.

Herramientas de análisis CSS​

Color picker​

Selector de color integrado que permite:

  • Visualizar y modificar valores de color en diferentes formatos (HEX, RGB, HSL)
  • Seleccionar colores con una paleta visual
  • Ajustar opacidad/transparencia

Editor de sombras​

Permite crear y ajustar visualmente:

  • box-shadow
  • text-shadow
  • drop-shadow

Visualizadores de layout​

Herramientas especializadas para:

  • Flexbox: Visualización de contenedores flex, dirección, alineación
  • Grid: Visualización de líneas de cuadrícula, áreas nombradas
  • Modelo de caja: Visualización de margin, border, padding y content

Herramientas de accesibilidad​

  • Contrast checker: Verifica si el contraste entre texto y fondo cumple con estándares WCAG
  • Árbol de accesibilidad: Muestra cómo interpretan los lectores de pantalla tu página

Opciones de configuración​

El Inspector de Elementos ofrece varias opciones de configuración que pueden personalizarse según tus necesidades:

  • Mostrar reglas del usuario/navegador: Permite ver los estilos predeterminados
  • Mostrar propiedades heredadas: Muestra u oculta propiedades que vienen de elementos padres
  • Agrupar propiedades: Organiza las propiedades CSS por categorías
  • Modo oscuro/claro: Cambia el tema visual del inspector

Conocer estas herramientas te permitirá trabajar más eficientemente cuando necesites analizar o modificar el código de una página web.