Отладка

В Nuxt можно отлаживать приложение в браузере и в IDE.

Sourcemaps

Sourcemaps включены для серверной сборки по умолчанию и для клиентской в dev; при необходимости настройте точнее в конфиге.

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

Отладка через Node Inspector

Для отладки серверной части Nuxt можно использовать Node inspector.

nuxt dev --inspect

Nuxt запустится в режиме dev с активным отладчиком. Если всё в порядке, в Chrome DevTools появится иконка Node.js — к отладчику можно подключиться.

Процессы Node.js и Chrome должны быть на одной платформе. Внутри Docker это не работает.

Отладка в IDE

Nuxt-приложение можно отлаживать в IDE во время разработки.

Пример конфигурации отладки VS Code

Возможно, потребуется указать путь к браузеру. См. документацию VS Code по конфигурации отладки.

{
  // 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",
      // this should point to your Nuxt `srcDir`, which is `app` by default
      "webRoot": "${workspaceFolder}/app"
    },
    {
      "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"
      ]
    }
  ]
}

Если нужны привычные расширения браузера, добавьте в конфигурацию chrome:

"userDataDir": false,

Пример конфигурации отладки в JetBrains IDE

Отладка доступна в IntelliJ IDEA, WebStorm, PhpStorm и др.

  1. Создайте в корне проекта файл nuxt.run.xml.
  2. Откройте nuxt.run.xml и вставьте конфигурацию:
<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>

Другие IDE

Если у вас другая IDE и есть готовый пример конфигурации — можете открыть PR.