断点调试

除了 @debug 标签之外，你还可以使用各种工具和开发环境中的断点调试 Svelte 和 SvelteKit 项目。这包括前端和后端代码。

¥In addition to the @debug tag, you can also debug Svelte and SvelteKit projects using breakpoints within various tools and development environments. This includes both frontend and backend code.

以下指南假设你的 JavaScript 运行时环境是 Node.js。

¥The following guides assume your JavaScript runtime environment is Node.js.

Visual Studio Code

使用内置调试终端，你可以在 VSCode 中的源文件中设置断点。

¥With the built-in debug terminal, you can set up breakpoints in source files within VSCode.

1. 打开命令面板：CMD/Ctrl + Shift + P.

   ¥Open the command palette: CMD/Ctrl + Shift + P.

2. 查找并启动“调试：JavaScript 调试终端”。

   ¥Find and launch “Debug: JavaScript Debug Terminal”.

3. 使用调试终端启动你的项目。例如：npm run dev。

   ¥Start your project using the debug terminal. For example: npm run dev.

4. 在客户端或服务器端源代码中设置一些断点。

   ¥Set some breakpoints in your client or server-side source code.

5. 触发断点。

   ¥Trigger the breakpoint.

通过调试窗格启动(Launch via debug pane)

¥Launch via debug pane

你也可以在你的项目中设置 .vscode/launch.json。要自动设置一个：

¥You may alternatively set up a .vscode/launch.json in your project. To set one up automatically:

1. 转到 “运行并调试” 窗格。

   ¥Go to the “Run and Debug” pane.

2. 在 “运行” 选择菜单中，选择 “Node.js...”。

   ¥In the “Run” select menu, choose “Node.js...”.

3. 选择与你的项目相对应的 “仅限服务器的模块。”，例如“运行脚本：不要解构

   ¥Select the “run script” that corresponds to your project, such as “Run script: dev”.

4. 按 “开始调试” 播放按钮，或按 F5 开始断点调试。

   ¥Press the “Start debugging” play button, or hit F5 to begin breakpoint debugging.

这是一个示例 launch.json：

¥Here’s an example 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。

¥Further reading: https://code.visualstudio.com/docs/editor/debugging.

其他编辑器(Other Editors)

¥Other Editors

如果你使用其他编辑器，这些社区指南可能对你有用：

¥If you use a different editor, these community guides might be useful for you:

• WebStorm Svelte:调试你的应用

  ¥WebStorm Svelte: Debug Your Application

• 在 Neovim 中调试 JavaScript 框架

  ¥Debugging JavaScript Frameworks in Neovim

Google Chrome 和 Microsoft Edge 开发者工具(Google Chrome and Microsoft Edge Developer Tools)

¥Google Chrome and Microsoft Edge Developer Tools

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

¥It’s possible to debug Node.js applications using a browser-based debugger.

请注意，这仅适用于调试客户端 SvelteKit 源映射。

¥[!NOTE] Note this only works with debugging client-side SvelteKit source maps.

1. 在使用 Node.js 启动 Vite 服务器时运行 --inspect 标志。例如：NODE_OPTIONS="--inspect" npm run dev

   ¥Run the --inspect flag when starting the Vite server with Node.js. For instance: NODE_OPTIONS="--inspect" npm run dev

2. 在新选项卡中打开你的网站。通常在 localhost:5173。

   ¥Open your site in a new tab. Typically at localhost:5173.

3. 打开浏览器的开发工具，然后单击左上角附近的 “打开 Node.js 专用 DevTools” 图标。它应该显示 Node.js 徽标。

   ¥Open your browser’s dev tools, and click on the “Open dedicated DevTools for Node.js” icon near the top-left. It should display the Node.js logo.

4. 设置断点并调试你的应用。

   ¥Set up breakpoints and debug your application.

你也可以通过导航到 Google Chrome 中的 chrome://inspect 或 Microsoft Edge 中的 edge://inspect 来打开调试器 devtools。

¥You may alternatively open the debugger devtools by navigating to chrome://inspect in Google Chrome, or edge://inspect in Microsoft Edge.

参考(References)

¥References

• 调试 Node.js

  ¥Debugging Node.js