Funciones básicas del Inspector
El Inspector de Elementos ofrece una serie de funciones básicas que todo desarrollador debería conocer para trabajar eficientemente con el código de una página web.
Seleccionar elementos
Hay varias formas de seleccionar un elemento para inspeccionarlo:
- Selección directa: Haz clic en cualquier elemento en el panel HTML
- Selector de elementos: Haz clic en el icono de cursor (generalmente en la esquina superior izquierda) y luego haz clic en cualquier elemento de la página
- Búsqueda: Usa Ctrl+F (o Cmd+F en Mac) para buscar elementos por etiquetas, clases o IDs
Modificar HTML
Una vez seleccionado un elemento, puedes:
- Editar el HTML: Haz doble clic en una etiqueta, atributo o texto para modificarlo
- Añadir atributos: Haz clic derecho en un elemento y selecciona "Add attribute"
- Mover elementos: Arrastra y suelta elementos para cambiar su posición en el DOM
- Eliminar elementos: Selecciona un elemento y presiona la tecla Delete
Modificar CSS
El panel de estilos te permite:
- Ver estilos aplicados: Todos los estilos aplicados al elemento seleccionado se muestran en orden de cascada
- Activar/desactivar propiedades: Marca o desmarca las casillas junto a cada propiedad
- Editar valores: Haz clic en cualquier valor para editarlo
- Añadir nuevas propiedades: Haz clic en un espacio vacío para añadir nuevas propiedades CSS
Estado de elementos
Puedes simular diferentes estados de los elementos:
- :hover: Estado al pasar el ratón por encima
- :active: Estado al hacer clic
- :focus: Estado al recibir el foco
- :visited: Estado para enlaces visitados
Medidas y disposición
El Inspector también muestra información sobre las dimensiones del elemento:
- Modelo de caja: Visualiza el padding, border y margin del elemento
- Tamaño: Ancho y alto del elemento
- Posición: Coordenadas x e y del elemento
Estas funciones básicas te permitirán empezar a utilizar el Inspector de Elementos de manera efectiva para examinar y modificar el código de tus páginas web.