Windows 上的调试
如果您在 Electron 中遇到崩溃或问题,您认为不是由您的 JavaScript 应用程序导致的,而是由 Electron 本身导致的,那么调试可能会有点棘手,特别是对于不习惯原生/C++ 调试的开发人员来说。但是,使用 Visual Studio、Electron 托管的符号服务器和 Electron 源代码,您可以启用带断点的单步调试,进入 Electron 的源代码。
另请参阅:Chromium 开发人员网站上提供了大量关于 Chromium 调试的信息,其中许多信息也适用于 Electron:Windows 上的 Chromium 调试。
要求
-
Electron 的调试版本:最简单的方法通常是自己构建,使用Windows 构建说明中列出的工具和先决条件。虽然您可以附加并调试直接下载的 Electron,但您会发现它经过了高度优化,这使得调试变得更加困难:调试器将无法向您显示所有变量的内容,并且执行路径可能看起来很奇怪,因为内联、尾调用和其他编译器优化。
-
带有 C++ 工具的 Visual Studio:Visual Studio 2013 和 Visual Studio 2015 的免费社区版都可以使用。安装完成后,配置 Visual Studio 以使用 Electron 的符号服务器。它将使 Visual Studio 更好地了解 Electron 内部发生的事情,从而更容易以人类可读的格式显示变量。
-
ProcMon:免费的 SysInternals 工具允许您检查进程的参数、文件句柄和注册表操作。
附加和调试 Electron
要开始调试会话,请打开 PowerShell/CMD 并执行 Electron 的调试版本,使用要打开的应用程序作为参数。
$ ./out/Testing/electron.exe ~/my-electron-app/
设置断点
然后,打开 Visual Studio。Electron 不是使用 Visual Studio 构建的,因此不包含项目文件 - 但是,您可以“作为文件”打开源代码文件,这意味着 Visual Studio 将单独打开它们。您仍然可以设置断点 - Visual Studio 将自动确定源代码与附加进程中运行的代码匹配,并相应地中断。
相关的代码文件可以在 ./shell/
中找到。
附加
您可以将 Visual Studio 调试器附加到本地或远程计算机上的正在运行的进程。进程运行后,单击“调试/附加到进程”(或按CTRL+ALT+P
)以打开“附加到进程”对话框。您可以使用此功能调试在本地或远程计算机上运行的应用程序,同时调试多个进程。
如果 Electron 在不同的用户帐户下运行,请选择“显示所有用户的进程”复选框。请注意,根据您的应用程序打开的 BrowserWindows 的数量,您将看到多个进程。一个典型的单窗口应用程序会导致 Visual Studio 为您提供两个Electron.exe
条目 - 一个用于主进程,一个用于渲染器进程。由于列表只为您提供名称,因此目前无法可靠地确定哪个是哪个。
我应该附加到哪个进程?
在主进程中执行的代码(即,在您的主 JavaScript 文件中找到或最终由其运行的代码)将在主进程中运行,而其他代码将在其各自的渲染器进程中执行。
调试时,您可以附加到多个程序,但一次只能在一个程序中激活调试器。您可以在“调试位置”工具栏或“进程窗口”中设置活动程序。
使用 ProcMon 观察进程
虽然 Visual Studio 非常适合检查特定的代码路径,但 ProcMon 的优势在于观察应用程序对操作系统的执行的所有操作 - 它捕获进程的文件、注册表、网络、进程和分析详细信息。它尝试记录发生的所有事件,并且可能非常庞大,但如果您希望了解应用程序对操作系统的操作以及如何操作,它可能是一项宝贵的资源。
有关 ProcMon 的基本和高级调试功能的介绍,请查看 Microsoft 提供的此视频教程。
使用 WinDbg
可以使用WinDbg调试渲染器进程中的崩溃和问题。
要附加到使用 WinDbg 调试的进程
- 将
--renderer-startup-dialog
作为命令行标志添加到 Electron。 - 启动您打算调试的应用程序。
- 将出现一个带有 pid 的对话框:“Renderer starting with pid: 1234”。
- 启动 WinDbg,并在应用程序菜单中选择“文件 > 附加到进程”。
- 在步骤 3 中的对话框中输入 pid。
- 看到调试器将处于暂停状态,并且应用程序中有一个命令行可用于输入文本。
- 在上面的命令行中输入“g”以启动被调试程序。
- 按 Enter 键继续程序。
- 返回对话框并按“确定”。