---
title: "调试"
description: "在 Nuxt 中，你可以直接在浏览器以及 IDE 中开始调试你的应用。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/guide/going-further/debugging"
---
# 调试

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

## Sourcemaps

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

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

## 使用 Node Inspector 调试

你可以使用 [Node inspector](https://node.zhcndoc.com/en/learn/getting-started/debugging) 进行 Nuxt 服务端调试。

```bash
nuxt dev --inspect
```

这将以启用调试器的 `dev` 模式启动 Nuxt。如果一切工作正常，你将在 Chrome 开发者工具上看到一个 Node.js 图标，然后你可以连接调试器。

::important
注意，Node.js 和 Chrome 进程需要运行在同一平台上。此功能在 Docker 内部无法使用。
::

## 在你的 IDE 中调试

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

### VS Code 调试配置示例

你可能需要根据你的浏览器路径更新下面的配置。更多信息请访问 [VS Code 关于调试配置的文档](https://code.visualstudio.com/docs/debugtest/debugging#_launch-configurations)。

```json5
{
  // 使用 IntelliSense 了解可能的属性。
  // 鼠标悬停查看现有属性的描述。
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost: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* 配置中添加：

```json5
"userDataDir": false,
```

### JetBrains IDEs 调试配置示例

你也可以在 JetBrains 系列 IDE（如 IntelliJ IDEA、WebStorm、PhpStorm）中调试 Nuxt 应用。

1. 在项目根目录下创建一个新文件，命名为 `nuxt.run.xml`。
2. 打开 `nuxt.run.xml`，粘贴以下调试配置：

```html
<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](https://github.com/nuxt/nuxt/edit/main/docs/2.guide/3.going-further/9.debugging.md)！


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.