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!
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" } ] }
npm run start
im Terminal ausführen, um die Ergebnisse anzuzeigen: Mit VSCode öffnen und Folgendes tun:
Generieren Sie die Dateilauch.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", // 主文件路径 ] } ] }
rrreee
Starten Sie das Debuggen
🎜🎜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!