Bonjour, Habr! Chez Iponweb, nous faisons non seulement de la magie avec
Kubernetes , mais nous créons également des interfaces utilisateur sophistiquées. Le cadre principal que nous utilisons est Angular (ainsi que AngularJs pour les pièces héritées), donc la commodité du développement pour nous n'est pas une phrase vide. Nous avons décidé de traduire un article de Mark Pieszak, qui est conçu pour augmenter la commodité du débogage du code JS.
Kenneth Auchnberg, le gestionnaire de programme de l'équipe VSCode, a récemment publié une extension qui vous permet d'exécuter et de déboguer n'importe quelle application JS directement dans l'IDE VSCode!
Dans cet article, nous parlerons de choses liées à la CLI angulaire, mais gardez à l'esprit que vous pouvez utiliser n'importe quel autre framework (ou vous en passer) et continuer à utiliser l'aperçu du navigateur!
Personnalisation
Pour démonstration, nous vous suggérons de créer une application via la CLI angulaire à partir de zéro. Cependant, si vous disposez déjà d'une application angulaire, vous pouvez ignorer cette section et utiliser l'aperçu du navigateur.
Vous avez maintenant une installation propre d'Angular. Assurons-nous que les extensions nécessaires pour VSCode sont installées.
Installer des extensions pour VSCode depuis l'App Store
Accédez au magasin d'extensions et téléchargez l'
aperçu du navigateur et le
débogueur pour Chrome , si vous ne l'avez pas déjà installé.
Configuration de VSCode Launch.json
Dans le volet gauche, sélectionnez
l' onglet
Débogage et ajoutez une nouvelle configuration pour le plug-in d'
aperçu du
navigateur .
Cette action créera une configuration
Launch.json simple, mais pour qu'elle fonctionne avec l'application Angular, vous devez apporter quelques modifications.
Comme vous l'avez peut-être remarqué, l'URL
http: // localhost: 3000 est utilisée par défaut, mais comme la CLI angulaire s'exécute sur le port
4200 , l'URL doit être corrigée sur
localhost : 4200.
De plus, dans VSCode, vous devez spécifier où se trouve le dossier racine (
webRoot ) de votre application. Dans le cas d'Angult, la CLI est
$ {workspaceFolder} .
Pour commencer, vous devez effectuer uniquement ces deux paramètres.
Lancer l'aperçu du navigateurAvant de commencer le débogage dans VSCode à l'aide de l'aperçu du navigateur, assurez-vous que vous avez déjà lancé l'application Angular à partir du terminal.
Lancez votre application angulaire à l'aide des commandes npm start ou ng serve, puis ouvrez l'onglet Debug dans VSCode. Assurez-vous que la configuration
«Aperçu du navigateur: lancement» que vous avez créée est sélectionnée dans la barre latérale de débogage, puis cliquez sur
«Démarrer le débogage» (ou
F5 ).
À droite de la fenêtre de code, une fenêtre apparaît avec votre application Angular.
Débogage avec aperçu du navigateur
Maintenant que tous les préréglages sont terminés, vérifiez le processus de débogage.
Ajoutez un bouton et un intercepteur d'événements de clic dessus au modèle app.component.html.
<b>app.component.html</b> <button (click)="testDebugging()">Click Me!</button> <b>app.component.ts</b> testDebugging() { this.title = 'browser preview works!!';
Étant donné que la CLI angulaire gère la reconstruction, toutes les modifications que vous apportez au projet, une fois enregistrées, rechargeront automatiquement l'aperçu.
Définissez un point d'arrêt à l'intérieur de la méthode testDebugging ().
Lorsque la fenêtre d'aperçu se recharge, cliquez sur le bouton
«Cliquez sur moi» et regardez la magie qui se produit.
Et donc, vous l'avez fait! Après avoir cliqué sur le bouton "Click Me", l'aperçu du navigateur fixera le point d'arrêt.
Nous espérons que cet article vous aidera à développer votre application.
Liens et démo
Dépôt de démonstration angulaireRepo de prévisualisation du navigateur VSCodeArticle original