DevTools desde cero: qué son y cómo te hacen más rápido

Primera toma de contacto con las herramientas de desarrollador del navegador: para qué sirven, cómo abrirlas y qué paneles usar primero.

Si estás desarrollando web y no usas DevTools, vas con una mano atada 😅. Aquí aprenderás a inspeccionar, depurar y optimizar sin adivinar.

Piensa en DevTools como tu laboratorio: puedes ver el DOM real, reglas CSS activas, peticiones de red, errores JS y rendimiento.

Cuando acabes esta intro, te recomiendo ir directo a <a href="/curso/devtools/leccion/devtools-elements-estilos-inspector">Elements y Styles</a> para ganar valor desde la primera práctica.

Si te falta base de HTML/CSS, apóyate en <a href="/curso/html">HTML</a> y <a href="/curso/css">CSS</a> para entender mejor lo que vas a inspeccionar.

  • Conjunto de herramientas integradas en el navegador para desarrollo y debugging.
  • DevTools no es solo una consola. Incluye paneles especializados para estructura HTML, estilos CSS, ejecución JavaScript, red, almacenamiento, rendimiento y más.
  • La clave es trabajar con evidencia: en vez de suponer por qué algo falla, lo ves en tiempo real con datos concretos.
  • <code>Elements</code>: DOM y CSS efectivos.
  • <code>Console</code>: logs, errores y pruebas rápidas.

¿Qué son exactamente las DevTools?

Conjunto de herramientas integradas en el navegador para desarrollo y debugging.

DevTools no es solo una consola. Incluye paneles especializados para estructura HTML, estilos CSS, ejecución JavaScript, red, almacenamiento, rendimiento y más.

La clave es trabajar con evidencia: en vez de suponer por qué algo falla, lo ves en tiempo real con datos concretos.

  • <code>Elements</code>: DOM y CSS efectivos.
  • <code>Console</code>: logs, errores y pruebas rápidas.
  • <code>Sources</code>: breakpoints y depuración paso a paso.
  • <code>Network</code>: peticiones, tiempos, caché y payloads.
  • <code>Performance</code>: CPU, long tasks y trazas.

Cómo abrirlas y moverte sin fricción

Atajos y hábitos que te ahorran minutos en cada sesión.

Atajos típicos: <code>F12</code> o <code>Ctrl+Shift+I</code> (Windows/Linux), <code>Cmd+Opt+I</code> (macOS). También puedes inspeccionar un elemento con clic derecho + Inspeccionar.

Un truco práctico: acopla DevTools a la derecha para comparar cambios visuales y código al mismo tiempo.

DevTools
01

DevTools desde cero: qué son y cómo te hacen más rápido

Primera toma de contacto con las herramientas de desarrollador del navegador: para qué sirven, cómo abrirlas y qué paneles usar primero.

Código del tema: Diagnostico real en navegador

📘 Teoría

¿Qué son exactamente las DevTools?

Conjunto de herramientas integradas en el navegador para desarrollo y debugging.

DevTools no es solo una consola. Incluye paneles especializados para estructura HTML, estilos CSS, ejecución JavaScript, red, almacenamiento, rendimiento y más.

La clave es trabajar con evidencia: en vez de suponer por qué algo falla, lo ves en tiempo real con datos concretos.

  • Elements: DOM y CSS efectivos.
  • Console: logs, errores y pruebas rápidas.
  • Sources: breakpoints y depuración paso a paso.
  • Network: peticiones, tiempos, caché y payloads.
  • Performance: CPU, long tasks y trazas.

Cómo abrirlas y moverte sin fricción

Atajos y hábitos que te ahorran minutos en cada sesión.

1

Atajos típicos: F12 o Ctrl+Shift+I (Windows/Linux), Cmd+Opt+I (macOS). También puedes inspeccionar un elemento con clic derecho + Inspeccionar.

2

Un truco práctico: acopla DevTools a la derecha para comparar cambios visuales y código al mismo tiempo.

🧰 Recursos

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .