除錯
在 Nuxt 3 中，您可以直接在瀏覽器和 IDE 中開始除錯您的應用程式。
來源地圖
預設情況下，來源地圖已為您的伺服器建置啟用，並在開發模式中為客戶端建置啟用，但您可以在設定中更具體地啟用它們。
export default defineNuxtConfig({
// or sourcemap: true
sourcemap: {
server: true,
client: true
}
})
使用 Node Inspector 除錯
您可以使用 Node inspector 來除錯 Nuxt 伺服器端。
nuxi dev --inspect
這將在除錯器啟用的開發模式下啟動 Nuxt。如果一切正常運作，Node.js 圖示將會出現在您的 Chrome DevTools 上，您可以連接到除錯器。
請注意，Node.js 和 Chrome 程序需要在相同的平台上執行。這在 Docker 內部無法運作。
在您的 IDE 中除錯
在您開發 Nuxt 應用程式時，可以在您的 IDE 中進行除錯。
VS Code 除錯設定範例
您可能需要使用您的網頁瀏覽器路徑更新下面的設定。如需更多資訊，請參閱關於除錯設定的 VS Code 文件。
如果您使用
pnpm，您需要安裝 nuxi 作為開發依賴項，以下設定才能運作。{
// 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://127.0.0.1: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 設定中
"userDataDir": false,
JetBrains IDE 除錯設定範例
您也可以在 JetBrains IDE（例如 IntelliJ IDEA、WebStorm 或 PhpStorm）中除錯您的 Nuxt 應用程式。
- 在您的專案根目錄中建立一個新檔案，並命名為
nuxt.run.xml。 - 開啟
nuxt.run.xml檔案並貼上以下除錯設定
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="client: chrome" type="JavascriptDebugType" uri="https://127.0.0.1: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！