5.1 Déboguer du JavaScript sous Google Chrome

Lorsque vous codez à l'aide de JavaScript, vous pouvez utiliser le débogueur JavaScript intégré dans Chrome.

Voici comment y arriver :

• Affichez votre site Web dans Google Chrome.
• Faites un clic droit n'importe où sur la page puis choisissez Inspecter ou appuyez sur ou F12 sous Windows ou ⌘ Cmd+⌥ Option+I sous Mac.
• Cliquez sur l'onglet Sources.

  

• Dans la zone de gauche, retrouvez le fichier qui contient le code JavaScript à déboguer et faites-le afficher au centre.
  Remarquez que selon la façon dont le programme a été écrit, le code JavaScript pourrait être dans un fichier .js ou encore dans un .html ou un .php.

  

  Note : si le fichier JavaScript n'apparaît pas, c'est peut-être dû à un bogue dans le débogueur de Chrome. Rafraîchissez l'écran et il devrait apparaître.

• Faites défiler le contenu du fichier jusqu'au code à déboguer puis placez un point d'arrêt à l'endroit désiré en cliquant à gauche du numéro de ligne.

  

• Rafraîchissez la page Web pour que le code soit exécuté.

  

• Quand l'exécution atteint le point d'arrêt, vous pouvez effectuer différentes manipulations, par exemple :
  • Poursuivre l'exécution une ligne à la fois en cliquant sur l'icône Step over ou en appuyant sur F10.
  • Poursuivre l'exécution sans débogueur en cliquant sur l'icône Resume ou en appuyant sur F8.
  • Vérifier la valeur des variables locales dans la zone de droite.
  • Ajouter des espions en faisant un clic droit sur une variable ou une expression en en choisissant Ajouter le texte sélectionné aux expressions de contrôle (ou Add to watch selon la version de Chrome).
  • Évaluer une expression quelconque en cliquant sur le + à côté de Contrôle (ou Watch Expressions selon la version de Chrome).

Attention : méfiez-vous du cache. Votre navigateur tentera toujours d'utiliser une version du JavaScript qu'il a gardée en cache et ce, même si vous avez bien enregistré vos dernières modifications dans votre code.

Si vous constatez que le code affiché dans le débogueur ne correspond pas à votre dernière version, actualisez l'écran.

Et si le code JavaScript est minifié ?

Déboguer du code minifié, dans lequel il n'y a aucun saut de ligne, peut sembler une chose impossible. Et pourtant...

Dans le débogueur de Chrome, quand vous avez choisi le fichier JavaScript à déboguer, vous pouvez cliquer sur les deux accolades {} au bas de la fenêtre. Elles n'ont pas l'apparence d'un bouton ni d'un lien, mais elles mênent vraiment à une action.

Une fois ce bouton cliqué, les lignes de code seront beaucoup plus lisibles :

• Il y aura un saut de ligne après chaque instruction.
• Il y aura indentation.
• Cependant, les variables auront un nom différent de celui que vous avez codé, constitué d'une seule lettre.
• Même les noms de fonctions pourraient être constitués d'une seule lettre.
• Et il n'y aura aucun commentaire.

On n'obtiendra pas le même résultat qu'avec la version non minifiée mais au moins, on pourra déboguer.

Pour plus d'information

« Debugging JavaScript ». Google Developers. https://developers.google.com/chrome-developer-tools/docs/javascript-debugging

« Explore and Master Chrome DevTools ». Code School. http://discover-devtools.codeschool.com/

«  Keyboard Shortcuts Reference ». Google Developers. https://developers.google.com/web/tools/chrome-devtools/shortcuts

« Getting Started With Javascript Debugger in Chrome ». Mitchell Amihod. http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

« A list of cool Chrome DevTools Tips and Tricks ». Flavio Copes. https://flaviocopes.com/chrome-devtools-tips/?utm_source=hackernewsletter&utm_medium=email&utm_term=fav