Skip to content

Depuración con el navegador

La mayoría de navegadores actuales ofrecen opciones a los desarrolladores para poder depurar su código, tanto a nivel de diseño como de comportamiento en el lado del cliente (código JavaScript). En nuestro caso, vamos a explorar las opciones que ofrecen para examinar y corregir cuestiones relacionadas con el diseño CSS.

1. Google Chrome

En Google Chrome tenemos la opción de Herramientas para desarrolladores. Podemos acceder a ella desde el menú superior derecho (los tres puntos verticales), yendo a Más herramientas y luego a Herramientas para desarrolladores, o también pulsando la combinación de teclas Ctrl + Mayus + I. La pestaña que más útil nos va a resultar es la de Elements

En la parte superior derecha podemos ir explorando las distintas etiquetas HTML del documento, y en la izquierda se nos marcan con colores las regiones afectadas por esas etiquetas. En la parte inferior derecha podemos, haciendo clic en la etiqueta, ver el CSS que le afecta más directamente. Además, podemos editar el CSS para ver cómo afectan los cambios al resultado de la página.

Nota

Los cambios que hagamos en el CSS desde el navegador son temporales, y se mantienen sólo mientras examinamos la página. Pero no se guardan en el fichero original.

2. Mozilla Firefox

En el caso de Mozilla Firefox también contamos con unas Herramientas para desarrolladores, y la forma de acceder es similar a la de Google Chrome, desde el menú superior derecho o con la misma combinación de teclas. Una vez dentro, nos interesará principalmente la sección Inspector.

Como ocurre en Chrome, podemos ir seleccionando secciones HTML y ver a qué regiones afectan en la página, junto con el CSS asociado a ellas. También en este caso podemos editar temporalmente el CSS para ver cómo aplican los cambios.

Ejercicio 1

Copia el siguiente contenido HTML en un fichero llamado prueba_depuracion.html:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio Depuración</title>
<style>
    body {
    font-family: sans-serif;
    }

    header {
    background: lightblue;
    }

    h1 {
    color: darkblue;
    }

    .caja {
    background: peachpuff;
    width: 300px;
    padding: 20px;
    }
</style>
</head>
<body>
<header>
    <h1>Título principal</h1>
</header>
<div class="caja">
    <p>Este es un párrafo dentro de la caja.</p>
</div>
</body>
</html>

Ábrelo con el navegador que quieras (Chrome o Firefox). Puedes observar que entre el header azul y la caja naranja aparece un espacio vertical inesperado. Utiliza el inspector de elementos del navegador para averiguar dónde está el problema y corregir el CSS.