将Visual Studio调试器附加到Electron应用程序

16
我想尝试从头开始,使用Visual Studio 2017(而不是VS Code)调试Electron应用程序。 我创建了一个控制台Node.js项目,安装并保存了Electron。项目结构如下所示: enter image description here app.js文件的内容(取自Electron网站):
'use strict';

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow() {
    // Create the browser window.
    win = new BrowserWindow({ width: 800, height: 600 })

    // and load the index.html of the app.
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))

    // Open the DevTools.
    win.webContents.openDevTools()

    // Emitted when the window is closed.
    win.on('closed', () => {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        win = null
    })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
        createWindow()
    }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
    <h1>Hello World!</h1>
    We are using node
    <script>document.write(process.versions.node)</script>,
    Chrome
    <script>document.write(process.versions.chrome)</script>,
    and Electron
    <script>document.write(process.versions.electron)</script>.
</body>
</html>

然而,当我点击开始时,电子应用程序启动,但调试过程似乎自己分离。当我尝试手动附加调试器到所有电子进程(Debug-> Attach to process->选择所有电子进程)时,断点声称未被命中,因为没有加载符号。 enter image description here 这是项目属性页面: enter image description here 我错过了什么步骤吗?由于可以在VSCode上进行调试,所以我认为也可以在VS2017上进行调试?
非常感谢。
注意:我已检查Suppress JIT优化并取消选中Enable just my code。

你的应用程序是否在调试模式下运行? - Mohamed Chaawa
@Mohamed Chaawa,是的。 - TuanDT
这是一个愚蠢的评论,因为作为程序员,我假设您知道调试和发布之间的区别?您不是在尝试连接到发布版本吧?您是否尝试重新构建以更新调试符号? - Aaron. S
@Aaron.S 会有影响吗?我正在调试一个JS文件而不是Electron本身的内部。Electron在JS文件上运行。只要我正确指定调试端口,与在发布版Google Chrome上运行JavaScript文件调试相同的过程似乎也能正常工作。 - TuanDT
3个回答

9
这实际上非常容易做到。
1. 在 Visual Studio 中按照以下方式配置您的应用程序:

enter image description here

启动您的应用程序。Electron 将在一个单独的终端上启动,但 Visual Studio 不会连接到它。

enter image description here

  1. 前往 Debug > Attach to process... 并输入 Webkit WebSocket 连接类型和目标为http://127.0.0.1:5858enter image description here

  2. 您的断点现已启用。

enter image description here


啊啊啊。所有这些时间,我仍然需要指定连接目标。我以为它在属性文件中已经指定了。太好了! - TuanDT
我没有得到我期望的结果。调试器可以正常附加并且我可以命中断点,但是电子应用程序窗口无法正确加载: https://imgur.com/wsAmql9 我已经尝试了项目属性中的很多选项,但都不行。这是njsproj文件,如果有人想帮忙,请看一下: https://pastebin.com/qF4uCzBc 谢谢! - naphier
@naphier 请针对此问题发布一个新的问题。我不再有VS了。 - Maria Ines Parnisari

0

嗯...我已经阅读了,看起来这可能有效。但是我需要更多的实验来确认。 - TuanDT
我已经对我的答案进行了一些更改。 - user1773603

0
在您的“Node.exe选项”字段中,添加--debug=$DEBUG_PORT(适用于NodeJS v6及以下版本)或--inspect=$DEBUG_PORT(适用于NodeJS v7或更高版本),其中$DEBUG_PORT代表您在调试配置中指定的端口。
如果您没有传递端口,只传递了--debug--inspect标志,则Node调试器分别侦听端口5858和9229...他们在后续版本的node中将默认端口更改为9229。
如果这有帮助,请告诉我!

我已经这样做了,程序似乎出现了问题,但我无法恢复运行,并且断点仍未加载。 - TuanDT
尝试在 --debug 或 --inspect 标志后添加主机和端口。例如 --inspect=0.0.0.0:9229 - rdgd
在一个 Electron 应用中,主机是什么? - TuanDT
如果您正在本地计算机上运行它,那么应该是localhost... 因此请尝试:localhost127.0.0.10.0.0.0 - rdgd
这个能用吗?我尝试了很多不同的参数组合,但仍然无法使断点被触发。 - Maria Ines Parnisari
显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接