Nuxt/docs/2.guide/3.going-further/9.debugging.md

1.7 KiB

title description
Debugging In Nuxt 3, you can get started with debugging your application directly in the browser as well as in your IDE.

Sourcemaps

Sourcemaps are enabled for your server build by default, and for the client build in dev mode, but you can enable them more specifically in your configuration.

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

Debugging in Your IDE

It is possible to debug your Nuxt app in your IDE while you are developing it.

Example VS Code Debug Configuration

You may need to update the config below with a path to your web browser. For more information, visit the VS Code documentation about debug configuration.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  "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",
      "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
      "args": [
        "dev"
      ],
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": [
        "server: nuxt",
        "client: chrome"
      ]
    }
  ]
}

Other IDEs

If you have another IDE and would like to contribute sample configuration, feel free to open a PR!