调试

在 Nuxt 中，你可以直接在浏览器中以及你的 IDE 里开始调试你的应用。

Sourcemaps

默认情况下，sourcemap 在你的服务端构建中是启用的，在开发模式下也会为客户端构建启用，但你可以在你的配置中更具体地启用它们。

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

使用 Node Inspector 调试

你可以使用 Node inspector 来调试 Nuxt 的服务端。

nuxt dev --inspect

这会以激活了调试器的状态启动 dev 模式下的 Nuxt。如果一切正常，你的 Chrome DevTools 中会出现一个 Node.js 图标，你可以 attach 到调试器上。

请注意，Node.js 和 Chrome 进程需要运行在同一个平台上。这在 Docker 内部无法工作。

在你的 IDE 中调试

在开发过程中，你可以在你的 IDE 中调试你的 Nuxt 应用。

示例 VS Code 调试配置

你可能需要用你的 Web 浏览器路径来更新下面的配置。更多信息，请访问 VS Code 关于调试配置的文档。

{
  // 使用 IntelliSense 来了解可能的属性。
  // 悬停可查看现有属性的描述。
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:3000",
      // 这应该指向你的 Nuxt `srcDir`，默认是 `app`
      "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 调试配置

你也可以在 JetBrains 的 IDE 中调试你的 Nuxt 应用，例如 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/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！