Browser DevTools a fondo: la herramienta que tienes abierta y no aprovechas

Las DevTools del navegador son probablemente la herramienta que más tiempo tienes abierta como desarrollador web. También son probablemente la que menos aprovechas.

La mayoría usamos el inspector de elementos para ver estilos CSS y la consola para hacer console.log. Pero detrás de esas dos pestañas hay un conjunto de herramientas de análisis y depuración que pueden ahorrarte horas de trabajo.

Este artículo cubre Chrome DevTools, aunque Firefox y Edge tienen equivalentes muy similares. Puedes abrirlas con F12 o Cmd+Option+I en Mac.

Panel Elements: más allá de inspeccionar HTML

Todo el mundo conoce el inspector de elementos, pero hay detalles que pasan desapercibidos.

Editar el DOM en directo. Haz doble clic sobre cualquier nodo para editar su contenido o atributos. Puedes arrastrar nodos para cambiar su orden, eliminarlos con la tecla Delete o copiar su HTML con clic derecho.

Forzar estados CSS. En la pestaña Styles, el botón :hov te permite forzar estados como :hover, :focus, :active o :visited sin necesidad de activarlos con el ratón. Imprescindible para depurar estilos de hover.

Ver qué estilos se están aplicando realmente. La pestaña Computed muestra el valor final calculado de cada propiedad CSS, ya resueltas las especificidades y las herencias. Cuando un estilo no se aplica como esperas, aquí ves por qué.

Buscar en el DOM. Ctrl+F dentro del panel Elements abre un buscador que acepta texto, selectores CSS y expresiones XPath.

Panel Console: más potente de lo que parece

La consola no es solo para console.log. Tiene un conjunto completo de métodos y funciones útiles.

// Mostrar datos tabulados (ideal para arrays de objetos)
console.table(usuarios);

// Medir tiempo de ejecución
console.time('operacion');
hacerAlgo();
console.timeEnd('operacion'); // → operacion: 12.4ms

// Agrupar mensajes
console.group('Petición API');
console.log('URL:', url);
console.log('Respuesta:', data);
console.groupEnd();

// Mostrar traza de llamadas
console.trace('desde aquí');

$0 es el elemento seleccionado. Si tienes un elemento seleccionado en el panel Elements, puedes referenciarte a él desde la consola con $0. $1 es el anterior, $2 el anterior al anterior, hasta $4.

$(selector) y $$(selector). Son atajos de document.querySelector y document.querySelectorAll disponibles directamente en la consola.

$$('a[href^="http"]') // todos los enlaces externos

Panel Network: depurar peticiones HTTP

El panel Network es donde se ven todas las peticiones que hace tu página: HTML, CSS, JS, imágenes, llamadas a APIs...

Filtrar por tipo. Los botones de la barra superior filtran por XHR/Fetch (llamadas a API), JS, CSS, Img, Media. Cuando depuras una llamada a API, activa solo XHR/Fetch para no perderte entre el ruido.

Ver el detalle de una petición. Haz clic en cualquier petición para ver:

Headers: los headers de la request y la response.
Payload: el cuerpo de la petición (para POST, PUT...).
Response: la respuesta en texto o formateada.
Timing: cuánto tiempo tardó cada fase (DNS, conexión, espera, descarga).

Simular conexión lenta. El desplegable "No throttling" te permite simular 3G, 4G u otras velocidades. Fundamental para ver cómo se comporta tu app en condiciones reales.

Preserve log. Activa esta opción para que el historial de peticiones no se borre al navegar a otra página. Muy útil para depurar flujos que implican redirecciones.

Bloquear recursos. Clic derecho sobre una petición → "Block request URL". Puedes probar qué pasa si un script de terceros no carga, o si tu API falla.

Panel Sources: depuración con breakpoints

Sources es el depurador de JavaScript. Puedes pausar la ejecución, inspeccionar variables y ejecutar código paso a paso.

Poner un breakpoint. Abre un archivo JS y haz clic en el número de línea. La ejecución se pausará cuando llegue a ese punto.

debugger en el código. Puedes escribir debugger; directamente en tu JavaScript. El navegador pausará la ejecución ahí si las DevTools están abiertas.

function calcularPrecio(items) {
  debugger; // el navegador pausará aquí
  return items.reduce((total, item) => total + item.precio, 0);
}

Breakpoints condicionales. Clic derecho sobre el número de línea → "Add conditional breakpoint". Solo pausa si se cumple una condición. Perfecto cuando el bug solo ocurre con ciertos datos.

Watch expressions. En el panel lateral puedes añadir expresiones que se evalúan en tiempo real mientras la ejecución está pausada.

Panel Performance: encontrar por qué tu app va lenta

Performance te permite grabar lo que hace el navegador durante un periodo de tiempo y analizar cada milisegundo.

Cómo usarlo:

Abre el panel Performance.
Pulsa el botón de grabar (círculo rojo).
Reproduce la acción que va lenta.
Para la grabación.

Verás una línea de tiempo con frames por segundo (FPS), llamadas a JavaScript, renderizado, pintura...

Lo que debes buscar:

Barras rojas en la línea de FPS: frames que tardaron demasiado (janky animation).
Funciones JavaScript que ocupan demasiado tiempo en la flame chart.
Recálculos de layout frecuentes (aparecen en morado).

Panel Application: storage, cookies y más

Este panel te da acceso a todos los datos que la página guarda en el navegador.

Local Storage y Session Storage: ver, editar y borrar pares clave-valor.
Cookies: ver todas las cookies, sus atributos (HttpOnly, Secure, SameSite) y su valor.
Cache Storage: archivos almacenados por Service Workers.
IndexedDB: base de datos estructurada del navegador.

Desde aquí también puedes forzar la actualización de un Service Worker o limpiar todos los datos almacenados con el botón "Clear site data".

Atajos que vale la pena memorizar

Atajo	Acción
`F12` / `Cmd+Option+I`	Abrir/cerrar DevTools
`Ctrl+Shift+P`	Paleta de comandos
`Ctrl+P`	Abrir archivo
`Esc`	Abrir/cerrar consola en cualquier panel
`Ctrl+L`	Limpiar consola
`F8`	Pausar/reanudar ejecución
`F10`	Siguiente línea (step over)
`F11`	Entrar en función (step into)

Conclusión

Las DevTools son un entorno de desarrollo completo integrado en el navegador. Cada panel está diseñado para resolver un tipo de problema concreto.

La próxima vez que tengas un bug o un problema de rendimiento, antes de añadir otro console.log, abre el panel correcto. Probablemente ya te está dando la respuesta.