在 Windows 中调试

如果你在 Electron 中遇到问题或者引起崩溃，你认为它不是由你的JavaScript应用程序引起的，而是由 Electron 本身引起的。调试可能有点棘手，特别是对于不习惯 native/C++ 调试的开发人员。 However, using Visual Studio, Electron’s hosted Symbol Server, and the Electron source code, you can enable step-through debugging with breakpoints inside Electron’s source code.

See also: There’s a wealth of information on debugging Chromium, much of which also applies to Electron, on the Chromium developers site: Debugging Chromium on Windows.

要求

  • Electron 的调试版本: 最简单的方法是自己构建它，使用 Windows 的构建说明中列出的工具和先决条件要求。 While you can attach to and debug Electron as you can download it directly, you will find that it is heavily optimized, making debugging substantially more difficult: The debugger will not be able to show you the content of all variables and the execution path can seem strange because of inlining, tail calls, and other compiler optimizations.

  • Visual Studio 与 C++ 工具: Visual Studio 2013 和 Visual Studio 2015 的免费社区版本都可以使用。 安装之后, 配置 Visual Studio 使用 Electron 的 Symbol 服务器. 它将使 Visual Studio 能够更好地理解 Electron 中发生的事情，从而更容易以人类可读的格式呈现变量。

  • ProcMon: 免费的 SysInternals 工具允许您检查进程参数，文件句柄和注册表操作。

附加并调试 Electron

要启动调试会话，请打开 PowerShell/CMD 并执行 Electron 的调试版本，使用应用程序作为参数打开。

  1. $ ./out/Testing/electron.exe ~/my-electron-app/

设置断点

然后，打开 Visual Studio。 Electron 不是使用 Visual Studio 构建的，因此不包含项目文件 - 但是您可以打开源代码文件 “As File”，这意味着 Visual Studio 将自己打开它们。 您仍然可以设置断点 - Visual Studio 将自动确定源代码与附加过程中运行的代码相匹配，并相应地中断。

Relevant code files can be found in ./shell/.

附加

您可以将 Visual Studio 调试器附加到本地或远程计算机上正在运行的进程。 进程运行后，单击 调试 / 附加 到进程(或按下 CTRL+ALT+P) 打开“附加到进程”对话框。 您可以使用此功能调试在本地或远程计算机上运行的应用程序，同时调试多个进程。

如果Electron在不同的用户帐户下运行，请选中 显示所有用户的进程 复选框。 请注意，根据您的应用程序打开的浏览器窗口数量，您将看到多个进程。 典型的单窗口应用程序将导致 Visual Studio 向您提供两个 Electron.exe 条目 - 一个用于主进程，一个用于渲染器进程。 因为列表只给你的名字，目前没有可靠的方法来弄清楚哪个是。

我应该附加哪个进程?

Code executed within the main process (that is, code found in or eventually run by your main JavaScript file) will run inside the main process, while other code will execute inside its respective renderer process.

您可以在调试时附加到多个程序，但在任何时候只有一个程序在调试器中处于活动状态。 您可以在 调试位置 工具栏或 进程窗口 中设置活动程序。

使用 ProcMon 观察进程

虽然 Visual Studio 非常适合检查特定的代码路径，但 ProcMon 的优势在于它可以监视应用程序对操作系统的所有操作 - 捕获进程的文件，注册表，网络，进程和分析详细信息。 它试图记录发生的 所有 事件，并且可能是相当压倒性的，而且果你想了解你的应用程序对操作系统做什么和如何做，它则是一个很有价值的资源。

有关 ProcMon 的基本和高级调试功能的介绍，请查看Microsoft提供的 视频教程.

使用 WinDbg

可以通过 WinDbg 调试渲染进程的崩溃和问题。

To attach to a debug a process with WinDbg:

  1. Add --renderer-startup-dialog as a command line flag to Electron.
  2. Launch the app you are intending to debug.
  3. A dialog box will appear with a pid: “Renderer starting with pid: 1234”.
  4. Launch WinDbg and choose “File > Attach to process” in the application menu.
  5. Enter in pid from the dialog box in Step 3.
  6. See that the debugger will be in a paused state, and that there is a command line in the app to enter text into.
  7. Type “g” into the above command line to start the debuggee.
  8. Press the enter key to continue the program.
  9. Go back to the dialog box and press “ok”.