𝗛𝗼𝘄 𝘁𝗼 𝗗𝗲𝗯𝘂𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗟𝗶𝗸𝗲 𝗮 𝗦𝗲𝗻𝗶𝗼𝗿 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿
Deja de usar console.log para todo. Estás perdiendo horas cada semana.
Pasé 8 años solucionando problemas en producción. Este flujo de trabajo reduce el tiempo de depuración en un 60%.
| Herramienta | Caso de uso | Tiempo ahorrado |
|---|---|---|
| Chrome DevTools Sources | Depuración paso a paso | 40% |
| Conditional Breakpoints | Localizar errores en bucles | 25% |
| Performance Panel | Encontrar cuellos de botella en el renderizado | 35% |
| Network Panel | Problemas de tiempos de la API | 30% |
| Console.assert | Detectar errores de lógica de forma temprana | 15% |
Deja de esparcir logs por todas partes. Usa estos métodos en su lugar.
Usa Conditional Breakpoints Abre DevTools Sources. Haz clic en un número de línea para establecer un breakpoint. Haz clic derecho y selecciona Edit breakpoint. Añade una condición. El depurador se detendrá solo cuando tu condición sea verdadera. Esto ahorra horas en bucles grandes.
Estudia el Call Stack Cuando el depurador se detenga, observa el panel Call Stack. Muestra la ruta que condujo al error. Haz clic derecho en un frame y selecciona Copy stack trace para guardarlo.
Usa Log Points Si quieres obtener resultados sin detener el código, usa Log points. Haz clic derecho en un número de línea y selecciona Add log point. Esto no cambia tu código fuente. Desaparece cuando cierras DevTools.
Soluciona aplicaciones lentas con el Performance Panel Abre la pestaña Performance. Haz clic en Record. Usa tu página durante 5 segundos. Detén la grabación. Busca tareas largas de más de 50ms en el hilo principal (Main thread). Esto revela problemas de layout y painting.
Inspecciona el Network Panel Revisa la vista Waterfall. Las barras rojas o moradas significan solicitudes bloqueadas. Los espacios grandes significan que JavaScript está bloqueando el hilo principal. Haz clic derecho en una solicitud y selecciona Copy as cURL para probar problemas de la API en tu terminal.
Tu lista de verificación de depuración:
- Establece un breakpoint condicional
- Revisa el Call Stack para ver la ruta de ejecución
- Usa el panel Scope para las variables locales
- Añade un log point para monitorear valores
- Graba un perfil de Performance para problemas de tiempos
- Revisa el panel Network para problemas de la API
Dominar este flujo de trabajo toma dos semanas. Es la mejor mejora de productividad para tu carrera. Tu navegador ya tiene estas herramientas. Úsalas.
Fuente: https://dev.to/kui_luo/how-to-debug-javascript-like-a-senior-developer-in-2025-3d0p