调试 Debugging

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

Sourcemaps

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

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

Debugging in Your IDE

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

示例 VS 代码调试配置

您可能需要使用网络浏览器的路径更新下面的配置。 有关详细信息，请访问 关于调试配置的 VS Code 文档。

json5
{
  // 使用 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",
      "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
      "args": [
        "dev"
      ]
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": [
        "server: nuxt",
        "client: chrome"
      ]
    }
  ]
}

JetBrains IDE 调试配置示例

您还可以在 JetBrains IDE(例如 IntelliJ IDEA、WebStorm 或 PhpStorm)中调试 Nuxt 应用程序。

  1. 在项目根目录中创建一个新文件并将其命名为nuxt.run.xml。
  2. 打开 nuxt.run.xml 文件并粘贴以下调试配置：
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>

Other IDEs

如果您有另一个 IDE 并想提供示例配置，请随时 打开 PR！