除錯

在 Nuxt 中，您可以直接在瀏覽器以及 IDE 中開始除錯您的應用程式。

源對映

預設情況下，您的伺服器構建已啟用源對映，並且在開發模式下客戶端構建也已啟用，但您可以在配置中更具體地啟用它們。

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

使用 Node Inspector 除錯

您可以使用Node Inspector用於除錯 Nuxt 伺服器端。

nuxt dev --inspect

這將在 dev 模式下啟動 Nuxt 並激活偵錯程式。如果一切正常，您的 Chrome 開發者工具上會出現一個 Node.js 圖示，您可以連線到偵錯程式。

請注意，Node.js 和 Chrome 程序需要在同一平臺上執行。這在 Docker 中不起作用。

在您的 IDE 中除錯

您可以在開發 Nuxt 應用程式時在 IDE 中除錯它。

VS Code 除錯配置示例

您可能需要使用 Web 瀏覽器的路徑更新以下配置。有關更多資訊，請訪問VS Code 除錯配置文件.

{
  // 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": "https://: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 配置中

"userDataDir": false,

JetBrains IDE 除錯配置示例

您還可以在 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="https://: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!