Skip to main content

断点调试

除了 @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:

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

上一页 下一页