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

青灯夜游
Freigeben: 2022-04-22 10:06:04
nach vorne
3296 Leute haben es durchsucht

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 dem Login kopieren

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"
  }
}
Nach dem Login kopieren

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

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

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

调试配置

使用 VSCode 打开 ,做如下操作:

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

生成如下配置的 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"
        }
    ]
}
Nach dem Login kopieren

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

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

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: Lassen Sie uns darüber sprechen, wie Sie den Hauptprozesscode der Electron-Anwendung auf VSCode debuggen!

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

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",  // 主文件路径
            ]
        }
    ]
}
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!