斷點除錯

除了 @debug 標籤之外，您還可以使用各種工具和開發環境中的斷點來除錯 Svelte 和 SvelteKit 專案。這包括前端和後端程式碼。

以下指南假設您的 JavaScript 執行環境是 Node.js。

Visual Studio Code

透過內建的除錯終端機，您可以在 VSCode 中的原始碼檔案中設定斷點。

1. 開啟命令面板：CMD/Ctrl + Shift + P。
2. 尋找並啟動「除錯：JavaScript 除錯終端機」。
3. 使用除錯終端機啟動您的專案。例如：npm run dev。
4. 在您的用戶端或伺服器端原始碼中設定一些斷點。
5. 觸發斷點。

透過除錯窗格啟動

或者，您也可以在您的專案中設定 .vscode/launch.json。要自動設定一個

1. 前往「執行和除錯」窗格。
2. 在「執行」選單中，選擇「Node.js...」。
3. 選擇對應於您的專案的「執行指令碼」，例如「執行指令碼：dev」。
4. 按下「開始除錯」播放按鈕，或按下 F5 開始斷點除錯。

這是一個 launch.json 的範例

{
	"version": "0.2.0",
	"configurations": [
		{
			"command": "npm run dev",
			"name": "Run development server",
			"request": "launch",
			"type": "node-terminal"
		}
	]
}

延伸閱讀：https://vscode.dev.org.tw/docs/editor/debugging。

其他編輯器

如果您使用其他編輯器，這些社群指南可能會對您有所幫助

• WebStorm Svelte：除錯您的應用程式
• 在 Neovim 中除錯 JavaScript 框架

Google Chrome 和 Microsoft Edge 開發人員工具

可以使用基於瀏覽器的除錯器來除錯 Node.js 應用程式。

請注意，這僅適用於除錯用戶端 SvelteKit 原始碼對應。

1. 使用 Node.js 啟動 Vite 伺服器時，執行 --inspect 標誌。例如：NODE_OPTIONS="--inspect" npm run dev
2. 在新分頁中開啟您的網站。通常在 localhost:5173。
3. 開啟您的瀏覽器的開發人員工具，並點擊左上角附近的「開啟 Node.js 專用開發人員工具」圖示。它應該會顯示 Node.js 的標誌。
4. 設定斷點並除錯您的應用程式。

或者，您也可以透過在 Google Chrome 中導覽至 chrome://inspect，或在 Microsoft Edge 中導覽至 edge://inspect 來開啟除錯器開發人員工具。

參考資料

• 除錯 Node.js