调试

在 Nuxt 中，您可以在浏览器和 IDE 中直接开始调试应用程序。

源映射

默认情况下，您的服务器构建已启用源映射，在开发模式下客户端构建也已启用源映射，但您可以在配置中更具体地启用它们。

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

使用 Node Inspector 调试

您可以使用Node inspector用于调试 Nuxt 服务端。

nuxt dev --inspect

这将在调试器激活的dev模式下启动 Nuxt。如果一切正常，Chrome DevTools 上将出现一个 Node.js 图标，您可以附加到调试器。

请注意，Node.js 和 Chrome 进程需要在同一平台上运行。这在 Docker 中不起作用。

在 IDE 中调试

您可以在开发 Nuxt 应用程序时在 IDE 中对其进行调试。

VS Code 调试配置示例

您可能需要更新下面的配置，其中包含您的 Web 浏览器的路径。欲了解更多信息，请访问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": "https://: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 IDEs 调试配置示例

您还可以在 JetBrains IDEs（如 IntelliJ IDEA、WebStorm 或 PhpStorm）中调试您的 Nuxt 应用程序。

  1. 在您的项目根目录中创建一个新文件，并将其命名为nuxt.run.xml。
  2. 打开nuxt.run.xml文件并粘贴以下调试配置
<component name="ProjectRunConfigurationManager">
  <configuration default="false" name="client: chrome" type="JavascriptDebugType" uri="https://: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!