- ¿Cómo abrir Chrome DevTools?
- Pestañas principales de Chrome DevTools
- La pestaña Elementos (Elements)
¿Alguna vez has abierto una página web y algo no se veía bien? Tal vez un botón estaba fuera de lugar o el texto era ilegible en tu pantalla. Encontrar y corregir estos problemas es clave para el desarrollo web, y ahí es donde entran en juego las herramientas de desarrollo de los navegadores.
En esta lección, aprenderás a abrir y usar Chrome DevTools, explorar la estructura de una página y ajustar estilos para mejorar el diseño.
¿Cómo abrir Chrome DevTools?
Para acceder a las herramientas de desarrollo en Google Chrome, tienes varias opciones:
- Desde el menú contextual: haz clic derecho sobre cualquier parte de la página y selecciona Inspeccionar (Inspect).
- Con un atajo de teclado:
- En Windows y Linux: Ctrl + Shift + I o F12
- En macOS: Cmd + Opt + I
Esto abrirá la interfaz de Chrome DevTools, que se ve más o menos así:
La primera pestaña que verás es Elementos (Elements), donde podemos explorar y modificar el código HTML y CSS de la página en tiempo real.
Pestañas principales de Chrome DevTools
Dentro de Chrome DevTools encontrarás varias pestañas. A continuación, te explicamos las más importantes:
| Herramienta | Descripción |
|---|---|
| Elementos (Elements) | Muestra la estructura HTML y los estilos CSS aplicados a la página. |
| Consola (Console) | Permite ver mensajes de error y probar código JavaScript directamente en el navegador. |
| Fuentes (Sources) | Muestra los archivos cargados por la página, como el código fuente y los scripts. |
| Red (Network) | Permite ver y analizar las solicitudes hechas por la página, como imágenes, estilos y scripts. |
Nos enfocaremos en la pestaña Elementos, que es la más utilizada al explorar el diseño de una página.
La pestaña Elementos (Elements)
Cuando abrimos la pestaña Elementos, vemos una estructura en forma de árbol. Cada línea representa un bloque de código HTML, y al pasar el cursor sobre cada uno, podemos ver qué parte de la página corresponde a ese elemento.
Veamos un ejemplo de estructura HTML. Supongamos que estamos inspeccionando una página y encontramos lo siguiente:
<html>
<body class="fondo-claro">
<div class="contenedor">
<h1 class="titulo">Bienvenido a mi página</h1>
<p class="descripcion">Este es un pequeño párrafo de ejemplo.</p>
</div>
</body>
</html>
En el inspector de Chrome DevTools, podremos ver cada una de estas etiquetas y sus atributos. Además, podemos hacer clic derecho sobre cualquier elemento para acceder a un menú con opciones útiles:
Algunas opciones clave son:
- Editar como HTML (Edit as HTML): Nos permite modificar el HTML directamente en el navegador.
- Eliminar elemento (Delete Element): Borra temporalmente un elemento de la página.
- Copiar selector (Copy selector): Genera una cadena CSS para seleccionar ese elemento.
Estos cambios no afectan permanentemente el sitio web; solo existen mientras la página está abierta. Si recargamos la página, las modificaciones desaparecerán.
Trabajando con los estilos (CSS)
Además del código HTML, también podemos editar los estilos CSS de los elementos. Esto lo hacemos en el panel de la derecha dentro de la pestaña Elementos.
La pestaña de estilos (Styles)
Aquí podemos ver y modificar las reglas CSS aplicadas al elemento seleccionado. Esto se ve así:
Por ejemplo, si seleccionamos un párrafo y vemos la siguiente regla CSS:
p {
color: blue;
font-size: 16px;
}
Podemos hacer clic en los valores y cambiarlos directamente en el inspector. Intenta modificar el color de un párrafo y verás el cambio en tiempo real.
La pestaña computados (Computed)
La pestaña Computados muestra el estilo final que se aplica a un elemento, teniendo en cuenta la cascada y la herencia en CSS.
Aquí también podemos ver una representación visual del modelo de caja (box model), que desglosa las propiedades clave:
- Margin: Espacio exterior alrededor del elemento.
- Border: Borde del elemento.
- Padding: Espacio interno antes del contenido.
- Content: El área real donde está el texto o la imagen.
Si queremos ajustar márgenes o tamaños, este panel nos ayuda a visualizar cómo afectan al diseño.
Resumen
- Las herramientas de desarrollo en Chrome (Chrome DevTools) permiten hacer cambios en tiempo real sin modificar los archivos originales.
- Se pueden inspeccionar y modificar tanto el HTML como el CSS de una página.
- La pestaña Elementos es la más usada para entender la estructura HTML y los estilos CSS.
- Se pueden realizar cambios temporales en la página para experimentar con diferentes diseños.
- La pestaña Computados ayuda a entender qué reglas CSS afectan a un elemento y cómo funciona el modelo de caja en CSS.
Trabajo independiente
- Abre el inspector web disponible en esta página.
- Intenta navegar por las diferentes pestañas y ver qué información contienen.
- Modifica los elementos HTML y agrega diferentes propiedades a la página actual.
Materiales adicionales
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
