除了 [`@debug`](../svelte/@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`：

```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](https://code.visualstudio.com/docs/editor/debugging).

## 
其他编辑器

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

*   [
    WebStorm Svelte：调试您的应用程序](https://www.jetbrains.com/help/webstorm/svelte.html#ws_svelte_debug)
*   [
    调试 Neovim 中的 JavaScript 框架](https://theosteiner.de/debugging-javascript-frameworks-in-neovim)

## 
谷歌 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](https://nodejs.org/en/learn/getting-started/debugging)