断点调试

除了 @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": "运行开发服务端",
			"request": "launch",
			"type": "node-terminal"
		}
	]
}

更多阅读：https://code.visualstudio.com/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 打开专用 DevTools”图标。它应该显示 Node.js 标志。
4. 设置断点并调试您的应用程序。

您也可以通过在 Google Chrome 中导航到 chrome://inspect，或在 Microsoft Edge 中导航到 edge://inspect 来打开调试器开发工具。

参考资料

• 调试 Node.js