5-4 Debugger l'application

Il est possible de débugger facilement l'application Angular, à l'aide de breakpoint par exemple, en y attachant le débogueur de WebStorm.

Pour ce faire, vous devez:

1. Démarrer l'application via Angular CLI Server. C'est-à-dire la procédure précédente en cliquant sur la flèche verte dans le haut.
2. Vous devriez voir ceci dans l'en-tête de WebStorm lorsque l'application roule.
3. Cliquez sur la flèche du menu où il est écrit Angular CLI Server et appuyez sur le bouton Debug à la droite de Angular Application
4. Cela devrait lancer un navigateur avec un débogueur d'attaché, vous permettant de mettre des breakpoints dans WebStorm.

Mettre un breakpoint

Pour mettre un breakpoint, simplement cliquer dans la marge d'une ligne de code.

Par exemple:

1. Ajoutez un breakpoint à la ligne suivante dans le fichier src/app/app.ts en cliquant dans la marge.
2. Démarrez l'application en mode debug ou rafraichissez la page d'accueil si l'application était déjà démarrée
3. L'application devrait être suspendue dans WebStorm et arrêtée à l'endroit où vous aviez mis le breakpoint.