Deboguer le Javascript

Christophe Jollivet est venu au Breizhcamp pour expliquer les différentes astuces pour deboguer un programme Javascript. Il avait également donné cette même session à Devoxx France.

Il y a quelques années les possibilités étaient assez limitées et nous n'avions que la méthode alert pour afficher un message dans une fenêtre de dialogue. Si vous voulez utiliser cette même méthode aujourd'hui vous pouvez le faire directement dans un navigateur tel que Chrome

Chrome Dev Tools

Chrome propose de nombreux outils pour aider les développeurs à créer de nouveau sites webs. Les "Developer tools" peuvent être lancés à partir de la barre de menu dans Outils. 

Comme dans l'exemple ci dessus vous pouvez utiliser l'onglet sources pour visualiser vos fichiers Javascript. Dans mon exemple je souhaite ajouter un alert dans la méthode sayHello

1. Faites le directement dans Chrome. 
2. Enregistrez... 
3. Vous voyez un petit warning dans la barre d'onglet à gauche du nom devotre fichier JS. Il vous indique que le fichier est modifié dans Chrome mais non persisté dans votre repository de source... Ce qui est toujours pratique. 
4. Cliquez sur l'élément déclenchant l'action et magie... une fenêtre s'ouvre

Vous êtes maintenant un expert du debogage des années 2000. Aujourd'hui nous pouvons faire mieux et notamment utiliser l'objet console dans votre code

L'objet console

Cet objet permet d'afficher des informations dans la log de votre navigateur

      console.log('my log message');
      console.info('my info message');
      console.warn('my warn message');
      console.error('my error message');
      console.trace('my trace message');
      console.debug('my debug message');

Ce qui donnera dans la console Javascript

A noter que le niveau error et trace permettent d'avoir la pile d'exécution de votre méthode.

Vous pouvez également  faire de l'interpolation dans les chaines de caractères affichées et

      var user {
        name : 'Guillaume'
      };
      console.log('Hello %s' , user.name);
      console.log('Hello %o' , user);

Ce qui donnera

Il existe d'autres point intéressants avec l'objet console. Vous pouvez calculer par exemple le temps d'exécution d'une méthode avec time et timeEnd

      console.time('timer finished');
      setTimeout(function(){
        console.timeEnd('timer finished');
      }, 3000);

Cette commande donnera dans la console

A noter que le message dans les fonctions time et timeEnd doivent être identiques. Au niveau lisibilité dans la console vous pouvez aussi grouper vos messages avec les méthodes group et groupEnd.

      console.group('group1');
      console.group('ssgroup1');
      console.log('Message dans le sous groupe 1');
      console.groupEnd('ssgroup1');
      console.groupEnd('group1');
      console.group('group2');
      console.groupEnd('group2');

Ce qui donnera

Vous pouvez consulter cette documentation pour en savoir plus sur l'objet console.

Angular dans les chromes dev tools

Vous pouvez analyser finement un élément de votre page en faisant un clic droit puis "Inspect Element"

Chrome vous bascule dans l'éditeur de DOM HTML. Vous pouvez afficher l'élément sélectionné via $0 dans la console ($1 remonter à l'élément précédent...). Si j'amais vous faites de l'Angular vous pouvez directement saisir des commandes dans la console comme par exemple  angular.element($0).scope()

Les points d'arrêt

Pour spécifier un point d'arrêt, vous pouvez utiliser le mot clé debugger où vous voulez vous arrếter dans votre code ou utiliser l'explorateur de source des Chromes Dev Tools.

Plusieurs solutions s'offrent à vous

Debogage classique	Cliquez sur le numéro de ligne d'un fichier JavaScript dans l'onglet source En éditant le breakpoint via un clic droit vous pourrer ajouter une condtition d'arrêt
Debogage sur changement dans le DOM	Dans l'onglet Elements repérez celui que vous voulez oberver et positionner vos points d'arrêt
Debogage sur appel asynchrone	Dans les sources l'ensemble des breakpoints sont affichés dans le panneau latéral à droite. Vous pouvez ajouter un point d'arrêt lors d'un appel asynchrone en précisant une partie de l'URL dans un XHR breakpoint
Debogage sur un évènement	Dans ce même panneau latéral vous pouvez ajouter des points d'arrêt qui se déclencheront en fonction de certains évènements

Si vous avez encore des besoins plus spécifiques vous pouvez utiliser les codes Snippets. Si vous voulez des exemples je vous laisse tester les snippets proposées par Paul Irish sur son Github.