Lassen Sie uns darüber sprechen, wie Sie den Hauptprozesscode der Electron-Anwendung auf VSCode debuggen!

Um die Arbeitseffizienz zu verbessern, müssen wir bei der Entwicklung von Electron-Anwendungen Debugging-Tools verwenden, um Probleme rechtzeitig zu erkennen und zu lösen.

VSCode ist derzeit der beliebteste Code-Editor. Die meisten meiner Codes werden darauf entwickelt, und Electron-Anwendungen bilden da keine Ausnahme. Heute werde ich Ihnen zeigen, wie Sie den Hauptprozesscode der Electron-Anwendung auf VSCode debuggen.

Die in diesem Artikel beschriebenen Schritte basieren auf denen, die bereits mit der VSCode-Debugging-Methode vertraut sind oder diese kennen. Bitte folgen Sie Ihren Anforderungen!

Gebäudeumgebung

Das in diesem Artikel verwendete Projekt ist electron-quick-start.

$ git clone https://github.com/electron/electron-quick-start
$ cd ./electron-quick-start
$ npm install

Nach den oben genannten Schritten wurde die grundlegende Electron-Anwendungsentwicklungsumgebung eingerichtet. package.json anzeigen:package.json:

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "16.0.6"
  }
}

我们可以在终端运行 npm run start 来查看运行结果：

可以看到，环境搭建已经大功告成！接下来进入开发调试环节。

调试配置

使用 VSCode 打开  ，做如下操作：

生成如下配置的 lauch.json

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/main.js"
        }
    ]
}

Wir können npm run start im Terminal ausführen, um die Ergebnisse anzuzeigen:

Sie können sehen, dass die Umgebungseinrichtung abgeschlossen ist! Als nächstes treten Sie in die Entwicklungs- und Debugging-Phase ein.

Debug-Konfiguration

Mit VSCode öffnen und Folgendes tun:

Generieren Sie die Datei lauch.json mit der folgenden Konfiguration:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Main Process",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
            },
            "args": [
                "./main.js",  // 主文件路径
            ]
        }
    ]
}

Wir ändern sie Konfiguration wie folgt:

rrreee

Starten Sie das Debuggen

Nachdem wir die oben genannte Umgebungseinrichtung und Dateikonfiguration abgeschlossen haben, können wir Spaß am Debuggen haben (Haltepunkte nach Bedarf setzen):

🎜🎜Jeder sollte die Debugging-Methode von VSCode kennen Ich bin damit vertraut, daher werde ich hier nicht auf Details eingehen. Ich wünsche allen viel Spaß beim Debuggen und viel Spaß beim Angeln! 🎜🎜Fazit🎜🎜Die in diesem Artikel vorgestellte Methode ist nur eine der Möglichkeiten, den Electron-Hauptprozesscode zu debuggen. Sie kann als Ausgangspunkt betrachtet werden. Wenn Sie eine bessere Debugmethode haben, hinterlassen Sie bitte eine Nachricht im Kommentarbereich und freue mich auf die Interaktion mit allen! 🎜🎜~Dieser Artikel ist zu Ende, vielen Dank fürs Lesen! 🎜🎜Weitere Informationen zu VSCode finden Sie unter: 🎜vscode-Tutorial🎜! ! 🎜🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie den Hauptprozesscode der Electron-Anwendung auf VSCode debuggen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!