断点调试
除了 @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.
打开命令面板:
CMD/Ctrl
+Shift
+P
.¥Open the command palette:
CMD/Ctrl
+Shift
+P
.查找并启动“调试:JavaScript 调试终端”。
¥Find and launch “Debug: JavaScript Debug Terminal”.
使用调试终端启动你的项目。例如:
npm run dev
。¥Start your project using the debug terminal. For example:
npm run dev
.在客户端或服务器端源代码中设置一些断点。
¥Set some breakpoints in your client or server-side source code.
触发断点。
¥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:
转到 “运行并调试” 窗格。
¥Go to the “Run and Debug” pane.
在 “运行” 选择菜单中,选择 “Node.js...”。
¥In the “Run” select menu, choose “Node.js...”.
选择与你的项目相对应的 “仅限服务器的模块。”,例如“运行脚本:不要解构
¥Select the “run script” that corresponds to your project, such as “Run script: dev”.
按 “开始调试” 播放按钮,或按
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.
在使用 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
在新选项卡中打开你的网站。通常在
localhost:5173
。¥Open your site in a new tab. Typically at
localhost:5173
.打开浏览器的开发工具,然后单击左上角附近的 “打开 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.
设置断点并调试你的应用。
¥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