在 Windows 上调试

🌐 Debugging on Windows

如果你在使用 Electron 时遇到崩溃或问题，并且你认为问题不是由你的 JavaScript 应用引起的，而是由 Electron 本身引起的，那么调试可能会有点棘手，尤其是对于不熟悉原生/C++ 调试的开发者。不过，通过使用 Visual Studio、Electron 托管的符号服务器以及 Electron 源代码，你可以启用在 Electron 源代码中设置断点的逐步调试。

🌐 If you experience crashes or issues in Electron that you believe are not caused by your JavaScript application, but instead by Electron itself, debugging can be a little bit tricky, especially for developers not used to native/C++ debugging. 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.

另请参阅：在 Chromium 开发者网站上有大量关于调试 Chromium 的信息，其中许多内容也适用于 Electron：在 Windows 上调试 Chromium。

要求

🌐 Requirements

• Electron 的调试版本：最简单的方法通常是自己构建它，使用Windows 构建说明中列出的工具和前置条件。虽然你可以像下载它一样附加并调试 Electron，但你会发现它经过了大量优化，使调试变得相当困难：调试器无法显示所有变量的内容，并且由于内联、尾调用和其他编译器优化，执行路径可能看起来很奇怪。
• 带有 C++ 工具的 Visual Studio：Visual Studio 2013 和 Visual Studio 2015 的免费社区版都可以使用。安装完成后，配置 Visual Studio 以使用 Electron 的符号服务器。这将使 Visual Studio 更好地理解 Electron 内部发生的情况，从而更容易以人类可读的格式显示变量。
• ProcMon：免费的 SysInternals 工具 允许你检查进程的参数、文件句柄和注册表操作。

连接并调试 Electron

🌐 Attaching to and Debugging Electron

要开始调试会话，请打开 PowerShell 或 CMD，并执行你的 Electron 调试版本，同时使用要打开的应用作为参数。

🌐 To start a debugging session, open up PowerShell/CMD and execute your debug build of Electron, using the application to open as a parameter.

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

设置断点

🌐 Setting Breakpoints

然后，打开 Visual Studio。Electron 并不是用 Visual Studio 构建的，因此不包含项目文件——不过你可以以“文件”方式打开源代码文件，这意味着 Visual Studio 会单独打开它们。你仍然可以设置断点——Visual Studio 会自动识别源代码与附加进程中运行的代码匹配，并相应地触发断点。

🌐 Then, open up Visual Studio. Electron is not built with Visual Studio and hence does not contain a project file - you can however open up the source code files "As File", meaning that Visual Studio will open them up by themselves. You can still set breakpoints - Visual Studio will automatically figure out that the source code matches the code running in the attached process and break accordingly.

相关的代码文件可以在 ./shell/ 中找到。

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

附加

🌐 Attaching

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

🌐 You can attach the Visual Studio debugger to a running process on a local or remote computer. After the process is running, click Debug / Attach to Process (or press CTRL+ALT+P) to open the "Attach to Process" dialog box. You can use this capability to debug apps that are running on a local or remote computer, debug multiple processes simultaneously.

如果 Electron 在不同的用户账户下运行，请勾选 Show processes from all users 复选框。请注意，根据你的应用打开了多少个 BrowserWindow，你将会看到多个进程。一个典型的单窗口应用会导致 Visual Studio 显示两个 Electron.exe 条目——一个是主进程，一个是渲染进程。由于列表中只显示名称，目前没有可靠的方法来区分它们。

🌐 If Electron is running under a different user account, select the Show processes from all users check box. Notice that depending on how many BrowserWindows your app opened, you will see multiple processes. A typical one-window app will result in Visual Studio presenting you with two Electron.exe entries - one for the main process and one for the renderer process. Since the list only gives you names, there's currently no reliable way of figuring out which is which.

我应该附加哪个进程？

🌐 Which Process Should I Attach to?

在主进程中执行的代码（即在你的主 JavaScript 文件中找到或最终运行的代码）将会在主进程中运行，而其他代码则会在各自的渲染进程中执行。

🌐 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.

在调试时，你可以附加到多个程序，但在调试器中任何时候只有一个程序是活动的。你可以在 Debug Location 工具栏或 Processes window 中设置活动程序。

🌐 You can be attached to multiple programs when you are debugging, but only one program is active in the debugger at any time. You can set the active program in the Debug Location toolbar or the Processes window.

使用 ProcMon 观察进程

🌐 Using ProcMon to Observe a Process

虽然 Visual Studio 在检查特定代码路径方面非常出色，但 ProcMon 的真正优势在于观察你的应用与操作系统之间的所有交互——它可以捕获进程的文件、注册表、网络、进程和性能分析详细信息。它试图记录发生的所有事件，信息量可能非常庞大，但如果你希望了解应用对操作系统的操作内容和方式，它可以成为一个非常有价值的工具。

🌐 While Visual Studio is fantastic for inspecting specific code paths, ProcMon's strength is really in observing everything your application is doing with the operating system - it captures File, Registry, Network, Process, and Profiling details of processes. It attempts to log all events occurring and can be quite overwhelming, but if you seek to understand what and how your application is doing to the operating system, it can be a valuable resource.

想了解 ProcMon 的基本和高级调试功能，请查看微软提供的 这个视频教程。

🌐 For an introduction to ProcMon's basic and advanced debugging features, go check out this video tutorial provided by Microsoft.

使用 WinDbg

🌐 Using WinDbg

可以使用 WinDbg 调试 Renderer 进程中的崩溃和问题。

🌐 It's possible to debug crashes and issues in the Renderer process with WinDbg.

要使用 WinDbg 附加到调试进程：

🌐 To attach to a debug a process with WinDbg:

1. 将 --renderer-startup-dialog 作为命令行标志添加到 Electron。
2. 启动你要调试的应用。
3. 将会出现一个对话框，显示进程ID："渲染器正在以进程ID 1234 启动"。
4. 启动 WinDbg 并在应用菜单中选择“文件 > 附加到进程”。
5. 在步骤 3 的对话框中输入 pid。
6. 请注意，调试器将处于暂停状态，并且应用中有一个命令行可供输入文本。
7. 在上面的命令行中输入“g”以启动调试程序。
8. 按回车键继续程序。
9. 返回对话框并按“确定”。