ionic2
Setup und Debugging von Ionic 2 in Visual Studio Code
Suche…
Einführung
Visual Studio ist eine Open Source IDE, die Intellisense- und Bearbeitungsfunktionen für Code bietet. Diese IDE unterstützt viele Sprachen wie (Ionic, C, C #, AngularJs, TypeScript, Android usw.). Diese Sprachen können ihren Code ausführen, indem sie ihre Erweiterungen in VSCode hinzufügen. Mit VSCode können wir den Code verschiedener Sprachen ausführen und debuggen.
Installation von VSCode
Zunächst müssen Sie den VSCode herunterladen und installieren. Diese neueste Version von VSCode steht auf der offiziellen Website zum Download zur Verfügung. Nach dem Download des VSCode sollten Sie ihn installieren und öffnen.
Introduction of Extensions in VSCode
VSCode ist ein offener Editor, also Editor für alle Sprachen. Um einen Code auszuführen, müssen Sie die Erweiterung für diese bestimmte Sprache hinzufügen. Um Ihren ionischen Code auszuführen und zu bearbeiten, sollten Sie in Ihrem VSCode die ionic2-vscode- Erweiterung hinzufügen. Auf der linken Seite des VSCode-Editors befinden sich 5 Symbole, in denen das unterste Symbol für die Erweiterung verwendet wird. Die Erweiterungen erhalten Sie mit der Tastenkombination (Strg + Umschalttaste + X) .
Add Extension for Ionic2 in VsCode
Durch Drücken von Strg + Umschalttaste + X haben Sie den Teil der Erweiterung angezeigt, an dem oben drei Punkte angezeigt werden . Diese Punkte werden als mehr Symbole bezeichnet. Wenn Sie darauf klicken, wird ein Dialogfeld geöffnet, in dem die Anzahl der Optionen angezeigt wird Wählen Sie die gewünschte Option. Um jedoch alle Erweiterungen zu erhalten, wählen Sie die Option Empfohlene Erweiterung anzeigen. In der Liste aller Erweiterungen, in denen Sie die Erweiterung installieren können (ionic2-vscode),npm
Erstellen und fügen Sie Ihr Ionenprojekt in VSCode hinzu
VsCode ist nicht in der Lage , das ionische Projekt zu erstellen , weil es ein Code ist editor.So Sie Ihr ionisches Projekt von CLI oder cmd erstellen können. Erstellen Sie Ihr Projekt mit dem folgenden Befehl
$ ionic start appName blank
Mit dem obigen Befehl können Sie eine leere Vorlagenanwendung erstellen. Ionic2 bietet drei Arten von Vorlagen , Registerkarten und Seitenmenüs . So. Sie können die leere Vorlage durch zwei andere Vorlagen ersetzen.
Nun ist Ihr Ionenprojekt erstellt worden. So können Sie Ihr Projekt in VSCode zur Bearbeitung hinzufügen. Um Ihr Projekt hinzuzufügen, folgen Sie den folgenden Punkten.
- Gehen Sie Menü in VScode Datei.
- Klicken Sie im Menü Datei auf den Ordner öffnen .
- Suchen und öffnen Sie Ihren Projektordner.
Sie können den Ordner mit der Tastenkombination Strg + O oder Strg + K direkt öffnen
`
Führen Sie Ihr Ionenprojekt aus und debuggen Sie es
> In Chrome ausführen und debuggen
Um das ionische Projekt auszuführen , verwenden Sie den folgenden Befehl in terminal oder cmd oder CLI
$ ionic serve
Um das ionische Projekt zu debuggen , sollten Sie zuerst die Erweiterung (Debugger für Chrome) hinzufügen und anschließend die Datei launch.json so konfigurieren.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src"
}
]
}
> In Android ausführen und debuggen
Zum Ausführen eines ionischen Projekts in Android sollten Sie die Android-Plattform mit dem folgenden Befehl in terminal oder cmd oder CLI hinzufügen:
$ ionic cordova platform add android
Erstellen Sie Android mit diesem Befehl
$ ionic cordova build android
Befehl für Android-Plattform ausführen
$ ionic cordova run android
Jetzt läuft Ihre Anwendung auf einem echten Android-Gerät.
Zum Debuggen in Android-Geräten müssen Sie Cordova oder Android Extension in VSCode hinzufügen. und konfigurieren Sie die Datei launch.json wie folgt.
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Android on device",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "device",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Run iOS on device",
"type": "cordova",
"request": "launch",
"platform": "ios",
"target": "device",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Attach to running android on device",
"type": "cordova",
"request": "attach",
"platform": "android",
"target": "device",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Attach to running iOS on device",
"type": "cordova",
"request": "attach",
"platform": "ios",
"target": "device",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Run Android on emulator",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "emulator",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Run iOS on simulator",
"type": "cordova",
"request": "launch",
"platform": "ios",
"target": "emulator",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Attach to running android on emulator",
"type": "cordova",
"request": "attach",
"platform": "android",
"target": "emulator",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Attach to running iOS on simulator",
"type": "cordova",
"request": "attach",
"platform": "ios",
"target": "emulator",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Serve to the browser (ionic serve)",
"type": "cordova",
"request": "launch",
"platform": "serve",
"cwd": "${workspaceRoot}",
"devServerAddress": "localhost",
"sourceMaps": true,
"ionicLiveReload": true
},
{
"name": "Simulate Android in browser",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "chrome",
"simulatePort": 8000,
"livereload": true,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Simulate iOS in browser",
"type": "cordova",
"request": "launch",
"platform": "ios",
"target": "chrome",
"simulatePort": 8000,
"livereload": true,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
}
]
}
Nach der Konfiguration folgen Sie den folgenden Schritten oder kurzen Schlüsseln zum Debuggen:
Gehen Sie zum Debug- Menü.
Klicken Sie auf Debuggen starten .
oder
Short keys
Debugging - F5
StepOver - F10
Einsteigen und Aussteigen - F11
Beenden Sie das Debuggen - Umschalt + F5
Starten Sie Debugging -ctrl + shift_F5 neu
