• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Déboguer le code jQuery

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Lorsqu'une page Web ne contient que quelques instructions jQuery, la phase de débogage est généralement réduite à sa plus simple expression : vous affichez la page et vous constatez que tout fonctionne. Si vous écrivez des programmes plus volumineux, contenant plusieurs centaines d'instructions jQuery, il en va parfois tout autrement. Ce chapitre va vous montrer plusieurs techniques et outils pour débusquer les bogues qui pourraient s'être glissés dans votre code.

Déboguer avec la fonction alert()

À tout moment, vous pouvez utiliser la fonction JavaScript alert() pour afficher une boîte de message dans laquelle apparaîtra la valeur d'une variable JavaScript. C'est la technique la plus simple pour tester ponctuellement la valeur d'une variable. Par exemple, l'instruction suivante permet de connaître la valeur des variables x et y :

alert('x = ' + x + ', y = ' + y);

… ce qui pourrait donner la figure suivante.

La valeur des variables x et y est affichée dans une boîte de message
La valeur des variables x et y est affichée dans une boîte de message

Si votre code n'atteint jamais une instruction donnée, vous pouvez utiliser la fonction alert() pour savoir quelle est la dernière instruction exécutée :

alert('passé ici : 01');
// Une ou plusieurs instructions
alert('passé ici : 02');
// Une ou plusieurs instructions
alert('passé ici : 03');
// Une ou plusieurs instructions
etc.

En déplaçant ces instructions dans votre code, vous pouvez assez rapidement savoir quelle instruction est fautive.

Try et catch

Lorsque vous mettez au point un code particulièrement « sensible », c'est-à-dire que vous soupçonnez d'être à l'origine de bogues, vous pouvez le placer dans une structure try … catch :

try
{
  // Instructions sensibles
}
catch(err)
{
  // Gestion des erreurs
}

Un petit exemple va vous montrer comment utiliser ces instructions. Dans le code suivant, la fonction alort() ne fait pas partie du langage JavaScript et n'est pas une méthode jQuery. Étant donné que l'instruction mise en cause a été placée sous la surveillance d'un try, les instructions qui suivent le mot catch vont être exécutées.

var message='';
try
{
  alort('un message');
}
catch(err)
{
  message='Une erreur s\'est produite.\n\n';
  message+='Description : ' + err.message + '\n\n';
  message+='Cliquez sur OK pour poursuivre.';
  alert(message)
}

Dans cet exemple, comme le montre la figure suivante, une boîte de message affiche la propriété err.message, indiquant ainsi quelle est la cause de l'erreur.

Le mot-clé « alort » n'existe pas
Le mot-clé « alort » n'existe pas

Capturer toutes les erreurs

En étendant cette technique, il est possible d'afficher une boîte de message pour chacune des erreurs qui pourraient se produire dans le code. Voici les instructions à utiliser :

function gestionErreurs(err)
{
  alert('Erreur : \n' + err);
  return true;
}
window.onerror = gestionErreurs;

Lorsqu'une erreur se produit dans le code JavaScript/jQuery, la fonction gestionErreurs() est exécutée. Une boîte de message décrivant l'erreur est alors affichée.

Déboguer avec Firebug

Firebug est un outil incontournable que tous les développeurs jQuery devraient avoir sous la main. Comme son nom le laisse supposer, il a été développé pour le navigateur Firefox. Voici quelques-unes de ses possibilités :

  • Inspection et édition du code HTML et CSS ;

  • Surveillance de l'activité du réseau, afin de déterminer quel bloc de code pénalise le temps de chargement d'une page ;

  • Débogage du code JavaScript/jQuery.

C'est évidemment cette troisième possibilité qui vous intéressera avant tout. Lisez vite la suite et vous saurez comment procéder.

Télécharger et installer Firebug

Enfoncez puis relâchez la touche Alt du clavier pour afficher le système de menus de Firefox s'il n'est pas déjà affiché. Cliquez sur Outils, pointez Développeur Web et cliquez sur Obtenir d'autres outils. La page des modules pour Firefox est affichée, comme à la figure suivante.

Le module Firebug apparaît en première position
Le module Firebug apparaît en première position

En face de Firebug, cliquez sur Ajouter à Firefox. Quelques instants plus tard, une boîte de dialogue demande de confirmer que vous voulez bien installer Firebug. Cliquez sur Installer maintenant. Une fois le module Firebug installé, une nouvelle icône apparaît dans l'angle supérieur droit de la fenêtre de Firefox, comme à la figure suivante.

Cette icône (et le menu associé) donne accès à Firebug et à ses commandes principales
Cette icône (et le menu associé) donne accès à Firebug et à ses commandes principales

Utiliser la console

La fonction JavaScript alert() est certes très pratique, mais elle a l'inconvénient d'afficher une boîte de message que l'utilisateur doit refermer pour poursuivre l'exécution du code. En utilisant la console de Firefox, accessible via l'onglet Console de Firebug, vous allez pouvoir afficher des données comme avec la fonction alert(), mais sans interrompre l'exécution du code. Pour cela, vous utiliserez la fonction JavaScript log().

Dans l'exemple suivant, la fonction log() est utilisée pour connaître les différentes valeurs calculées dans la variable y :

for (x = (Math.PI)/2; x < (4*Math.PI); x = x+.2)
{
  y = (Math.abs(Math.sin(x)))/x;
  window.console.log('y = ' + y);
  …
}

En sélectionnant l'onglet Console dans le module Firebug, on obtient les informations recherchées, comme le montre la figure suivante.

Les différentes valeurs ont été affichées dans la console
Les différentes valeurs ont été affichées dans la console

Définir un point d'arrêt

Ouvrez la page Web que vous voulez déboguer dans Firefox, puis cliquez sur l'icône de Firebug. Un nouveau volet est affiché dans la partie inférieure de la fenêtre. C'est dans ce volet que vous déboguerez votre code.

Sélectionnez l'onglet Script. Si un message vous indique que le panneau Script est désactivé, cliquez sur la flèche à droite de l'icône Firebug et sélectionnez Activer tous les panneaux dans le menu. Le code JavaScript apparaît dans la partie gauche du volet de Firebug. Cliquez sur un numéro de ligne pour définir un point d'arrêt. L'exécution se poursuit jusqu'à cette ligne, puis le programme se met en pause. Plusieurs informations apparaissent dans la partie droite du volet de Firebug. Différentes informations s'affichent, à vous maintenant de voir si tout est correct.

Valeur des variables et propriétés non listées

Lorsque vous avez atteint un point d'arrêt, vous pouvez pointer une variable ou une propriété dans le code pour connaître sa valeur.
Supposons que vous ayez défini un point d'arrêt sur l'instruction qui suit la méthode keydown(), comme dans la figure suivante. Pour savoir quel est le code ASCII de la touche enfoncée par l'utilisateur, il suffit de pointer la propriété e.which.

Pour connaître la valeur d'une variable ou d'une propriété, pointez-la dans le code
Pour connaître la valeur d'une variable ou d'une propriété, pointez-la dans le code

Point d'arrêt conditionnel

Lorsqu'un point d'arrêt est placé dans une boucle, l'exécution du programme est suspendue à chaque itération de la boucle. Ce comportement est parfois souhaitable, et parfois non. Par exemple, si vous voulez suspendre l'exécution lorsqu'une condition particulière se produit, le plus simple consiste à définir un point d'arrêt conditionnel. Pour cela, cliquez du bouton droit sur le numéro de ligne où l'exécution doit être suspendue et entrez la condition suspensive.

À la figure suivante, l'exécution sera suspendue si la variable posX a une valeur inférieure à 100.

Définition d'un point d'arrêt conditionnel
Définition d'un point d'arrêt conditionnel

Quelques raccourcis clavier à connaître

Pour bien utiliser le débogage de code JavaScript/jQuery dans Firebug, regardez le tableau suivant qui indique quelques raccourcis clavier.

Raccourci

Fonction

F8

Continuer

Maj + F8

Exécuter à nouveau jusqu'au point d'arrêt

F10

Pas à pas

F11

Pas à pas approfondi

Ctrl + L

Aller à la ligne spécifiée

Pour avoir un aperçu global de tous les raccourcis clavier utilisables dans Firebug, consultez la page qui y est consacrée.

Ce cours est maintenant terminé. J'espère qu'il vous a plu. Désormais, c'est à vous de faire le reste en développant vos projets. Si vous rencontrez un problème, n'hésitez pas à aller sur le forum JavaScript du Site du Zéro pour poser vos questions.

Exemple de certificat de réussite
Exemple de certificat de réussite