DevTools es una herramienta que usamos a diario en desarrollo frontend, pero rara vez exploramos todo su potencial. Más allá de inspeccionar elementos y revisar la consola, hay una serie de funcionalidades avanzadas que pueden transformar por completo cómo depuras, optimizas y experimentas con tus interfaces.

1. Accede desde la consola a elementos inspeccionados usando $0, $1, etc.

Qué puedes hacer con esto:

Manipular en consola los elementos que acabas de inspeccionar sin tener que volver a seleccionarlos manualmente.

Cómo usarlo paso a paso:

1. Abre DevTools en tu navegador.
2. Ve a la pestaña “Elementos”.
   Ahí puedes inspeccionar y navegar el DOM visualmente.
3. Selecciona un elemento que quieras probar.
   Haz clic derecho sobre el nodo y elige “Inspeccionar”.
4. Cambia a la pestaña “Consola”.
   Aquí puedes escribir comandos de JavaScript directamente.
5. Escribe $0 y presiona Enter.
   $0 se refiere al último elemento que seleccionaste.
   $1, $2, etc., hacen referencia a los anteriores (hasta $4).
6. Usa $0 como cualquier variable en JS.
   Por ejemplo: $0.style.background = ‘red’;
   Puedes probar clases, atributos o ejecutar funciones directamente.

Navegadores compatibles: Chrome, Edge, Firefox (con variaciones).

2. Analiza el rendimiento visual de tu aplicación

Qué puedes hacer con esto:

Visualizar claramente cómo se está comportando tu aplicación en términos de ejecución de scripts, diseño y renderizado, y detectar cuellos de botella.

Cómo usarlo paso a paso:

1. Abre las herramientas de desarrollo (DevTools).
2. Ve al menú de tres puntos (arriba a la derecha) > “Más herramientas” > “Supervisión del rendimiento”.
   Puede llamarse “Performance insights” en algunas versiones.
3. Haz clic en “Rendimiento”.
4. Haz clic en “Grabar y volver a cargar”.
   Esto reiniciará la carga de la página y comenzará a grabar lo que ocurre.
5. Espera que la página se cargue y detén la grabación.
   Verás un timeline con bloques de colores:
   Script, Layout, Paint, Rendering, etc.
6. Explora el timeline y haz zoom en las secciones más pesadas.
   Puedes ver qué tareas se están ejecutando, cuánto tiempo toman y qué archivos están involucrados.
7. Haz clic en tareas específicas para más detalles.
   Esto te mostrará qué función causó esa carga o bloqueo.

Navegadores compatibles: Chrome, Edge.

3. Modifica archivos directamente desde el navegador y mantenlos entre recargas

Qué puedes hacer con esto:

Editar archivos HTML, CSS o JavaScript directamente desde DevTools y mantener los cambios persistentes al recargar la página.

Cómo usarlo paso a paso:

1. Abre DevTools y ve a la pestaña “Fuentes”.
   Aquí puedes ver y editar los archivos cargados por la web.
2. Haz clic en el menú de tres puntos dentro de la pestaña “Fuentes” > elige “Anulaciones” (Overrides).
   Si es la primera vez que lo usas, aparecerá una guía rápida.
3. Activa la función de sobrescritura y selecciona una carpeta local de tu sistema.
   El navegador pedirá permisos para acceder a esa carpeta.
   Esa carpeta servirá como “cache local” para los archivos que quieras editar.
4. Carga tu página web normalmente y busca un archivo que quieras modificar (por ejemplo, main.css o app.js).
5. Haz los cambios directamente desde DevTools y presiona Ctrl+S (o Cmd+S en Mac) para guardarlos.
   El archivo se guardará en tu carpeta local seleccionada.
6. Recarga la página.
   El navegador usará tu versión local del archivo en lugar de la del servidor.

Navegadores compatibles: Chrome, Edge.

4. Simula preferencias del sistema del usuario

Qué puedes hacer con esto:

Testear cómo se comporta tu interfaz con configuraciones de accesibilidad como modo oscuro, reducción de movimiento o mayor contraste.

Cómo usarlo paso a paso:

1. Abre DevTools y ve al menú de tres puntos (arriba a la derecha).
   Selecciona “Más herramientas” > “Rendering” (Renderizado).
2. Busca la sección “Simular funciones de medios CSS” (o “Emulate CSS media feature…”).
   Aquí puedes activar simulaciones de preferencias del usuario.
3. Marca una o varias de estas opciones:
   • prefers-color-scheme: Simula modo claro u oscuro.
     Útil para probar si tu sitio cambia estilos automáticamente.
   • prefers-reduced-motion: Simula que el usuario prefiere menos animaciones.
     Ideal para verificar accesibilidad.
   • prefers-contrast: Simula alto contraste o contraste bajo.
4. Observa cómo cambia tu interfaz al activar estas opciones.
   Si tu CSS responde correctamente a estas configuraciones, verás los cambios reflejados al instante.

Navegadores compatibles: Chrome, Edge, Firefox (parcialmente).

5. Reemplaza respuestas de red con archivos personalizados

Qué puedes hacer con esto:

Interceptar respuestas de red y usar archivos locales personalizados para pruebas sin tocar el backend.

Cómo usarlo paso a paso:

1. Abre DevTools y ve a la pestaña “Red”.
   Asegúrate de que la casilla “Mantener registro” esté activada para que no se borren las solicitudes.
2. Realiza una acción que dispare la petición que te interesa (por ejemplo, un fetch a /api/productos).
3. Haz clic derecho sobre la petición que quieres modificar y selecciona “Guardar respuesta como…”.
   Guarda el archivo en tu computadora con el mismo nombre (por ejemplo, productos.json).
4. Luego, ve a la pestaña “Fuentes” > menú de tres puntos > “Anulaciones” (Overrides).
5. Activa los overrides y selecciona la carpeta local donde guardaste el archivo.
   Asegúrate de que la estructura del archivo guardado coincida con la ruta original.
6. Cuando vuelvas a cargar la app, el navegador usará tu archivo local como respuesta a esa petición.
   Puedes modificarlo cuantas veces quieras para probar distintos escenarios.

Navegadores compatibles: Chrome, Edge.
Referencia: Override responses with files

6. Detecta código que no se utiliza

Qué puedes hacer con esto:

Identificar y eliminar CSS o JavaScript que no se ejecuta para optimizar el rendimiento y peso de tu aplicación.

Cómo usarlo paso a paso:

1. Abre DevTools y ve al menú de tres puntos en la parte superior derecha.
   Selecciona “Más herramientas” > “Cobertura” (Coverage).
2. Haz clic en el botón “Iniciar instrumentación de cobertura”.
   Esto comenzará a registrar qué código se ejecuta y cuál no.
3. Recarga la página para que el análisis capture toda la información desde el inicio.
   El panel de cobertura te mostrará un gráfico y lista de archivos analizados.
4. En la lista de archivos, haz clic en uno de ellos (por ejemplo, style.css o main.js).
   Verás qué líneas de código están en verde (usadas) y cuáles en rojo (no utilizadas).
5. Revisa los archivos no utilizados y considera eliminarlos para optimizar tu proyecto.
   ¡Asegúrate de hacer pruebas después para verificar que no haya dependencias ocultas!

Navegadores compatibles: Chrome, Edge.
Referencia: Detect unused code

7. Desactiva escuchadores de eventos desde el inspector

Qué puedes hacer con esto:

Evitar comportamientos no deseados como redirecciones, validaciones automáticas o restricciones al interactuar con el DOM.

Cómo usarlo paso a paso:

1. Abre DevTools y ve a la pestaña “Elementos”.
   Aquí puedes inspeccionar el DOM de tu página.
2. Selecciona el nodo del DOM donde deseas desactivar los listeners.
   Haz clic sobre un elemento específico, como un botón o enlace.
3. Haz clic en el icono de eventos en la esquina superior derecha del panel de estilos (parece un rayo o “<>”).
   Esto abrirá una lista de todos los eventos asociados a ese elemento.
4. Busca el evento que quieres desactivar y desmarca la casilla correspondiente.
   Por ejemplo, si hay un listener de click, desmárcalo para que no se ejecute cuando interactúas con el elemento.
5. Ahora puedes seguir inspeccionando el elemento sin que el evento se dispare.
   Esto es útil para evitar interacciones que cambien el estado de la página mientras depuras.

Navegadores compatibles: Chrome, Edge.
Referencia: Disable event listeners

8. Detecta fugas de memoria (Memory Leaks)

Qué puedes hacer con esto:

Identificar objetos que deberían haber sido eliminados de la memoria pero siguen existiendo, lo que puede causar que tu aplicación se vuelva lenta o incluso se bloquee con el tiempo.

Por qué es útil:

Las fugas de memoria son errores silenciosos que no siempre se manifiestan de inmediato, pero pueden generar un gran impacto en el rendimiento. Detectarlas a tiempo te permite mantener tu app liviana y eficiente.

Cómo usarlo paso a paso:

1. Abre DevTools y ve a la pestaña “Memoria” (Memory).
2. Familiarízate con las tres herramientas principales que ofrece:
   Capturas de montículo (Heap snapshot): toma una foto de los objetos en memoria.
   Grabación de asignaciones: muestra qué objetos se están asignando con el tiempo.
   Gráfico de tiempo de vida: rastrea cuánto viven ciertos objetos.
3. Selecciona “Snapshot de heap” y haz clic en “Tomar snapshot”.
   Esto capturará el estado actual de la memoria de tu app.
4. Interactúa con tu aplicación: cambia de página, abre un modal, realiza acciones comunes…
   El objetivo es simular un uso normal que podría causar retención de memoria.
5. Vuelve a la pestaña “Memoria” y toma un segundo snapshot.
   Ahora podrás comparar los dos snapshots y ver si ciertos objetos siguen en memoria cuando ya no deberían.
6. Filtra los resultados por objetos que no tienen referencias claras, o que están creciendo entre snapshots.
   Puedes buscar por clase o tipo de objeto (por ejemplo: listeners, componentes, closures, etc.)
7. Si ves objetos que persisten sin necesidad, revisa si:
   Hay listeners no removidos (addEventListener sin removeEventListener)
   Variables globales innecesarias
   Closures o referencias cruzadas entre módulos

Navegadores compatibles: Chrome, Edge (Firefox tiene herramientas similares en “Performance” y “Memory”).

Estas funciones avanzadas de DevTools pueden marcar una gran diferencia en tu productividad, capacidad de análisis y control sobre el comportamiento de tus aplicaciones web. Ya sea para depurar, simular entornos, mejorar rendimiento o hacer pruebas sin tocar el código real, dominar estas herramientas es una ventaja competitiva clara.