v3.17

调试

在 Nuxt 中，你可以直接在浏览器和 IDE 中调试应用。

Sourcemaps

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

¥Sourcemaps are enabled for your server build by default, and for the client build in dev mode, but you can enable them more specifically in your configuration.

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

使用 Node Inspector 进行调试

¥Debugging with Node Inspector

你可以使用 Node 检查器 调试 Nuxt 服务器端。

¥You can use Node inspector to debug Nuxt server-side.

nuxi dev --inspect

这将以 dev 模式启动 Nuxt，并激活调试器。如果一切正常，你的 Chrome DevTools 上将出现一个 Node.js 图标，你可以将其连接到调试器。

¥This will start Nuxt in dev mode with debugger active. If everything is working correctly a Node.js icon will appear on your Chrome DevTools and you can attach to the debugger.

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

在你的 IDE 中调试

¥Debugging in Your IDE

可以在开发 Nuxt 应用时在 IDE 中调试它。

¥It is possible to debug your Nuxt app in your IDE while you are developing it.

VS Code 调试配置示例

¥Example VS Code Debug Configuration

你可能需要使用 Web 浏览器的路径更新以下配置。有关路由元数据的更多信息，请参阅 VS Code 调试配置文档。

¥You may need to update the config below with a path to your web browser. For more information, visit the VS Code documentation about debug configuration.

如果你使用 pnpm，则需要将 nuxi 安装为 devDependency 才能使以下配置正常工作。
{
  // 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",
      "webRoot": "${workspaceFolder}"
    },
    {
      "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 配置中：

¥If you prefer your usual browser extensions, add this to the chrome configuration above:

"userDataDir": false,

JetBrains IDE 调试配置示例

¥Example JetBrains IDEs Debug Configuration

你还可以在 JetBrains IDE（例如 IntelliJ IDEA、WebStorm 或 PhpStorm）中调试你的 Nuxt 应用。

¥You can also debug your Nuxt app in JetBrains IDEs such as IntelliJ IDEA, WebStorm, or 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

¥Other IDEs

如果你有其他 IDE 并希望贡献示例配置，请随时向 提交 PR 贡献！

¥If you have another IDE and would like to contribute sample configuration, feel free to open a PR!