Breakpoint Debugging

除了 @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://code.visualstudio.com/docs/editor/debugging.

其他编辑器

如果您使用不同的编辑器，这些社区指南可能对您有帮助：

• WebStorm Svelte：调试您的应用程序
• 调试 Neovim 中的 JavaScript 框架

谷歌 Chrome 和微软 Edge 开发者工具

可以使用基于浏览器的调试器调试 Node.js 应用程序。

[!注意] 注意这仅适用于调试客户端 SvelteKit 源映射。

1. 运行 Vite 服务器时使用 Node.js 启动 –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