Отладка · Nuxt Advanced

Карты исходного кода (Sourcemaps)

Карты исходного кода включены для сборки сервера по умолчанию, а для сборки клиента — в режиме разработки, но вы можете настроить их как угодно в своей конфигурации.

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

Отладка с помощью Node Inspector

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

nuxi dev --inspect

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

Обратите внимание, что процессы Node.js и Chrome должны быть запущены на одной платформе. Это не работает внутри Docker.

Отладка в вашей IDE

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

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

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

Если вы используете pnpm, вам потребуется установить nuxi как devDependency, чтобы приведенная ниже конфигурация работала.

{
  // Используйте IntelliSense, чтобы узнать о возможных атрибутах.
  // Наведите курсор, чтобы просмотреть описания существующих атрибутов.
  "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/nuxi/bin/nuxi.mjs",
      "args": [
        "dev"
      ],
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": [
        "server: nuxt",
        "client: chrome"
      ]
    }
  ]
}

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

"userDataDir": false,

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

Вы также можете отлаживать свое приложение Nuxt в средах IDE JetBrains, таких как IntelliJ IDEA, WebStorm или PhpStorm.

Создайте новый файл в корневом каталоге вашего проекта и назовите его nuxt.run.xml.
Откройте файл 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/nuxi/bin/nuxi.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!

Создание авторских слоев Nuxt

Nuxt предоставляет мощную систему, которая позволяет расширять файлы по умолчанию, конфигурации и многое другое.

Runtime-конфиг

Nuxt предоставляет API рантайм-конфигурации для доступа к конфигу и секретам в вашем приложении.