14

Próbuję debugować aplikację elektronową od Visual Studio 2017 (i nie vscode) od zera.Dołącz debuggera Visual Studio do aplikacji elektronowej

Stworzyłem projekt konsoli nodejs, instaluję i zapisuję elektron. Struktura projektu: enter image description here

Zawartość app.js (zaczerpnięte ze strony internetowej elektronu):

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

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

Jednak gdy klikam START, rozpoczyna aplikacji elektron, ale proces debugowania wydaje się oddzielać. Kiedy próbuję ręcznie dołączyć debuggera do wszystkich procesów elektronowych (Debuguj -> Dołącz do procesu -> wybierz wszystkie procesy elektronowe), punkty przerwania nie zgłaszają roszczeń, ponieważ żadne symbole nie są ładowane. enter image description here

Jest to strona właściwości projektu: enter image description here

Czy jest to krok, który tęskniłem? Ponieważ debugowanie można wykonać na VSCode, zakładam, że można to zrobić również w VS2017?

Wielkie dzięki.

UWAGA: Sprawdziłem, czy pominąć optymalizację JIT i odznacz opcję Włącz tylko mój kod.

+0

Prowadzisz swoją aplikację w trybie debugowania? –

+0

@Mohamed Chaawa, tak. – TuanDT

+0

to jest głupi komentarz, ponieważ jako programista zakładam, że znasz różnicę między debugowaniem a wydaniem? nie próbujesz dołączyć do wersji release, prawda? czy próbowałeś odbudować, aby symbole debugowania zostały zaktualizowane? –

Odpowiedz

3

To jest rzeczywiście bardzo łatwe do zrobienia.

  1. Skonfiguruj swoją aplikację w Visual Studio tak:

enter image description here

  1. Uruchom aplikację. Electron rozpocznie się na osobnym terminalu, ale Visual Studio nie zostanie do niego dołączone.

enter image description here

  1. Przejdź do Debug> Dołącz do przetwarzania ... i wprowadź Webkit websocket typ połączenia i http://127.0.0.1:5858 jako cel. enter image description here

  2. Twoje punkty przerwania są teraz włączone.

enter image description here

+0

ahhh. Przez cały ten czas muszę jeszcze określić cel połączenia. Myślałem, że jest określony w pliku właściwości. Miły! – TuanDT

0

W swojej „Opcje Node.exe” pola, dodać --debug=$DEBUG_PORT dla NodeJS v6 i poniżej lub --inspect=$DEBUG_PORT dla NodeJS v7 lub większa gdzie $DEBUG_PORT ma symbolizować portu zostały określone w konfiguracji debugowania.

Jeśli nie przekazujesz portu i przekazujesz tylko flagę --debug lub --inspect, to debugowanie węzła nasłuchuje na portach odpowiednio 5858 i 9229 ... zmienił domyślny port na 9229 w nowszych wersjach węzła.

Daj mi znać, jeśli to pomoże!

+0

Zrobiłem to, program wydaje się być uszkodzony, ale nie mogę wznowić działania, a punkt przerwania wciąż nie jest załadowany . – TuanDT

+0

Spróbuj dodać host i port po flagach --debug lub --inspect. Na przykład '--inspect = 0.0.0.0: 9229' – rdgd

+0

Jaki byłby host w aplikacji elektronowej? – TuanDT

0

widząc dlaczego symbole nie są ładowane wpisz następujące polecenia w Windbg.

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

Creating an Electron app using Visual Studio (not VSCode) w/ Node.js tools

+0

Uhmn ... Przeczytałem, wygląda na to, że to może zadziałać. Ale będę musiał eksperymentować z tym bardziej, aby to potwierdzić. – TuanDT

+0

Wprowadziłem kilka zmian w mojej odpowiedzi. – AsifAli72090

+0

Naprawdę wypróbowałem kroki w dokumentacji i nie działały - wybieranie debugowania przez proces Electron.exe nie trafiło w punkty przerwania. Dodałem także symbole debugowania dla Electron i to nie pomogło ani –