Si vous avez une question à propos de cet article, n’hésitez pas à me contacter via Twitter: http://twitter.com/meulta

Quand on se lance dans le développement web, on démarre par une longue phase d’apprentissage des languages. A ce moment-là, on ne se pose pas trop la question du logiciel qu’on utilise pour écrire son code. On prend ce qu’on nous conseille à droite ou à gauche, généralement celui du premier tutoriel qu’on a suivi.

Dès qu’on progresse et qu’on arrive à un stade on maîtrise le code qu’on écrit, on commence à faire attention aux outils qu’on utilise. On démarre l’utilisation de Gulp ou Grunt pour minifier ses fichiers automatiquement ou vérifier son code JavaScript avec JSLint. Et dans ce processus d’amélioration de sa propre expérience de développement se pose la question de l’éditeur de code qu’on utilise. SublimeText ? Notepad++ ? Autre chose ? Le choix n’est pas simple et les défenseurs de l’un ou de l’autre vous donnerons leur point de vue un peu partout sur le net. 🙂

Enter Visual Studio Code !

image

Visual Studio Code est une alternative très intéressante à ces outils. Il faut le voir comme un éditeur de code idéal pour un développeur web full stack. Parmi ses fonctionnalités les plus intéressantes on peut noter :

  • L’auto-complétion et l’intelliSense
  • La coloration syntaxique
  • Son extensibilité via des plugins accessibles au sein d’une gallerie
  • La gestion de nombreux langages tels que HTML, CSS / Sass / Less, JavaScript, C#, JSON, DockerFile, Markdown, TypeScript
  • L’intégration à Git (et donc GitHub)
  • L’éxécution de tâches Gulp, Grunt et autres systèmes de workflow
  • Le debug de code côté serveur tels que ASP.net et Node.js

Vous pouvez le télécharger gratuitement ici : https://www.microsoft.com/france/visual-studio/code/

Ne pas confondre avec Visual Studio

Visual Studio est un environnement de développement très complet proposé par Microsoft depuis des années. Il permet de faire toutes sortes de dev, que ce soit pour le web, pour le serveur, pour créer des applications Win32, des applications Android, iOS, Windows et développer pour le Cloud.

Visual Studio Code est un logiciel complétement différent. Il fonctionne sur Linux, Mac et Windows et est Open-Source (https://github.com/Microsoft/vscode).

Et surtout : Il est extrêmement plus léger que son cousin historique!

C’est cet outil que nous utilisons au quotidien pour développer l’outil de débug web open-source Vorlon.js (http://www.vorlonjs.io).

Développer avec VS Code

Le fonctionnement de VS Code est très simple. Vous effectuez un clic droit sur un répertoire et demandez Ouvrir avec Code. Le répertoire et l’intégralité des fichiers qui s’y trouvent sont alors ouvert dans une instance de VS Code.

image  image

Le langage est automatiquement découvert par l’outil et la coloration syntaxique se met en place.

image

Intégrer votre outil de workflow

Quand on fait du développement web, même dans le cas d’une application Node.js, on a toujours des tâches à exécuter avant chaque test. Généralement, on utilise un outil comme Grunt ou Gulp pour automatiser ces tâches. Ces outils de workflow (ou “ordonnanceurs de tâches”) s’intègrent parfaitement à VS Code.

Dans l’exemple très basic disponible ici : https://github.com/meulta/meultasamples/tree/master/debugNodeVSCode vous trouverez un fichier gulpfile.js qui execute une tâche JSLint pour vérifier la syntaxe du code JavaScript de mes différents fichiers.

Vous pouvez l’exécuter en ligne de commande:

image

Note : n’oubliez pas d’effectuer un npm install dans le répertoire au préalable pour installer les dépendances nécessaires. Et d’effectuer un npm install –g gulp si Gulp n’est pas installé sur votre poste.

Pour vous simplifier la vie, vous pourriez évidemment créer une tâche watch qui exécuterait tout votre workflow à chaque modification de fichier.

Une version intermédiaire existe dans Visual Studio Code. L’exécution du workflow se fait avec le raccourci clavier Ctrl+Maj.+B. La première fois il n’est pas configuré et VS Code vous propose de le faire pour vous:

image

Cela a pour effet de créer le répertoire .vscode. Celui-ci contient toute la configuration spécifique à VS Code et notamment le fichier tasks.json qui défini vos tâches et comment les exécuter.

image

Vous n’avez plus qu’à ajouter la configuration décrivant la tâche qui doit être exécutée (ici default). Chaque fois que vous ferez le raccourci Ctrl+Shift+B le processus sera exécuté avec un retour direct dans VS Code!

image

Débuguer son application Node.js

Configuration

Vous avez maintenant un environnement simple à utiliser pour créer votre code, pour vérifier sa qualité et effectuer n’importe quel traitement tel que de la minification ou du bundling.

Un des aspects intéressants de VS Code est que vous pouvez réaliser du debug live et pas à pas de votre code.

Le debug et toutes les fonctionnalités associées sont regroupées dans le dernier onglet situé dans le bandeau gauche. Lorsque vous cliquez sur le bouton en forme de triangle vert (le bouton “play”) cela aura pour effet de démarrer le debug:

image

Au tout premier lancement VS Code vous demande le type d’application que vous souhaitez débuguer:

image

Peu importe votre choix, cela aura pour effet de créer le fichier .vscode/launch.json qui contient tous les paramètres de débug avancés. Vous pouvez y configurer par exemple le type de debug (ici : “node”), le fichier JavaScript à exécuter : ici, je l’ai modifié en server.js:

image

Dans ce fichier, vous pouvez définir deux configurations.

  • Launch : démarre le processus node et s’y attache
  • Attach : permet de s’attacher à un processus node déjà démarré.

Pour chacun de ces modes de démarrage, vous pouvez choisir les paramètres associés.

Quand vous démarrez le débug (en launch ou en attach), une console apparaît et vous donne les logs générés par votre application Node. Vous avez également accès à un panneau de contrôle en haut de l’outil qui vous permet de naviguer dans l’exécution du code ou d’arrêter le debug avec le bouton stop (carré rouge).image

Les points d’arrêt

Lorsque l’on effectue une session de debug, un des objectifs est de pouvoir jeter un œil à l’exécution du code à un instant T. On évite généralement de parcourir tout le code ligne à ligne, on a plutôt tendance à laisser libre cours et à l’arrêter à la ligne de code choisie. C’est tout l’intérêt des points d’arrêt.

Pour positionner un point d’arrêt vous pouvez :

  • Cliquer dans la marge à la hauteur de la ligne pour laquelle vous souhaitez le définir
  • Positionner le curseur dans le code et appuyer sur la touche F9

Dans tous les cas cela à pour effet d’ajouter une pastille rouge au niveau de votre ligne de code.

image

Vous pouvez également modifier cette liste de points d’arrêt dans le panneau de débug à gauche de VS Code. Si vous décochez un point d’arrêt, il ne sera temporairement plus pris en compte:

image

Dans notre exemple, il suffit de naviguer sur la page http://127.0.0.1:8000/ et cela appellera le code pour lequel nous avons défini un point d’arrêt. L’exécution de l’application est alors stoppée (la ligne sur laquelle on est arrêté est surlignée en jaune):

image

Note : La ligne surlignée n’est pas encore exécutée. C’est la prochaine qui sera lancée.

Vous pouvez alors vous déplacer dans le code et demander l’exécution des lignes suivantes grâce aux boutons situés dans la barre supérieure, de gauche à droite:

  • Continue (F5): reprend l’exécution du code jusqu’au prochain point d’arrêt ou jusqu’à ce que l’application s’arrête ou soit en standby.
  • Step Over (F10): Exécute la ligne de code courante mais reste dans le scope de code actuel (si c’est une fonction, le débug exécute toute la fonction dans entrer dans le code en pas à pas).
  • Step Into (F11): Exécute la ligne de code courante et s’il s’agit d’une fonction, arrête l’exécution à la première ligne de code dans cette fonction. Cela permet de parcourir en pas à pas le contenu de la fonction également.
  • Step Out (Maj.+F11): Exécute la ligne courante et toutes les lignes de la fonction actuelle jusqu’à en sortir.
  • Stop: Arrête la session de débug et arrête l’application Node.

Comprendre le contexte d’exécution

L’intérêt du débug ne se limite pas à exécuter les lignes de codes les unes après les autres. L’objectif principal est de consulter l’état des variables au fil de l’eau ainsi que la pile d’appel (i.e. l’enchainement des fonctions les unes dans les autres).

Pour visualiser une variable, vous avez plusieurs solutions.

Survoler quelques instants la variable dans le code pour voir apparaître un popup

image

Parcourir l’intégralité des variables présentes via le volet de débug

image

Notez que vous pouvez déplier l’arborescence pour découvrir l’ensemble des variables et leurs propriétés/enfants.

Ajouter une variable à l’onglet watch pour en suivre de prêt l’évolution:

image

L’onglet CALL STACK quand à lui vous permet de connaître l’enchaînement des appels de fonctions qui ont permis d’arriver à la ligne de code à laquelle vous vous trouvez.

image

Dans l’exemple ci-dessus, on remarque que la fonction dans laquelle on est arrêtée a en réalité été appelée par la fonction emitTwo située dans le fichier events.js qui elle-même avait été appelée par emit située dans le même fichier.

Si vous cliquez sur une de ces lignes, un volet s’ouvre sur la droite et vous indique le code exact qui a effectué l’appel :

image

Et pour finir…

Je vous ai donné ici un premier aperçu de ce que vous pouvez réaliser avec VS Code et surtout son débuguer. C’est maintenant à vous de jouer pour dénicher les bugs les plus tenaces dans votre code.

Téléchargez Visual Studio Code gratuitement ici : https://www.microsoft.com/france/visual-studio/code/ et démarrez votre première session de débug ! 🙂

Vous pouvez également aller plus loin dans le débug web avec Vorlon.js. C’est un outil qui permet de reproduire l’expérience des outils F12 qu’on trouve dans tous les navigateurs mais à distance et entre tous les navigateurs. C’est un outil open source disponible sur http://www.vorlonjs.io !

Si vous avez une question à propos de cet article, n’hésitez pas à me contacter via Twitter: http://twitter.com/meulta