yuraksisa.com

Depuración Ruby con VSCode o Cursor

Durante tiempo hemos usado las gemas ruby-debug-ide y debase junto con la extensión Ruby de Peng Lv para VSCode pero esta extensión está en desuso y teníamos que encontrar una alternativa. Queríamos integrar la gema ‘debug’ y ser capaces de tener el debug integrado en el VS Code.

Nuestro proyecto es un poco especial porque es un SaaS que usa subdominios para identificar los tenants. Además, está programado en Ruby + Sinatra y en desarrollo usamos puma-dev y los que usamos MacOs lo tenemos preparado para que arranque automáticamente al iniciar el equipo.

Preparación del proyecto

Preparando el proyecto para usar la gema ‘debug’, así que lo primero que hicimos fue añadir esta gema en el grupo :development fichero Gemfile

gem 'debug'

A continuación, teníamos que cambiar la forma en la que iniciamos la depuración. Lo estábamos haciendo en el fichero config.ru y lo adaptamos con el siguiente código. Para configurar el modo de depuración hemos de añadir un fichero debug.txt, que no está en el control de versiones, en la raíz de nuestro proyecto.

if File.exist?('debug.txt')

  ENV['RUBY_DEBUG_NONSTOP'] = '1'
  ENV['RUBY_DEBUG_OPEN'] = "tcp://127.0.0.1:1234"
  require 'debug'

end

Ahora que lo tenemos todo preparado tenemos que preparar VSCode o Cursor para ser capaces de depurar.

Si arrancamos el programa y tenemos el fichero debug.txt en la raíz, el sistema estará preparado para que VSCode se pueda conectar con el depurador.

Preparación de VSCode o Cursor

Para poder depurar el código en VSCode o Cursor son necesarios 2 pasos:

  • Instalar una extensión para rdbg que permita conectar con el debugger
  • Preparar una configuración de depuración usando la extensión.

Instalar la extensión VSCode rdbg

El primer paso es ir a las extensiones, buscar la extensión VSCode rdbg e instalarla.

Crear el fichero launch.json

El siguiente paso es crear el fichero que permitirá que VSCode se comunique con el depurador del programa.

Si no tienes el fichero en la carpeta .vscode, lo que has de hacer es crearlo. Para esto ves a la depuración en el menú principal y agrega una configuración en tu proyecto.

A continuación, selecciona la opción “Ruby: attach a process with rdbg”

Y por último ajusta el fichero resultante con los siguientes detalles

{
    // Use IntelliSense para saber los atributos posibles.
    // Mantenga el puntero para ver las descripciones de los existentes atributos.
    // Para más información, visite: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "rdbg", // "rdbg" is the type of the debugger
            "name": "Debug Ruby Sinatra",
            "request": "attach",
            "debugPort": "1234",  // The same port as in the config.ru file
            "localfs": true       // To be able to debug the local files using breakpoints
        }
    ]
}

Aquí la clave es indicar lo siguiente:

AtributoValorDescripción
typerdgbIndica la extensión instalada
debugPort1234El mismo valor que hayamos configurado en el fichero config.ru
requestattachEl depurador se conectar con el programa a través del puerto indicado anteriormente.
localfstrueEsto es clave para que se pueda conectar con el sistema de archivos y puedas poner breakpoints en el programa

Iniciando el programa

Ahora el siguiente paso es iniciar el programa. Si usas puma-dev y tienes configurado el proyecto en .puma-dev, esto se hace con la siguiente instrucción en el terminal

touch tmp/restart.txt

Abre el programa en el navegador y carga una página. Ahora llega el momento en el que hemos de conectar VSCode con el programa para poder depurar

Conectando el depurador con el programa en ejecución

Vamos a ejecución y depuración y ejecutamos la configuración que hemos preparado previamente.

Al realizarlo veremos que VSCode y Cursor cambian su aspecto. La barra inferior cambia al color azul (VSCode) o naranja (Cursor) y tenemos una sección para poder realizar la depuración.

Además, podemos colocar los break-points o puntos de depuración en el editor para poder depurar paso a paso.

Accede desde el navegador a una página o desde Postman invoca un end-point y el sistema se detendrá en el primer break-point. A partir de aquí, podrás depurar paso a paso, comprobar variables, …

Juan