ionic2
Configuration et débogage Ionic 2 dans le code Visual Studio
Recherche…
Introduction
Visual Studio est un IDE open source qui fournit des fonctionnalités d'édition et de programmation pour le code. Cet IDE prend en charge de nombreux langages tels que (Ionic, C, C #, AngularJs, TypeScript, Android, etc.). Ces langages peuvent exécuter leur code en ajoutant ses extensions dans VSCode. En utilisant VSCode, nous pouvons exécuter et déboguer le code de différentes langues.
Installation de VSCode
Tout d'abord, vous devez télécharger et installer le VSCode. Cette dernière version de VSCode est disponible pour téléchargement sur son site Web officiel . Après avoir téléchargé le VSCode, vous devez l'installer et l'ouvrir.
Introduction of Extensions in VSCode
VSCode est un éditeur ouvert, il fournit donc un éditeur pour toutes les langues, mais pour exécuter un code, vous devez ajouter l'extension pour cette langue particulière. Pour exécuter et éditer votre code ionique, vous devez ajouter l'extension ionic2-vscode dans yourVSCode. Dans la partie gauche de l'éditeur VSCode, il y a 5 icônes dans lesquelles l'icône la plus basse est utilisée pour l'extension. Les extensions que vous pouvez obtenir en utilisant la touche de raccourci (Ctrl + Maj + X) .
Add Extension for Ionic2 in VsCode
En appuyant sur Ctrl + Maj + X, vous avez montré la partie de l’extension où les trois premiers points sont affichés . Ces points sont connus sous le nom de plus d’icône. Choisissez l'option selon vos besoins, mais pour obtenir toutes les extensions, sélectionnez Extension recommandée affichée .iN la liste de toutes les extensions que vous pouvez installer (ionic2-vscode),npm
Créez et ajoutez votre projet ionique dans VSCode
VsCode est incapable de créer le projet ionique car il s'agit d'un éditeur de code. Vous pouvez donc créer votre projet ionique par CLI ou cmd . créer votre projet par la commande ci-dessous
$ ionic start appName blank
Commande ci-dessus pour créer une application ionique modèle vierge. Ionic2 fournit trois types de modèles vierges, des onglets et des menus latéraux . Alors. vous pouvez remplacer le modèle vierge par deux autres modèles selon vos besoins.
Maintenant, votre projet ionique a été créé. Ainsi, vous pouvez ajouter votre projet dans VSCode pour le modifier. Pour ajouter votre projet, suivez les points ci-dessous.
- Allez dans le menu Fichier dans VScode.
- Cliquez sur le menu Ouvrir un dossier dans un fichier.
- Recherchez et ouvrez votre dossier de projet.
Vous pouvez directement ouvrir le dossier en utilisant la touche de raccourci ctrl + O ou ctrl + k
`
Exécuter et déboguer votre projet ionique
> Exécuter et déboguer dans Chrome
Pour exécuter le projet ionique, utilisez la commande ci-dessous dans terminal ou cmd ou CLI
$ ionic serve
Pour déboguer le projet ionique, vous devez d'abord ajouter une extension (Debugger for chrome) , puis configurer le fichier launch.json comme ceci.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src"
}
]
}
> Exécuter et déboguer dans Android
Pour Run ionic project dans Android, vous devez ajouter la plate-forme Android par la commande ci-dessous dans le terminal ou cmd ou CLI:
$ ionic cordova platform add android
Construire Android avec cette commande
$ ionic cordova build android
Exécuter la commande pour la plateforme Android
$ ionic cordova run android
Maintenant, votre application s'exécute sur le vrai appareil Android.
Pour déboguer dans un appareil Android, vous devez ajouter l'extension Cordova ou Android dans VSCode. et configurez le fichier launch.json comme ceci.
{
"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}"
}
]
}
Après la configuration, suivez les étapes suivantes ou les raccourcis clavier pour le débogage:
Aller au menu de débogage .
Cliquez sur Démarrer le débogage .
ou
Short keys
Débogage - F5
StepOver - F10
Entrez et sortez - F11
Arrêtez le débogage - Maj + F5
Redémarrer le débogage -ctrl + shift_F5