Las herramientas de desarrollo del navegador

Todo navegador trae incorporado un conjunto de herramientas para examinar la página que tiene delante: qué elementos la componen, qué reglas de CSS se le están aplicando a cada uno, de dónde salen y qué ocurre cuando algo no sale como se esperaba. Se llaman DevTools.

No son un lujo para quien programa. Son la forma normal de trabajar: se escribe el CSS en el editor, se mira el resultado en el navegador y, cuando no cuadra, se averigua por qué aquí dentro. Buena parte de lo que en el editor son conjeturas, aquí son datos.

Este documento recorre Firefox Developer Edition y Chrome. Las dos traen lo mismo con nombres distintos, y se indica en cada caso cómo se llama en cada una.

Cómo se abren

Tres vías, las tres equivalentes:

F12.
Ctrl+Mayús+I (en Mac, Cmd+Opción+I).
Clic derecho sobre cualquier punto de la página → Inspeccionar. Esta es la más práctica, porque abre las herramientas con ese elemento ya seleccionado.

El panel se puede acoplar abajo, a la derecha, a la izquierda o separar en una ventana propia. Para trabajar con CSS conviene a la derecha si la pantalla es ancha, y abajo si no lo es: lo que no se quiere es que el panel tape la parte de la página que se está mirando.

Firefox Developer Edition

Es una versión aparte de Firefox, que se instala junto al normal y no lo sustituye. Trae las mismas herramientas unas versiones por delante y con algunos ajustes activados de fábrica. Para esta asignatura, lo que la hace preferible es que sus paneles de grid y de tipografía son los mejores que hay.

1. El Inspector

En Chrome se llama Elements. Es la pestaña principal y tiene dos mitades: a la izquierda el árbol de la página, a la derecha las pestañas que describen el elemento que se haya seleccionado en ese árbol.

Dos herramientas de la barra superior, que son las que más se usan:

El selector de elemento (el icono de la flecha sobre un recuadro, o Ctrl+Mayús+C). Al activarlo, cada elemento sobre el que se pasa el ratón se resalta en la página y se muestran sus medidas. Al pulsar, queda seleccionado.
El modo adaptable (Ctrl+Mayús+M), que simula pantallas de otros tamaños.

Recorrer el árbol con el ratón resalta en la página el elemento correspondiente. Es la manera rápida de entender la estructura de un sitio ajeno: se pasa por encima de las etiquetas y se ve qué trozo de pantalla ocupa cada una.

1 · el árbol de la página

2 · el elemento seleccionado: body

3 · lo que ese elemento ocupa

4 · sus estilos, en Reglas

El Inspector de Firefox sobre www.sarasoueidan.com/about/.

La captura es la página de Sara Soueidan, una desarrolladora de interfaces cuyo sitio está escrito a mano. En el árbol está seleccionado el <body>, y a su lado aparece un distintivo flex: el navegador avisa de que ese elemento es un contenedor flexible.

1 · el div del aviso

2 · el header

3 · el main

Al recorrer el árbol, cada elemento se resalta en la página.

Los tres hijos del <body> de esta página, uno por uno: el <div> del aviso negro, el <header> con el menú y el <main> con el artículo. En rojo, la línea del árbol; en azul, el sitio que ocupa en la página.

Reglas

En Chrome, Styles. Es el panel donde se pasa el tiempo.

Muestra todas las reglas de CSS que alcanzan al elemento seleccionado, y las muestra en orden: arriba las que ganan, abajo las que pierden. A la derecha de cada una aparece el archivo y la línea donde está escrita.

Lo que convierte este panel en la mejor explicación de la cascada son las declaraciones tachadas. Una propiedad tachada es una que se escribió y que no se está aplicando, porque otra regla más específica, o posterior, la ha ganado. Siguiendo los tachados de arriba abajo se lee la cascada entera de ese elemento, que es exactamente lo que no se puede ver en el editor de texto.

Otras cosas del mismo panel:

element {}: Al principio del todo. Son los estilos escritos en el atributo style del propio elemento. Si hay algo aquí, gana a casi todo lo demás, y es la primera sospecha cuando una regla no se aplica.
Heredado de…: Más abajo, las reglas que no apuntan a este elemento sino a alguno de sus antepasados, y que le llegan por herencia. Es donde se ve que la tipografía de un párrafo viene en realidad del body.
Las casillas de cada declaración: Desactivan esa línea sin borrarla. Para averiguar qué hace una propiedad, lo más rápido es quitarla y mirar.
Los valores son editables: Se pulsa sobre un número o un color y se cambia, y la página responde al instante. Con las flechas arriba y abajo el valor sube y baja de uno en uno, y con Mayús de diez en diez: así se encuentra una medida probando, en vez de calculándola.
:hov: Fuerza los estados del elemento: :hover, :focus, :active, :visited. Permite ver y editar el estilo de un :hover sin tener que mantener el ratón encima, que es imposible mientras se edita.
El botón +: Añade una regla nueva para ese elemento, para probar algo que todavía no está en la hoja.

1 · la pestaña Editor de estilos

2 · styles.css:1376 — la maquetación

3 · styles.css:468 — la tipografía

4 · styles.css:13 — casi todo tachado

Las tres reglas que alcanzan al mismo <body>.

Tres reglas distintas dicen algo sobre el mismo <body>, y las tres están en el mismo archivo. Lo que cada una aporta:

styles.css:1376 — la maquetación: display: flex con flex-direction: column convierte el body en un contenedor cuyos hijos se apilan de arriba abajo. min-height: 100% hace que ocupe al menos el alto de la ventana, para que el pie no suba cuando hay poco contenido.
styles.css:468 — la tipografía: Tamaño, interlineado y familia. Lo que se escribe aquí lo heredan todos los descendientes, y por eso la tipografía de la página se fija en un solo sitio. Los valores no son literales: son var(--step-0) y var(--font-family), es decir, variables.
styles.css:13 — casi todo tachado: Es la misma hoja, mucho más arriba, y perdió. Están tachadas margin: 0, min-height, font-family: Inter, line-height, display: flex y flex-direction: column: todas las ganaron las dos reglas anteriores, que están escritas después. Solo sobreviven letter-spacing, margin: 0 auto y padding: 1rem.

Ese bloque es la lección entera sobre la cascada: diez declaraciones escritas y tres aplicándose. Sin este panel no hay forma de saber cuáles.

El contenedor flex, dibujado sobre la página

Junto a display: flex hay una cajita azul. Al pulsarla, el navegador marca sobre la página los límites de cada hijo del contenedor, y se ve el reparto en columna: el aviso negro de arriba, la cabecera con el menú y el cuerpo del artículo.

1 · el botón de display: flex

2 · 1.er hijo: el div del aviso

3 · 2.º hijo: el header

4 · 3.er hijo: el main

Con display: flex activado, los límites de cada hijo del contenedor.

Es la comprobación de que lo que se escribió en el CSS coincide con lo que el navegador ha construido. Y en una página ajena, la manera de entender su maquetación sin leer una línea de su hoja de estilos.

Lo heredado

Al final del panel, bajo el rótulo Heredado de html, están las reglas que no apuntan a este elemento sino a un antepasado suyo.

1 · Heredado de html

2 · :root — las variables del sitio

Las variables de :root, heredadas por todo el documento.

Lo que hay ahí es el bloque :root, que es el elemento <html>, y lo que contiene no son estilos sino variables: nombres que empiezan por dos guiones y que luego se usan con var() en el resto de la hoja.

Se reconocen dos escalas. Una de tamaños de letra —--fc-3xs, --fc-2xs, --fc-xs, --fc-s, --fc-m, --fc-l, --fc-xl…— y otra de espaciado, --space-3xs y siguientes. Cada una se define con un mínimo y un máximo y un calc() que interpola entre los dos, de modo que las medidas crecen con la pantalla sin necesidad de media queries.

Que estén declaradas en :root es lo que las hace servibles en todo el documento, y por eso aparecen aquí, bajo «heredado». Es el mismo mecanismo que se usará al definir los colores y las medidas de un sitio propio.

Disposición

En Chrome, Layout. Tiene dos partes.

El modelo de caja. El dibujo de siempre —contenido, relleno, borde y margen— pero con los números reales de ese elemento en ese momento. Al pasar el ratón por cada zona del dibujo, se resalta en la página la franja correspondiente. Cuando algo «ocupa más de lo que debería», aquí se ve en qué capa está el sobrante.

Los superpuestos de grid y de flexbox. En el árbol del Inspector, los elementos que son contenedores llevan al lado un distintivo grid o flex. Al activarlo:

se dibujan sobre la página las líneas de la rejilla, numeradas, que son exactamente las que se escriben en grid-column-start y grid-row-start;
se pueden mostrar también los nombres de las áreas y el tamaño de cada pista;
en flexbox se marca el reparto del espacio sobrante entre los hijos.

Es la manera de comprobar que lo que se tiene en la cabeza al escribir el CSS coincide con lo que el navegador ha construido. En una página ajena, además, permite reconocer de un vistazo cómo está montada.

1 · el contenedor: div.content-container.grid

2 · sus propiedades de grid

3 · las líneas numeradas sobre la página

El grid del main, con sus líneas dibujadas sobre la página.

El contenedor del artículo declara display: grid con grid-template-columns: repeat(8, 1fr), dentro de una @media (min-width: 50rem): la rejilla solo existe a partir de ese ancho. Los dos hijos se colocan con grid-column: 1 / 5 —la foto— y 5 / 13 —el texto—, escrito en el atributo style de cada uno.

Obsérvese que el superpuesto numera trece líneas, más de las que esa regla define. Comparar lo que dice el CSS con lo que el navegador ha construido es exactamente para lo que sirve este panel.

La misma herramienta, en tres sitios de la misma página

La cabecera es otro grid, mucho más simple: dos columnas, grid-template-columns: auto 1fr. La primera se ajusta a su contenido —el logotipo— y la segunda se queda con el resto, que es donde va el menú.

1 · el contenedor de la cabecera

2 · display: grid con dos columnas

3 · logotipo y menú, en sus dos columnas

La cabecera: un grid de dos columnas.

Ese menú, por dentro, no es un grid sino un flexbox: una lista con display: flex, flex-wrap: wrap y un gap de 0.5rem 1.5rem. Los enlaces van en fila, separados, y si no caben pasan a la línea siguiente.

1 · la lista: ul.site-nav__list

2 · display: flex con wrap y gap

3 · los enlaces, en fila y separados

El menú: una lista en flex, con wrap y gap.

Y la tira de logotipos de clientes, otro flexbox: flex-wrap: wrap, align-items: center y un gap escrito con calc() para que crezca con el ancho de la ventana. Por eso los logos se reparten en filas y quedan centrados entre sí pese a tener alturas distintas.

1 · el contenedor: ul.logos-list

2 · sus propiedades de flex

3 · los logos, repartidos y con wrap

La lista de logotipos, repartida con flexbox.

Cuatro contenedores de la misma página: dos grid y dos flex. Ninguno se adivina mirando la pantalla; los cuatro se leen en dos clics con este panel.

Calculado

En Chrome, Computed. Mientras Reglas muestra lo que está escrito, este panel muestra lo que ha quedado: el valor final de cada propiedad una vez resueltas la cascada, la herencia y las unidades.

Aquí un width: 50% aparece ya en píxeles, un 2rem convertido, y un color en el formato que el navegador use internamente. Cada propiedad se puede desplegar para ver de qué regla concreta sale el valor que ha ganado.

El uso típico: cuando el panel de Reglas no enseña por ninguna parte la propiedad que se busca, se escribe en el buscador de Calculado, que las lista todas, incluidas las que el navegador aplica por omisión sin que nadie las haya escrito.

Panel Calculado

El panel Calculado: el valor final de una propiedad, ya en píxeles, y la regla de la que procede.

Tipografía

Este panel es de Firefox; Chrome no tiene equivalente.

Responde a una pregunta que no se puede contestar de otro modo: qué fuente se está usando de verdad. En el CSS se escribe una lista —la deseada y sus respaldos— y el navegador toma la primera que tenga disponible. Si la que se quería no llegó a cargar, la página se ve con otra y en el CSS no hay nada que lo indique.

El panel lista las fuentes realmente empleadas en el elemento, dice si vienen de un archivo del sitio o del sistema, y muestra una muestra del alfabeto. Si la fuente es variable, ofrece además los controles de sus ejes —grosor, anchura, inclinación— para probar valores en vivo.

En la captura de más arriba hay un caso real. En el panel de Reglas, font-family: Inter aparece tachada; y en la consola, abajo, un error en rojo avisa de que las fuentes pedidas a Google Fonts fueron bloqueadas por una discordancia de tipo MIME. Es decir: esa página no se está viendo con la tipografía que su autora escribió, y en el CSS no hay nada que lo delate. Solo lo dicen estos dos paneles.

Panel de Tipografía

El panel de Tipografía: la fuente que el elemento está usando de verdad y de dónde viene.

Animaciones

Una animación dura medio segundo y hay que mirarla entera para entenderla. Este panel la detiene.

Registra las animaciones y transiciones que se disparan en la página y las coloca en una línea de tiempo, cada una con su duración, su retardo y su curva. Desde ahí se puede:

arrastrar el cursor por la línea y dejar la animación congelada en cualquier instante;
reproducirla a cámara lenta, al 10 % o al 25 % de su velocidad;
ver los fotogramas clave uno a uno y qué propiedad cambia en cada uno.

Para que registre algo, la animación tiene que ocurrir con el panel abierto: se abre primero y después se recarga o se provoca el gesto que la dispara.

Panel de Animaciones

El panel de Animaciones: la línea de tiempo de una animación registrada y el control de velocidad.

La consola

Es la pestaña de al lado, y conviene mirarla siempre, aunque no se esté programando en JavaScript: ahí avisa el navegador de todo lo que le ha ido mal al montar la página. El número rojo de la barra superior cuenta los errores.

1 · la consola

2 · el error: las fuentes no cargaron

La consola, con el error que explica por qué la tipografía no es la pedida.

El de esta página merece leerse entero, porque explica algo que no se ve por ningún otro sitio:

El recurso de https://fonts.googleapis.com/css2?family=IBM+Plex+Mono… fue bloqueado debido a una discordancia del tipo MIME (text/html) (X-Content-Type-Options: nosniff).

Desmenuzado: la página pidió sus tipografías a Google Fonts. La respuesta que llegó venía declarada como text/html —una página web— y no como text/css, que es lo que debería ser una hoja de estilos. Y como esa respuesta traía además la cabecera X-Content-Type-Options: nosniff, que significa «no intentes adivinar qué es esto», el navegador no lo interpretó: lo bloqueó.

La consecuencia está dos párrafos más arriba, en el panel de Reglas: font-family: Inter aparece tachada. La página se está viendo con una tipografía de respaldo, no con la que su autora eligió. En el CSS no hay ningún error; el fallo está en lo que el servidor devolvió, y solo la consola lo dice.

Debajo del error hay además una lista de avisos en amarillo sobre propiedades que este navegador no reconoce —margin-trim, view-transition-name, field-sizing—. No son fallos de la página: son propiedades recientes que todavía no están implementadas en todos los navegadores.

2. El Editor de estilos

En Chrome esto vive dentro de Sources.

La diferencia con el panel de Reglas es el alcance. Reglas enseña lo que afecta a un elemento, troceado y reordenado por la cascada. El Editor de estilos enseña la hoja de estilos completa, tal como está escrita en el archivo, y permite editarla entera.

A la izquierda lista todas las hojas que la página ha cargado, que en un sitio real suelen ser varias. Al elegir una, aparece su contenido con el número de línea, y cualquier cambio se aplica a la página inmediatamente.

Sirve para dos cosas distintas:

Leer cómo está escrito el CSS de un sitio: la organización, el orden, los nombres de las clases, las variables.
Probar cambios de más de una regla a la vez, que en el panel de Reglas resulta incómodo.

Firefox permite además crear una hoja nueva y vacía con el botón +, para escribir reglas propias sobre una página ajena.

El aviso que hay que repetir

Nada de lo que se edita en el navegador se guarda. Al recargar la página, todo vuelve a como estaba. Las DevTools no escriben en los archivos: muestran y modifican lo que el navegador tiene en memoria.

Por eso el trabajo es siempre en dos tiempos: se prueba aquí hasta dar con lo que se quiere, y después se copia al editor, que es donde vive el archivo de verdad. El error de principiante —y no solo de principiante— es pasar veinte minutos afinando un valor en el navegador y recargar sin haberlo copiado.

3. El panel DOM

Este panel existe en Firefox. En Chrome lo más parecido es la pestaña Properties del Inspector, o escribir $0 en la consola, que devuelve el último elemento seleccionado.

Conviene avisar de entrada de lo que no es, porque al abrirlo la primera reacción es de desconcierto: aquí no se ven los elementos de la página. Ni el <header>, ni el <main>, ni ninguna etiqueta. Para eso está el Inspector.

1 · lo que se abre es window, no la página

2 · document: por aquí se llega a los elementos

3 · el tamaño real del viewport

4 · los manejadores de eventos, todos a null

El panel DOM: el objeto window, no el árbol de elementos.

Lo que se abre es window: el objeto global del navegador, con todo lo que el JavaScript de la página tiene a mano sin tener que pedirlo. Esa lista larguísima son sus propiedades, por orden alfabético.

Tres de esas propiedades:

document: Es una propiedad más de window, y es la puerta a la página: desplegándola se llega al árbol de elementos. Por eso en el código se escribe document.querySelector(…): se está pidiendo a ese objeto que busque dentro de sí mismo. Y por eso basta document y no window.document, que sería igual de correcto: lo que cuelga de window se puede nombrar directamente.
innerWidth e innerHeight: El tamaño real de la zona visible, en píxeles. En esta captura, 1315 × 1976. Son los números con los que se comparan las medidas de una media query, y aquí se leen sin tener que adivinarlos.
La retahíla de on…: onclick, onblur, onanimationend… Son los manejadores de eventos de la forma antigua, la de los atributos onclick="…". Están todos a null, y eso es exactamente lo que se espera de una página bien hecha: los eventos se registran con addEventListener, que no escribe nada en estas propiedades.

Hay más cosas reconocibles: localStorage, donde los sitios guardan datos en el navegador; location, con la dirección actual; navigator, con la información del propio navegador; y fetch, la función con la que una página pide datos a un servidor.

El reparto, entonces, es este: el Inspector para ver la página como árbol de etiquetas, y el panel DOM para verla como objetos con propiedades y valores, que es como la ve el JavaScript.

La distinción que conviene dejar clara

En el menú del navegador hay dos opciones que parecen la misma y no lo son:

Ver código fuente de la página: Muestra el archivo HTML tal como llegó del servidor. Es texto, y no cambia.
Inspeccionar: Muestra el árbol que el navegador tiene construido en memoria en este instante.

En una página sin JavaScript los dos coinciden. En cuanto hay JavaScript dejan de coincidir, porque el script añade, quita y modifica nodos: un menú desplegado, una clase puesta al pulsar o una lista cargada después aparecen en el Inspector y no en el código fuente. Lo que se ve en pantalla es siempre el árbol, no el archivo.

Lo que conviene retener

Clic derecho → Inspeccionar abre las herramientas con el elemento ya seleccionado.
En Reglas, lo tachado es lo que perdió la cascada. Ahí se lee por qué una regla no se aplica.
element {} son los estilos en línea, y son la primera sospecha.
Calculado da el valor final, ya resuelto; Reglas da lo que está escrito.
Los distintivos grid y flex del árbol dibujan las líneas sobre la página, numeradas igual que en el CSS.
Tipografía dice qué fuente se usa de verdad, no cuál se pidió.
El panel de Animaciones solo registra lo que ocurre con él abierto.
Nada se guarda al recargar. Lo que sirva, se copia al editor.
El Inspector muestra el árbol vivo; «Ver código fuente», el archivo. Con JavaScript de por medio, no son lo mismo.