我一直在开发一个建立在Electron和Rust之上的视频编辑器，其中Rust负责繁重的工作，而Electron（与Svelte搭配）负责UI的工作。
调试JS很容易：打开Electron的devtools，设置一些断点，然后你就可以开始工作了。
调试Rust就有点困难了。但这是可能的!
下面是我将VSCode的调试器连接到本地Rust代码的设置，它在Electron的渲染器进程中运行。
设置launch.json
VSCode的调试器依赖于一个叫做launch.json 的配置文件。我想它可以存在于几个不同的地方；我的文件在我项目根部的.vscode 目录中，它看起来像这样：
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit:
// https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "lldb",
"request": "launch",
"name": "Debug",
"program": "${workspaceFolder}/backend/target/debug/recut",
"args": [],
"cwd": "${workspaceFolder}"
},
{
"type": "lldb",
"request": "attach",
"pid": "${command:pickProcess}",
"name": "Debug Electron Renderer",
}
]
}
我在这里有两个配置：
- 第一个是用来启动Rust的可执行文件，这样我就可以单独调试Rust了。
- 第二个是附加到一个正在运行的进程上。
我们要关注的是第二个配置。这是对附加到正在运行的Electron进程上的重要部分：
{
"type": "lldb",
"request": "attach",
"pid": "${command:pickProcess}",
"name": "Debug Electron Renderer",
}
我使用的是Mac，所以type 是lldb 。对于Windows来说，这可能需要有所不同。
request 是attach ，意思是VSCode将尝试附加到一个已经运行的进程，而不是启动应用程序本身。
pid 是特殊的${command:pickProcess} ，它将在VSCode中弹出一个选择器窗口，让你选择要附加到的进程（稍后会有更多的内容）。
name 是你想使用的任何描述性名称。
pid vs vsprocessId processName
VSCode支持一些不同的属性来让你选择附加到哪个进程。
我从StackOverflow关于将VSCode附加到.NET Core应用程序的问题中发现了这个配置，在问题中，他们使用了processId 和processName ，而不是pid 。
我不确定这种差异是Mac与Windows的差异，还是VSCode改变了这些属性的名称，但在我的设置中，processId ，没有发挥作用。
VSCode最初抱怨说它需要一个 "pid"，所以我使用了从processId 切换到pid 来使它工作。
如果你是在Windows上，你可能需要把pid 换成其他的东西。
将调试器连接到Electron的渲染器进程上
在你连接调试器之前，应用程序需要运行，所以以你通常的方式启动它（npm run dev 或其他）。
一个重要的细节：确保原生的Rust模块在构建时已经包含了调试符号Cargo的--release 标志会默认剥离这些符号，你可能无法设置断点，所以使用cargo build ，而不是cargo build --release 。如果你的构建脚本本身是以发布模式构建的，你可能需要修改它来做这个改动。
在VSCode中，从侧边栏选择调试器，从顶部的下拉菜单中选择配置，然后点击|> Play按钮来启动它。
找到正确的进程
VSCode会提示你选择一个要附加的进程，你可以输入来过滤列表。
你可以尝试输入 "electron"，或者你的项目目录或可执行文件的名称来缩小范围。
不过，这可能不是很有帮助。至少对我来说，VSCode的对话框不够宽，无法显示完整的路径，我找不到调整其大小的方法，而且悬停的行也不能显示全文。
无论如何，即使我可以看到完整的路径，它们可能都是一样的。
这不是一个巨大的帮助。
使用活动监视器/任务管理器
为了获得更好的任务视图，打开你的操作系统的任务查看器。在Mac上是活动监视器，在/Applications/Utilities下。在Windows上，那是任务管理器。
将列表中的任务过滤到你的应用程序（如果你还没有设置名称，比如我还没有，就叫 "电子"）。
看一下你想连接的那个程序的PID栏，然后在VSCode的PID-picker弹出窗口中输入这个数字。
至于选择哪一个：连接到正在运行你的本地代码的Electron进程：
- 如果是主进程，寻找名为 "Electron "或 "YourApp "的进程。
- 如果是渲染器进程，寻找 "Electron助手（渲染器）"或 "YourApp助手（渲染器）"。
如果你的代码在Renderer进程中，而你打开了多个窗口（例如Devtools），你会看到多个Renderer进程，这就增加了难度。
我建议关闭DevTools窗口，如果你有它弹出，以及任何其他不是你想调试的窗口。
在VSCode中设置断点
一旦你连接好了，你应该能够在VSCode中设置断点，检查变量，并像往常一样进入/退出/继续等等。
