electron 打开调试_在 Windows 中调试

EN

如果你在 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.

EN

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.

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.

EN

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 的免费社区版本都可以使用。 Once installed, configure Visual Studio to use Electron's Symbol server. 它将使 Visual Studio 能够更好地理解 Electron 中发生的事情，从而更容易以人类可读的格式呈现变量。

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

EN

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.

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.

ProcMon: The free SysInternals tool allows you to inspect

a processes parameters, file handles, and registry operations.

EN

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

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

EN

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/

EN

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

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

EN

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.

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

EN

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

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

EN

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.

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.

EN

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.

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

EN

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.

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.

EN

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

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

EN

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.

For an introduction to ProcMon's basic and advanced debugging features, go check

out this video tutorial provided by Microsoft.