webentwicklung-frage-antwort-db.com.de

Befestigen Sie den Visual Studio-Debugger an der Elektron-App

Ich versuche, die Elektro-App von Visual Studio 2017 (und nicht von VScode) von Grund auf zu debuggen.

Ich habe ein Konsolenknotenprojekt erstellt, Elektron installiert und gespeichert. Projektstruktur:  enter image description here

Inhalt von app.js (entnommen von der Website von 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.

Und 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>

Wenn ich jedoch auf Start klicke, wird die Elektronen-App gestartet, der Debugging-Prozess scheint sich jedoch zu lösen. Wenn ich versuche, den Debugger manuell an alle Elektronenprozesse anzuhängen (Debuggen -> An Prozess anhängen -> Alle Elektronenprozesse auswählen), behauptet der Haltepunkt, dass er nicht getroffen wird, da keine Symbole geladen werden  enter image description here

Dies ist die Projekteigenschaftsseite:  enter image description here

Gibt es einen Schritt, den ich übersehen habe? Da das Debuggen auf VSCode erfolgen kann, gehe ich davon aus, dass es auch in VS2017 möglich ist.

Danke vielmals.

HINWEIS: Ich habe die Option JIT-Optimierung unterdrücken aktiviert und die Option Nur Code aktivieren aktivieren.

15
TuanDT

Das ist eigentlich sehr einfach.

  1. Konfigurieren Sie Ihre App in Visual Studio folgendermaßen:

 enter image description here

  1. Starten Sie Ihre App. Electron wird an einem separaten Terminal gestartet, aber Visual Studio wird nicht daran angeschlossen.

 enter image description here

  1. Gehen Sie zu Debug> An Prozess anhängen ... und geben Sie den Verbindungstyp Webkit-Websocket und http://127.0.0.1:5858 als Ziel ein.  enter image description here

  2. Ihre Haltepunkte sind jetzt aktiviert.

 enter image description here

Fügen Sie im Feld "Node.exe-Optionen" --debug=$DEBUG_PORT für NodeJS v6 und darunter oder --inspect=$DEBUG_PORT für NodeJS v7 oder höher hinzu, wobei $DEBUG_PORT den in Ihrer Debug-Konfiguration angegebenen Port symbolisieren soll.

Wenn Sie keinen Port und nur das Flag --debug oder --inspect übergeben, überwacht der Node-Debugger die Ports 5858 und 9229. In späteren Versionen des Knotens wurde der Standardport in 9229 geändert.

Lassen Sie mich wissen, ob das hilft!

0
rdgd

Um zu sehen, warum Symbole nicht geladen werden, tippen Sie die folgenden Befehle in Windbg .

> !sym noisy
> .reload /f electron.exe

Erstellen einer Electron-App mit Visual Studio (nicht VSCode) mit Node.js-Tools

0
user5377037