ionic2
Ionic 2 instellen en debuggen in Visual Studio Code
Zoeken…
Invoering
Visual Studio is een open source IDE die intellisense en bewerkingsmogelijkheden voor code biedt. Deze IDE ondersteunt vele talen zoals (Ionisch, C, C #, AngularJs, TypeScript, Android enzovoort). Deze talen kunnen hun code uitvoeren door de extensies toe te voegen in VSCode. Door VSCode te gebruiken, kunnen we de code van verschillende talen uitvoeren en debuggen.
Installatie van VSCode
Eerst moet u de VSCode downloaden en installeren. De nieuwste versie van VSCode kan worden gedownload van de officiële website . Na het downloaden van de VSCode moet u deze installeren en openen.
Introduction of Extensions in VSCode
VSCode is een open editor, dus het biedt een editor voor alle talen, maar om een code uit te voeren, moet u de extensie voor die specifieke taal toevoegen. Voor het uitvoeren en bewerken van uw ionische code moet u de extensie ionic2-vscode toevoegen in uw VSCode. Aan de linkerkant van VSCode Editor zijn er 5 pictogrammen waarin het laagste pictogram wordt gebruikt voor extensie. De extensies die u mogelijk krijgt met de sneltoets (ctrl + shift + X) .
Add Extension for Ionic2 in VsCode
Door op Ctrl + Shift + X te drukken, liet u het gedeelte van de extensie zien waar de bovenste drie stippen worden weergegeven ... deze stippen staan bekend als meer pictogram. Als u erop klikt, wordt er een dialoogvenster geopend met het aantal te kiezen opties. kies de optie volgens uw behoefte, maar voor het verkrijgen van alle extensies moet u Getoond aanbevolen extensie selecteren. iN de lijst met alle eXtension kunt u uw extensie (ionic2-vscode),npm installeren
Maak en voeg uw Ionische project toe in VSCode
VsCode kan het ionische project niet maken omdat het een codebewerker is. U kunt uw ionische project dus maken met CLI of cmd . maak uw project met onderstaande opdracht
$ ionic start appName blank
Bovenstaand commando gebruiken om lege sjabloon ionische applicatie te maken. Ionic2 biedt drie soorten sjablonen leeg, tabbladen en sidemenu . Zo. u kunt de lege sjabloon vervangen door twee andere sjablonen volgens uw behoefte.
Nu is uw Ionische project gemaakt. U kunt dus uw project in VSCode toevoegen om te bewerken. Volg onderstaande punten om uw project toe te voegen.
- Ga naar het menu Bestand in VScode.
- Klik op het menu Map openen in Bestand.
- Zoek en open uw projectmap.
U kunt de map direct openen met de sneltoets ctrl + O of ctrl + k
`
Run en debug uw Ionische project
> Uitvoeren en foutopsporing in Chrome
Gebruik het volgende commando in terminal of cmd of CLI om het ionische project uit te voeren
$ ionic serve
Voor het debuggen van het ionische project, moet u eerst de extensie (Debugger voor Chrome) toevoegen en vervolgens het launch.json-bestand als volgt configureren.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src"
}
]
}
> Uitvoeren en foutopsporing in Android
Voor Run ionic project in Android moet je Android-platform toevoegen door onderstaande opdracht in terminal of cmd of CLI:
$ ionic cordova platform add android
Bouw Android met deze opdracht
$ ionic cordova build android
Voer opdracht uit voor Android-platform
$ ionic cordova run android
Nu wordt uw app uitgevoerd op een echt Android-apparaat.
Voor foutopsporing naar Android-apparaat moet u Cordova of Android-extensie toevoegen in VSCode. en configureer het launch.json-bestand als volgt.
{
"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}"
}
]
}
Na de configuratie volgt u de volgende stappen of sneltoetsen voor foutopsporing:
Ga naar het foutopsporingsmenu .
Klik op debuggen starten .
of
Short keys
Foutopsporing - F5
StepOver - F10
Stap in en stap uit - F11
Stop Debugging - Shift + F5
Start Debugging -ctrl + shift_F5 opnieuw