Nuxt3 中文课程《实战全栈开发简书》限时优惠

Debugging

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

调试

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

源码映射

在服务器构建中,默认启用了源码映射,在开发模式下,客户端构建也启用了源码映射。但你可以在配置中更具体地启用它们。

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

在你的 IDE 中调试

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

示例:VS Code 调试配置

你可能需要根据你的浏览器路径更新下面的配置。欲了解更多信息,请访问VS Code 调试配置文档

{
  "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 调试配置

你也可以在像 IntelliJ IDEA、WebStorm 或 PhpStorm 这样的 JetBrains IDE 中调试你的 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