Como poner Attach como debugger en VSC

by Lara Alonso
¿Qué es Attach? ¿Qué es debuggar?

El término "debuggar" en programación se refiere al proceso de identificar, analizar y corregir errores o fallos en el códigode un programa. El objetivo del debugging es encontrar y solucionar los problemas que puedan estar causando un comportamiento incorrecto, inesperado o no deseado en un programa.
El debugging se realiza mediante el uso de herramientas específicas, como depuradores o debuggers, que permiten examinar el estado interno del programa en tiempo de ejecución. Estas herramientas permiten realizar acciones como establecer puntos de interrupción en el código, examinar el valor de las variables en diferentes momentos, seguir la ejecución línea por línea, entre otras funcionalidades.
En el contexto de la programación, "Attach" se refiere a la acción de conectar o vincular un proceso en ejecución a una herramienta de depuración, como un depurador o un profiler.
Cuando se realiza el "Attach" a un proceso, se establece una conexión entre la herramienta de depuración y el programa en ejecución. Esto permite al desarrollador examinar el estado interno del programa, realizar seguimiento de la ejecución, inspeccionar variables y realizar otras acciones de depuración en tiempo real.
El "Attach" es especialmente útil en situaciones en las que no es posible iniciar el programa desde el principio en modo de depuración, como en el caso de programas que ya están en ejecución, aplicaciones de terceros o programas en entornos de producción. Al adjuntar la herramienta de depuración al proceso en ejecución, el desarrollador puede analizar y solucionar problemas sin necesidad de reiniciar el programa.
Es importante tener en cuenta que no todos los lenguajes de programación o entornos de desarrollo admiten la funcionalidad de "Attach". Algunos lenguajes o entornos pueden requerir que el programa se ejecute en un modo especial de depuración desde el inicio para poder ser inspeccionado por una herramienta de depuración.

¿Y cómo configuro Attach en Visual Studio Code?

Lo primero, como siempre, aquí tienes la documentación oficial en https://code.visualstudio.com/docs/editor/debugging

  • Crea una nueva carpeta en la raíz del proyecto que se llame .vscode
  • Dentro de esta carpeta crea un archivo launch.jsoncon el siguiente código:

    • {
    "version": "0.2.0",
    "configurations": [
    {
    "name": "Launch",
    "program": "${workspaceFolder}/pages/index.js",
    "request": "launch",
    "skipFiles": [
    " <node_internals>/**"
    ],
    "type": "node"
    },
    {
    "name": "Attach",
    "type": "node",
    "request": "attach",
    "port": 9229
    }
    ]
    }

  • Instala el paquete npm i cross-env
  • A continuación en el archivo package.json modifica el "dev" que está dentro de scripts:

    • "dev": "cross-env NODE_OPTIONS='--inspect=0.0.0.0:9229'next dev",

  • A partir de ahora para debuggar debes marcar un breakpoint (punto rojo en la línea de código que quieres que pare) o los que necesites. Debes ir a la opción de debugger en VSC, hacer click y ya puedes ejecutar npm run dev como siempre. Si el código que estás ejecutando pasa por el breakpoint que has marcado este se detendrá y podrás ir viendo como se ejecuta tu código línea a línea.

    • icono debugger VSC
    Espero que os haya gustado 😄
    Lara Alonso

    Lara Alonso @aiadevop

    Soy desarrolladora de software en España. Especializada en frontend, creo experiencias web y aplicaciones. Explora mi portfolio y descubre mis proyectos.

    ¡Tu visión mi código!
    Gracias a todos los que han colaborado en este blog