Electron - WebDeskApps

Transkript

1 Electron - WebDeskApps Dies ist der dritte Artikel einer Serie über Electron. Im ersten Artikel wurden die Grundlagen von Electron, und die verschiedenen Ressourcen, die man benötigt um eine Electron-App zu entwickeln, beschrieben. In diesem Artikel wird erläutert, wie man dieses Tool installiert und eine einfache Electron- Applikation baut. In diesem Artikel konzentrieren wir uns auf die verschiedenen Möglichkeiten, eine Electron- Applikation zu debuggen. Übersicht: Demo-Projekt zum Debuggen Die Datei launch.json Die Erweiterung Debugger for Chrome Debugging einer Electron-Applikation Debugging des Main-Prozesses in Javascript Debugging des Main-Prozesses in Typescript Debugging eines Renderer-Prozesses in Javascript Debugging eines Renderer-Prozesses in Typescript Gleichzeitiges Debugging des Main-Prozesse und eines Renderer- Prozesses Next Demo-Projekt zum Debuggen Wir erstellen ein kleines Demoprojekt, um die Möglichkeiten des Debuggens mit VS Code zu verdeutlichen. Das Projekt hat den gleichen Aufbau wie das aus dem zweiten Artikel. Die Datei index.ts hat sich nicht geändert. Die Datei index.html verändern wir ein wenig, sie sieht jetzt so aus: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello Electron!</title> </head> <body> <h1>hello Electron!</h1> Electron version <script>document.write(process.versions.electron)</script>

2 <br/> Chromium version <script>document.write(process.versions.chrome)</script> <br/> Node.js version: <script>document.write(process.versions.node)</script> <script> require('./renderer.ts') </script> </body> </html> Hier zeigt sich ebenfalls die Stärke von Electron: wir können Funktionalität durch Einbinden von Scripten durch die Angabe von require hinzufügen. Wir erzeugen also eine Typescript- Datei mit dem Namen renderer.ts und folgendem einfachen Inhalt: function sayhi() console.log('hi') sayhi(); Wir hätten natürlich auch eine renderer.js mit require einbinden können. Die Datei launch.json VS Code benötigt zum Debuggen die Datei launch.json, in der das Setup für das Debugging hinterlegt ist. Diese Datei kann mehrere Konfigurationen für das Debugging beinhalten. Die Datei launch.json lässt sich entweder manuell oder durch VS Code selbst erzeugen. Möchte man diese mit VS Code erzeugen, so muss man in der Debug-Ansicht eine neue Konfiguration anlegen. VS Code legt sofort die Datei an und lässt uns sofort eine Konfiguration auswählen. An dieser Stelle muss man wissen, welches Template man einfügen möchte, damit die manuellen Anpassungen möglichst gering ausfallen.

3 Die Datei launch.json wird im Verzeichnis.vscode gespeichert, was ebenfalls verdeutlicht, dass sie nur für VS Code gedacht ist. Die Erweiterung Debugger for Chrome Damit man mit VS Code acu Renderer-Prozesse debuggen kann, muss eine Erweiterung installiert werden. Dies gestaltet sich sehr einfach: im VS Code den Bereich für Extensions auswählen, nach der Extension suchen, diese installieren und anschließend VS Code neu starten. Debugging einer Electron-Applikation Eine Electron-Applikation besteht aus zwei Typen von Prozessen: dem Main-Prozess und dem Renderer-Prozess. Der Main-Prozess wird in Node.js ausgeführt, der Render-Prozeess dagegen im Chromium. Als Entwickler möchten wir deswegen vielleicht nur den Main- Prozess, oder nur den Render-Prozess, oder sogar beide debuggen. Daraus resultiert aber, dass man zwei Instanzen des Debuggers benötigt. Der Debugger für den Main-Prozess ist im Node.js enthalten, der Debugger für den Renderer-Prozess kommt als Erweiterung (Extension) für den Chrome-Browser daher. Wir haben, wenn wir Typescript benutzen, die Möglichkeit entweder den Typescript- oder den Javascript-Code zu debuggen. Mit Visual Studio Code ist beides möglich, je nach gewählter Konfiguration. Die verschiedenen Konfigurationsmöglichkeiten werden nun einzeln beschrieben. Debugging des Main-Prozesses in Javascript Die Datei launch.json sollte für unser Projekt folgendermaßen aussehen: // launch.json "version": "0.2.0",

4 "name": "Debug Electron Main Process", "type": "node", "cwd": "$workspaceroot", "$workspaceroot/node_modules/.bin/electron", "--remote-debugging-port=9222", "." "windows": "$workspaceroot/node_modules/.bin/electron.cmd", "program": "$workspaceroot/index.js", "protocol": "inspector", Der Name der Konfiguration sollte gut gewählt sein: kurz und eindeutig. Zu beachten sind auch noch zwei andere Punkte. Der erste ist der Pfad zu Electron (innerhalb des heruntergeladenen Paketes). Der zweite Punkt betrifft den Pfad zum Einstiegspunkt, d.h. in diesem Fall ist es die Datei index.js. Der Eintrag für runtimeargs ist von Bedeutung, wenn wir gleichzeitig den Main- und einen er-prozess debuggen möchten - für beide muss der gleiche Port konfiguriert sein. Nun kann man die Breakpoints in den Javascript-Dateien des Main-Prozesses setzen, die erstellte Konfiguration auswählen und mit dem Debugging anfangen. Debugging des Main-Prozesses in Typescript Die Konfiguration unterscheidet sich nicht von der Konfiguration, wie sie unter Debugging des Main-Prozesses in Javascript beschrieben worden ist. Damit man Typescript-Dateien debuggen kann, muss noch in der Datei tsconfig.json der Eintrag "sourcemap": true vorhanden sein. Dadurch wird eine *map-datei konfiguriert, die dann vom Debugger benutzt wird. Deswegen haben wir zwar als Einstiegspunkt die Datei index.js angegeben, aber gedebuggt wird die Datei index.ts. Nun kann man die Breakpoints in den Typescript-Dateien des Main-Prozesses setzen, die erstellte Konfiguration auswählen und mit dem Debugging anfangen.

5 Debugging eines Renderer-Prozesses in Javascript Die Datei launch.json sollte für unser Projekt folgendermaßen aussehen: // launch.json "version": "0.2.0", "name": "Debug Electron Renderer Process", "type": "chrome", "$workspaceroot/node_modules/.bin/electron", "windows": "$workspaceroot/node_modules/.bin/electron.cmd", "$workspaceroot/index.js", "--remote-debugging-port=9222" "webroot": "$workspaceroot" Wir teilen dem Debugger for Chrome mit, dass er den Port 9222 benutzen soll (das ist der Standardport). Anhand von webroot kann Chrome erkennen, wo sich die Sourcedateien befinden, die wir debuggen möchten. Nun kann man die Breakpoints in den Javascript-Dateien des Renderer-Prozesses setzen, die erstellte Konfiguration auswählen und mit dem Debugging anfangen. Da es sich um ein Renderer-Prozess handelt, wird der Breakpoint natürlich nur dann erreicht, wenn es etwas zum Rendern gibt (ein View > Reload sollte genügen). Debugging eines _Renderer_-Prozesses in Typescript Die Konfiguration unterscheidet sich nicht von der Konfiguration, wie sie unter Debugging eines Renderer-Prozesses in Javascript beschrieben worden ist. Damit man Typescript-Dateien debuggen kann, muss noch ein Eintrag in der Datei tsconfig.json; der Eintrag "sourcemap": true vorhanden sein. Dadurch wird eine *map-datei konfiguriert, die dann vom debugger benutzt wird. Deswegen haben wir zwar als Einstiegspunkt die Datei index.js angegeben, aber gedebuggt wird die Datei index.ts.

6 Nun kann man die Breakpoints in den Typescript-Dateien des Renderer-Prozesses setzen und mit dem Debugging anfangen. Da es sich um ein Renderer-Prozess handelt, wird der Breakpoint natürlich nur dann erreicht, wenn es etwas zum Rendern gibt (ein View > Reload sollte genügen). Gleichzeitiges Debugging des Main-Prozesse und eines Renderer-Prozesses Möchte man beide Prozesstypen gleichzeitig debuggen, so kombiniert man die obigen Konfigurationen und legt sie in der Datei launch.json ab. Um Javascript-Dateien zu debuggen, benötigen wir etwa folgende launch.json-datei für unser Projekt: // launch.json "version": "0.2.0", "name": "Debug Electron Main Process", "type": "node", "cwd": "$workspaceroot", "$workspaceroot/node_modules/.bin/electron", "--remote-debugging-port=9222", "." "windows": "$workspaceroot/node_modules/.bin/electron.cmd", "program": "$workspaceroot/index.js", "protocol": "inspector",, "name": "Debug Electron Renderer Process", "type": "chrome", "$workspaceroot/node_modules/.bin/electron", "windows": "$workspaceroot/node_modules/.bin/electron.cmd", "$workspaceroot/index.ts", "--remote-debugging-port=9222"

7 "webroot": "$workspaceroot" "compounds": [ "name": "Debug Electron All", "Debug Electron Main Process", "Debug Electron Renderer Process" Hier erkennt man, wie man Konfigurationen kombinieren kann. Damit man Typescript-Dateien debuggen kann, muss noch ein Eintrag in der Datei tsconfig.json; der Eintrag "sourcemap": true vorhanden sein. Next Im nächsten Artikel kümmern wir uns noch etwas um den Compiler und beginnen, eine kleine - aber nützliche - Electron-Applikation zu entwickeln. Wojciech Kusch