Déboguer du JavaScript sous Google Chrome

Lorsque vous codez à l'aide de JavaScript, vous pouvez voir en détail les lignes de code qui sont exécutées grâce au débogueur JavaScript intégré dans Chrome.

Cet article vous montrera les possibilités de cet outil.

▼Publicité

  • Tout d'abord, affichez votre site Web dans Google Chrome.
  • Vous devez maintenant afficher les outils de développement de Chrome. Faites un clic droit n'importe où sur la page puis choisissez « Inspecter l'élément » ou appuyez sur F12 sous Windows ou Cmd+Alt+I sous Mac.
  • Cliquez sur l'onglet Sources.

    Débogueur JavaScript

  • Dans la zone de gauche, retrouvez le fichier contenant le code JavaScript à déboguer et faites-le afficher au centre. Il peut s'agir d'un fichier .html, .php, .js, peu importe. L'important, est de retrouver le fichier qui contient le code JavaScript à déboguer.

    Débogueur JavaScript

  • 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 :
    • Poursuivre l'exécution une ligne à la fois en cliquant sur l'icône Step over Step over ou en appuyant sur F10.
    • Poursuivre l'exécution sans débogueur en cliquant sur l'icône Resume 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 « Add to watch ».
    • Évaluer une expression quelconque en cliquant sur le + à côté de « Watch Expressions »

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, trois options s'offrent à vous :

  • Actualiser l'écran à l'aide de F5 ou Ctrl+R

    ou

  • Effectuer une actualisation forcée à l'aide de Ctrl+F5 ou Ctrl+Maj+R (le cache sera rafraîchi même si la date de modification du fichier n'est pas plus récente que la version en cache)

    ou

  • Lorsque le débogueur de Chrome est affiché, il est possible de faire un clic droit sur l'icône de rafraîchissement (situé à gauche de la barre d'URL). Une option supplémentaire y est présentée : « Vider le cache et effectuer une actualisation forcée ». Ceci sera utile, notamment, si vous utilisez des outils comme Gulp pour générer un seul fichier .js composé de la concaténation de tous vos petits fichiers .js. Mais notez bien : le clic droit sur l'icône de rafraîchissement n'est disponible que lorsque les outils de développement sont affichés (F12).

    Modes d'actualisation sous Chrome

Pour plus d'information

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

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

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories