ionic2
Installera och felsöka Ionic 2 i Visual Studio Code
Sök…
Introduktion
Visual Studio är en öppen källkods-IDE som tillhandahåller intelligens och redigeringsfunktion för kod. Denna IDE stöder många språk som (Ionic, C, C #, AngularJs, TypeScript, Android och så vidare). Dessa språk kan köra kod där genom att lägga till dess tillägg i VSCode. Genom att använda VSCode kan vi köra och felsöka koden på olika språk.
Installation av VSCode
Först måste du ladda ner och installera VSCoden. Denna senaste VSCode-version är tillgänglig för nedladdning på dess officiella webbplats . Efter att ha laddat ner VSCoden bör du installera och öppna den.
Introduction of Extensions in VSCode
VSCode är en öppen redaktör så det ger redaktör för alla språk men för att köra en kod måste du lägga till tillägget för det specifika språket. För att köra och redigera din joniska kod bör du lägga till ionic2-vscode- förlängning i dinVSCode. På vänster sida av VSCode Editor finns det 5 ikoner där den lägsta ikonen används för Extension. De tillägg du kan få genom att använda kortkommando (ctrl + shift + X) .
Add Extension for Ionic2 in VsCode
Genom att trycka på ctrl + shift + X visade du den del av tillägget där överst visas tre prickar ... dessa punkter är kända som mer ikon. När du klickar på den öppnas en dialogruta och visar antalet alternativ att välja. Du kan välj alternativet enligt ditt behov men för att få all anknytning ska du välja Visat rekommenderat tillägg. i listan över all eXtension du kan installera din anknytning (ionic2-vscode),npm
Skapa och lägg till ditt joniska projekt i VSCode
VsCode kan inte skapa det joniska projektet eftersom det är en kodredigerare. Så du kan skapa ditt joniska projekt av CLI eller cmd . skapa ditt projekt med kommandot nedan
$ ionic start appName blank
Använd ovanstående kommando för att skapa tomt joniskt program. Ionic2 ger tre typer av mallar tomma, flikar och sidemeny . Så. Du kan byta ut tom mall med andra två mallar enligt ditt behov.
Nu har ditt Ionic-projekt skapats. Så du kan lägga till ditt projekt i VSCode för att redigera. För att lägga till ditt projekt följer du punkter nedan.
- Gå till Arkiv- menyn i VScode.
- Klicka på Öppna mappen i Arkiv-menyn.
- Hitta och öppna din projektmapp.
Du kan öppna mappen direkt med hjälp av genvägstangenten ctrl + O eller ctrl + k
'
Kör och felsök ditt joniska projekt
> Kör och felsök i Chrome
För att köra det joniska projektet använd kommandot nedan i terminal eller cmd eller CLI
$ ionic serve
För att felsöka det joniska projektet bör du först lägga till tillägg (Debugger för krom) och sedan konfigurera lanseringen.json-fil som den här.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src"
}
]
}
> Kör och felsök i Android
För Run ionic-projekt i Android bör du lägga till Android-plattformen under kommando i terminal eller cmd eller CLI:
$ ionic cordova platform add android
Bygg Android med det här kommandot
$ ionic cordova build android
Kör kommando för Android-plattformen
$ ionic cordova run android
Nu kör din applikation på riktig Android-enhet.
För felsökning till Android-enhet måste du lägga till Cordova eller Android Extension i VSCode. och konfigurera start.json-fil så här.
{
"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}"
}
]
}
Efter konfigurationen följer du följande steg eller kortnycklar för felsökning:
Gå till felsökningsmenyn .
Klicka på starta felsökning .
eller
Short keys
Felsökning - F5
StepOver - F10
Steg in och steg ut - F11
Sluta felsökning - Skift + F5
Starta om felsökning -ctrl + shift_F5
