Depuración de código TypeScript: herramientas y técnicas para el desarrollador

Depuración de código TypeScript: convertimos errores en tareas

¿Alguna vez has perdido una hora buscando un error que resultó ser un simple error tipográfico en el nombre de una variable? ¿O te has sorprendido pensando que console.log es la única herramienta que usas? Bienvenido al club. La depuración no es solo "atrapar errores", sino todo un arte de entender cómo funciona realmente tu código.

TypeScript añade un encanto especial a esta historia. Por un lado, la tipificación estática elimina toda una clase de errores ya en la etapa de compilación. Por otro lado, cuando el código ya está compilado en JavaScript, depurarlo "sobre la marcha" se vuelve más difícil: escribes en TS, pero ves en el navegador el JS compilado. ¿Cómo no perderse en este laberinto?

Hoy te mostraré técnicas reales de depuración de código TypeScript que uso yo mismo. Sin rodeos: solo herramientas prácticas, ejemplos y trucos que te ahorrarán nervios y horas de trabajo.

¿Por qué la depuración de TypeScript es diferente de la depuración de JavaScript?

La característica principal de TypeScript es la transpilación. Escribes código con tipos, genéricos e interfaces, y el navegador o Node.js reciben JavaScript puro. Esto significa que al depurar, ves código compilado que puede diferir mucho del original: los nombres de las variables pueden haber cambiado, los genéricos se han borrado y las interfaces han desaparecido por completo.

Solución — Source Maps. Son mapas de correspondencia entre el TS original y el JS compilado. Sin ellos, la depuración de TypeScript se convierte en adivinación con posos de café.

Configuración de Source Maps: el primer paso hacia la transparencia

Para que el navegador o el depurador entiendan a qué línea de TS corresponde una línea de JS, debes habilitar la generación de source maps en tsconfig.json:

{\n  "compilerOptions": {\n    "sourceMap": true,\n    "outDir": "./dist",\n    "target": "ES2020",\n    "module": "commonjs"\n  },\n  "include": ["src/**/*"]\n}

Ahora, al compilar, junto a cada archivo JS aparecerá un archivo .map. El navegador (Chrome, Firefox) lo cargará automáticamente y podrás establecer puntos de interrupción directamente en el código TypeScript.

Importante: en producción es mejor desactivar los source maps o usar endpoints ocultos para no exponer el código fuente a los usuarios. Configúralo mediante variables de entorno:

// tsconfig.prod.json\n{\n  "extends": "./tsconfig.json",\n  "compilerOptions": {\n    "sourceMap": false\n  }\n}

Herramientas de depuración de TypeScript: tu arsenal

1. VS Code — depurador integrado

Visual Studio Code es, probablemente, el mejor entorno para depurar TypeScript. El depurador integrado sabe leer source maps y establecer breakpoints directamente en archivos .ts. Aquí tienes una configuración mínima de launch.json:

{\n  "version": "0.2.0",\n  "configurations": [\n    {\n      "type": "node",\n      "request": "launch",\n      "name": "Depuración TS con ts-node",\n      "runtimeArgs": ["-r", "ts-node/register"],\n      "args": ["${workspaceFolder}/src/index.ts"],\n      "sourceMaps": true,\n      "cwd": "${workspaceFolder}",\n      "protocol": "inspector"\n    }\n  ]\n}

Ahora puedes presionar F5 y entrar directamente al depurador. Coloca puntos rojos a la izquierda de los números de línea: funcionarán incluso si estás depurando código TypeScript con genéricos y decoradores.

Truco: usa debugger; directamente en el código: es equivalente a establecer un breakpoint, pero no requiere el ratón.

2. Chrome DevTools — depuración de frontend

Para proyectos frontend en TypeScript (React, Angular, Vue), Chrome DevTools es imprescindible. Abre la pestaña Sources, busca tu archivo en la carpeta webpack:// o src — si los source maps están configurados correctamente, verás el TypeScript original.

Funciones útiles:

\n
• Conditional breakpoints