Sourcemaps

Los sourcemaps están habilitados para tu compilación del servidor por defecto, y para la compilación del cliente en modo de desarrollo, pero puedes habilitarlos más específicamente en tu configuración.

export default defineNuxtConfig({
  // o sourcemap: true
  sourcemap: {
    server: true,
    client: true
  }
})

Depuración con Node Inspector

Puedes usar Node inspector para depurar el lado del servidor de Nuxt.

nuxt dev --inspect

Esto iniciará Nuxt en modo dev con el depurador activo. Si todo está funcionando correctamente, un icono de Node.js aparecerá en tus Chrome DevTools y podrás conectarte al depurador.

Depuración en tu IDE

Es posible depurar tu aplicación Nuxt en tu IDE mientras la desarrollas.

Ejemplo de Configuración de Depuración en VS Code

Es posible que necesites actualizar la configuración a continuación con una ruta a tu navegador web. Para más información, visita la documentación de VS Code sobre configuración de depuración.

{
  // Usa IntelliSense para aprender sobre los posibles atributos.
  // Pasa el ratón para ver descripciones de los atributos existentes.
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "outputCapture": "std",
      "program": "${workspaceFolder}/node_modules/nuxt/bin/nuxt.mjs",
      "args": [
        "dev"
      ],
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": [
        "server: nuxt",
        "client: chrome"
      ]
    }
  ]
}

Si prefieres tus extensiones de navegador habituales, añade esto a la configuración de chrome anterior:

"userDataDir": false,

Ejemplo de Configuración de Depuración en JetBrains IDEs

También puedes depurar tu aplicación Nuxt en JetBrains IDEs como IntelliJ IDEA, WebStorm o PhpStorm.

1. Crea un nuevo archivo en el directorio raíz de tu proyecto y nómbralo nuxt.run.xml.

2. Abre el archivo nuxt.run.xml y pega la siguiente configuración de depuración:

<component name="ProjectRunConfigurationManager">
  <configuration default="false" name="client: chrome" type="JavascriptDebugType" uri="http://localhost:3000" useFirstLineBreakpoints="true">
    <method v="2" />
  </configuration>

  <configuration default="false" name="server: nuxt" type="NodeJSConfigurationType" application-parameters="dev" path-to-js-file="$PROJECT_DIR$/node_modules/nuxt/bin/nuxt.mjs" working-dir="$PROJECT_DIR$">
    <method v="2" />
  </configuration>

  <configuration default="false" name="fullstack: nuxt" type="CompoundRunConfigurationType">
    <toRun name="client: chrome" type="JavascriptDebugType" />
    <toRun name="server: nuxt" type="NodeJSConfigurationType" />
    <method v="2" />
  </configuration>
</component>

Otros IDEs

Si tienes otro IDE y te gustaría contribuir con una configuración de ejemplo, siéntete libre de abrir un PR!