调试

在 Nuxt 3 中,您可以直接在浏览器中开始调试您的应用程序,也可以在您的 IDE 中开始调试。

源代码映射

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

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

使用 Node 调试器调试

您可以使用 Node 调试器 来调试 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,

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="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