除錯
在 Nuxt 3 中，您可以直接在瀏覽器以及 IDE 中開始除錯您的應用程式。
原始碼地圖 (Sourcemaps)
預設情況下，伺服器建置已啟用原始碼地圖，且開發模式中的用戶端建置也已啟用，但您可以在設定中更明確地啟用它們。
export default defineNuxtConfig({
// or sourcemap: true
sourcemap: {
server: true,
client: true
}
})
使用 Node Inspector 除錯
您可以使用 Node inspector 來除錯 Nuxt 伺服器端。
nuxi dev --inspect
這將以啟動除錯器的方式在 dev 模式下啟動 Nuxt。如果一切正常，您的 Chrome 開發人員工具上將會出現 Node.js 圖示，您可以連接到除錯器。
請注意，Node.js 和 Chrome 程序需要在同一個平台上執行。這在 Docker 內部不起作用。
在您的 IDE 中除錯
在開發 Nuxt 應用程式時，可以在 IDE 中除錯。
VS Code 除錯設定範例
您可能需要使用網路瀏覽器的路徑更新以下設定。如需更多資訊，請造訪 VS Code 關於除錯設定的文件。
如果您使用
pnpm，您需要將 nuxi 安裝為 devDependency，以下設定才能正常運作。{
// 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/nuxi/bin/nuxi.mjs",
"args": [
"dev"
],
}
],
"compounds": [
{
"name": "fullstack: nuxt",
"configurations": [
"server: nuxt",
"client: chrome"
]
}
]
}
如果您偏好使用常用的瀏覽器擴充功能，請將此新增到上面的 chrome 設定中
"userDataDir": false,
JetBrains IDE 除錯設定範例
您也可以在 JetBrains IDE 中除錯您的 Nuxt 應用程式，例如 IntelliJ IDEA、WebStorm 或 PhpStorm。
- 在您的專案根目錄中建立一個新檔案，並將其命名為
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/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！