在 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。

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

要求

¥Requirements

• Electron 的调试版本：最简单的方法通常是使用 Windows 的构建说明 中列出的工具和先决条件自行构建。虽然你可以像直接下载一样附加到 Electron 并进行调试，但你会发现它经过了大量优化，使得调试变得更加困难：调试器将无法向你显示所有变量的内容，并且由于内联、尾调用和其他编译器优化，执行路径可能看起来很奇怪。

  ¥A debug build of Electron: The easiest way is usually building it yourself, using the tools and prerequisites listed in the build instructions for 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.

• 带有 C++ 工具的 Visual Studio：Visual Studio 2013 和 Visual Studio 2015 的免费社区版本都可以使用。安装后，配置 Visual Studio 使用 Electron 的符号服务器.它将使 Visual Studio 能够更好地了解 Electron 内部发生的情况，从而更容易以人类可读的格式渲染变量。

  ¥Visual Studio with C++ Tools: The free community editions of Visual Studio 2013 and Visual Studio 2015 both work. Once installed, configure Visual Studio to use Electron's Symbol server. It will enable Visual Studio to gain a better understanding of what happens inside Electron, making it easier to present variables in a human-readable format.

• 过程周一：免费的 SysInternals 工具 允许你检查进程参数、文件句柄和注册表操作。

  ¥ProcMon: The free SysInternals tool allows you to inspect a processes parameters, file handles, and registry operations.

连接并调试 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/.h 中找到。

¥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 复选框。请注意，根据你的应用打开的 BrowserWindows 数量，你将看到多个进程。典型的单窗口应用将导致 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 调试渲染器进程中的崩溃和问题。

¥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。

   ¥Add --renderer-startup-dialog as a command line flag to Electron.

2. 启动你要调试的应用。

   ¥Launch the app you are intending to debug.

3. 将出现一个带有 pid 的对话框：“以 pid 开头的渲染器：1234”.

   ¥A dialog box will appear with a pid: “Renderer starting with pid: 1234”.

4. 启动 WinDbg 并在应用菜单中选择“文件 > 附加到进程”。

   ¥Launch WinDbg and choose “File > Attach to process” in the application menu.

5. 在步骤 3 的对话框中输入 pid。

   ¥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. 在上面的命令行中输入“g”以启动调试程序。

   ¥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”.