Chrome DevTools para principiantes: cómo inspeccionar, depurar y medir la velocidad de una página web

Resumen ejecutivo

• Chrome DevTools es el conjunto de herramientas para desarrolladores que viene incluido en Google Chrome. No hay que instalar nada: se abre con F12 o con clic derecho y «Inspeccionar».

• Con cinco paneles (Elements, Console, Network, Device Mode y Lighthouse) ya podés editar HTML y CSS en vivo, leer errores, revisar qué carga la página, probarla en celular y medir su velocidad.

• Te dejamos un recorrido paso a paso con un ejercicio para cada panel.

• Los cambios que hacés en DevTools son temporales: sirven para probar, pero después hay que pasarlos a tu código.

Cuando empezás en desarrollo web, gran parte del tiempo se va en entender por qué algo no se ve como esperabas: un botón corrido, una imagen que no carga, un script que no hace nada. Chrome DevTools es la herramienta que te permite mirar «adentro» de cualquier página para encontrar la respuesta. Si recién arrancás con la estructura de una página, primero repasá los elementos y etiquetas más comunes de HTML; después volvé acá para inspeccionarlos en vivo. La documentación oficial de Chrome DevTools es muy completa, pero esta guía te muestra lo esencial para tus primeros proyectos.

Cómo abrir Chrome DevTools

• Atajo: F12 o Ctrl + Mayús + I en Windows y Linux; Cmd + Option + I en Mac.

• Desde un elemento: clic derecho sobre cualquier parte de la página y «Inspeccionar». DevTools se abre con ese elemento seleccionado.

• Directo a la consola: Ctrl + Mayús + J (Cmd + Option + J en Mac).

Podés acoplar el panel a la derecha, abajo o en una ventana aparte desde el menú de los tres puntos de DevTools.

Panel Elements: inspeccionar y editar HTML y CSS en vivo

Elements muestra el árbol del HTML de la página (el DOM) a la izquierda y los estilos CSS del elemento seleccionado a la derecha.

Qué podés hacer

• Seleccionar un elemento: usá el ícono de la flecha (arriba a la izquierda) y pasá el mouse por la página. Se resalta cada elemento con sus márgenes y rellenos.

• Editar texto o atributos: doble clic sobre el texto o el atributo en el árbol del DOM.

• Probar estilos: en el panel Styles podés cambiar valores, desactivar propiedades con la casilla o agregar reglas nuevas. Los estilos tachados son los que otra regla está pisando.

• Ver el modelo de caja: en la pestaña Computed aparece el diagrama con margin, border, padding y contenido. Es la forma más rápida de entender por qué un elemento ocupa más espacio del esperado.

Ejercicio: abrí cualquier página, seleccioná un título y cambiale el color y el tamaño de fuente desde Styles. Después recargá: los cambios desaparecen, porque solo existían en tu navegador.

Panel Console: leer errores y probar JavaScript

La consola muestra los mensajes de la página: errores en rojo, advertencias en amarillo y lo que imprimas con console.log().

• Leé el error completo: el mensaje dice qué falló y, a la derecha, en qué archivo y línea. Hacé clic en el link para ir directo al código.

• Errores típicos de principiante: Uncaught ReferenceError: x is not defined (usaste una variable que no existe o está mal escrita) y Cannot read properties of null (buscaste un elemento que no está en la página, muchas veces porque el script corre antes de que cargue el HTML).

• Probá código al instante: escribí JavaScript directamente en la consola. Por ejemplo, document.querySelector('h1').textContent te devuelve el texto del primer título.

Si un error no te queda claro, podés pegarlo en un asistente de IA para que te lo explique; te contamos cómo hacerlo bien en usar IA para entender errores de código.

Panel Network: ver qué carga la página

Network registra cada pedido que hace la página: el HTML, las hojas de estilo, los scripts, las imágenes y las llamadas a APIs. Recargá la página con el panel abierto para ver la lista.

• Columna Status: 200 significa que cargó bien; 404, que el archivo no existe (una ruta mal escrita, por ejemplo); 500, un error del servidor.

• Columna Size y Time: cuánto pesa y cuánto tarda cada recurso. Las imágenes pesadas suelen ser la primera causa de una página lenta.

• Filtros: usá Fetch/XHR para ver solo las llamadas a APIs, y hacé clic en una para ver la respuesta que devolvió el servidor.

• Simular una conexión lenta: en el menú de throttling elegí una conexión 3G y mirá cómo se comporta tu página con mala señal.

Device Mode: probar la página en celular

Con el ícono del celular y la tablet (o Ctrl + Mayús + M) activás el modo dispositivo. Podés elegir modelos de celular predefinidos o arrastrar el borde para cambiar el ancho y ver en qué punto se rompe el diseño.

Ejercicio: abrí tu proyecto y bajá el ancho hasta 360 píxeles. Si aparece un scroll horizontal, buscá con Elements qué elemento se sale del contenedor. Es la forma más rápida de detectar problemas de diseño responsive.

Lighthouse: medir velocidad y buenas prácticas

Lighthouse genera un informe automático con puntajes de rendimiento, accesibilidad, buenas prácticas y SEO. Lo encontrás en su propia pestaña dentro de DevTools.

• Elegí el dispositivo (móvil o computadora) y las categorías, y hacé clic en «Analyze page load».

• En rendimiento, mirá las métricas Core Web Vitals: cuánto tarda en aparecer el contenido principal (LCP), cuánto se mueve el diseño mientras carga (CLS) y qué tan rápido responde a la interacción (INP).

• Debajo, la sección de oportunidades te sugiere mejoras concretas, como comprimir imágenes o eliminar código que no se usa.

No te obsesiones con llegar a 100: usá el informe para encontrar los problemas más grandes y corregirlos de a uno.

Un flujo de depuración para tus proyectos

1. Algo no se ve bien: inspeccioná el elemento en Elements y revisá estilos tachados y el modelo de caja.

2. Algo no funciona: abrí Console y buscá errores en rojo.

3. Algo no carga: mirá Network y buscá estados 404 o 500.

4. Algo se rompe en celular: activá Device Mode.

5. Antes de mostrar el proyecto: corré Lighthouse y corregí lo más importante.

Si querés ordenar todo lo que viene después de dominar estas herramientas, mirá nuestra ruta de aprendizaje frontend.

Cursos recomendados de Coderhouse

Para usar DevTools todos los días sobre tus propios proyectos, el curso de Desarrollo Web te enseña HTML, CSS y diseño responsive desde cero. Cuando quieras depurar lógica en la consola, el siguiente paso es el curso de JavaScript.

Preguntas frecuentes

¿Chrome DevTools es gratis? Sí. Viene incluido en Google Chrome y en otros navegadores basados en Chromium, como Edge y Brave, con herramientas muy similares.

¿Los cambios que hago en DevTools modifican la página real? No. Solo cambian lo que ves en tu navegador y se pierden al recargar. Para que queden, tenés que pasarlos a tu código.

¿Puedo usar DevTools para ver el código de cualquier sitio? Podés ver el HTML, CSS y JavaScript que el sitio envía al navegador, pero no el código del servidor ni las bases de datos.

¿Firefox tiene algo parecido? Sí, Firefox Developer Tools ofrece paneles equivalentes. Lo que aprendas en Chrome te sirve para cualquier navegador.