Skip to main content

Debugging on Windows

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. 如果您在Electron中遇到崩溃或问题，而您认为这些崩溃或问题不是由JavaScript应用程序引起的，而是由Electron本身引起的，那么调试可能会有点棘手，尤其是对于不习惯本机/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.但是，使用Visual Studio、Electron托管的Symbol Server和Electron源代码，您可以在Electron的源代码中使用断点启用逐步调试。

See also: There's a wealth of information on debugging Chromium, much of which also applies to Electron, on the Chromium developers site: ：Chromium开发人员网站上有大量关于调试Chromium的信息，其中大部分也适用于Electron：Debugging Chromium on Windows.

Requirements要求​

  • A debug build of ElectronElectron的调试版本: The easiest way is usually building it yourself, using the tools and prerequisites listed in the build instructions for Windows. ：最简单的方法通常是自己构建，使用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.虽然您可以像直接下载Electron一样连接并调试它，但您会发现它经过了大量优化，使调试变得更加困难：调试器将无法向您显示所有变量的内容，并且由于内联、尾部调用和其他编译器优化，执行路径可能看起来很奇怪。

  • Visual Studio with C++ Tools: The free community editions of Visual Studio 2013 and Visual Studio 2015 both work. ：Visual Studio 2013和Visual Studio 2015的免费社区版都可以使用。Once installed, configure Visual Studio to use Electron's Symbol server. 安装后，将Visual Studio配置为使用Electron的Symbol服务器。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.它将使Visual Studio能够更好地了解Electron内部发生的事情，从而更容易以人类可读的格式呈现变量。

  • ProcMon: The free SysInternals tool allows you to inspect a processes parameters, file handles, and registry operations.：免费的SysInternal工具允许您检查进程参数、文件句柄和注册表操作。

Attaching to and Debugging Electron连接和调试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.要启动调试会话，请打开PowerShell/CMD并执行Electron的调试构建，使用要打开的应用程序作为参数。

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

Setting Breakpoints设置断点​

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

Relevant code files can be found in ./shell/.可以在./shell/中找到相关的代码文件。

Attaching​

You can attach the Visual Studio debugger to a running process on a local or remote computer. 您可以将Visual Studio调试器附加到本地或远程计算机上正在运行的进程。After the process is running, click Debug / Attach to Process (or press CTRL+ALT+P) to open the "Attach to Process" dialog box. 进程运行后，单击调试/附加到进程（或按CTRL+ALT+P）打开“附加到进程”对话框。You can use this capability to debug apps that are running on a local or remote computer, debug multiple processes simultaneously.您可以使用此功能调试在本地或远程计算机上运行的应用程序，同时调试多个进程。

If Electron is running under a different user account, select the Show processes from all users check box. 如果Electron在不同的用户帐户下运行，请选中“显示所有用户的进程”复选框。Notice that depending on how many BrowserWindows your app opened, you will see multiple processes. 请注意，根据应用程序打开的BrowserWindows数量，您将看到多个进程。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. 一个典型的单窗口应用程序将导致Visual Studio向您显示两个Electron.exe条目——一个用于主进程，一个用于渲染器进程。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?我应该附加到哪个进程？​

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.在主进程中执行的代码（即在主JavaScript文件中找到或最终由主JavaScript文件运行的代码）将在主进程内运行，而其他代码将在其各自的渲染器进程内执行。

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.您可以在“调试位置”工具栏或“进程”窗口中设置活动程序。

Using ProcMon to Observe a Process使用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. 虽然Visual Studio在检查特定的代码路径方面非常出色，但ProcMon的优势实际上在于观察应用程序在操作系统中所做的一切——它捕获了进程的文件、注册表、网络、进程和评测细节。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.它试图记录所有发生的事件，这可能会让人不知所措，但如果您想了解应用程序对操作系统的影响和方式，它可能是一种宝贵的资源。

For an introduction to ProcMon's basic and advanced debugging features, go check out this video tutorial provided by Microsoft.有关ProcMon的基本和高级调试功能的介绍，请查看Microsoft提供的视频教程。

Using 使用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:要使用WinDbg附加到调试进程，请执行以下操作：

  1. Add --renderer-startup-dialog as a command line flag to Electron.将--renderer-startup-dialog作为命令行标志添加到Electron。
  2. Launch the app you are intending to debug.启动要调试的应用程序。
  3. A dialog box will appear with a pid: “Renderer starting with pid: 1234”.将出现一个对话框，其中包含一个pid：“Renderer starting with pid:1234”。
  4. Launch WinDbg and choose “File > Attach to process” in the application menu.启动WinDbg并在应用程序菜单中选择“文件>附加到进程”。
  5. Enter in pid from the dialog box in Step 3.在步骤3的对话框中输入pid。
  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.在上面的命令行中键入“g”以启动被调试对象。
  8. Press the enter key to continue the program.按回车键继续执行程序。
  9. Go back to the dialog box and press “ok”.返回对话框并按“确定”。