Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe

Javascript: les outils de débogage

Poster un commentaire

Comme pour tous les langages on est amené à faire du débogage en JavaScript.

Certes l’outillage est (pour l’instant) moins sophistiqué que pour d’autres plateforme de développement, mais cela ne signifie pas que l’on est sans moyen.

Et surtout que placer des alert() soit la seule solution!!!!

A notre menu:

  • Placer des alert()
  • Les méthodes modernes
  • La zone de saisie
  • La console: les bases
  • Je logue, tu logues, vous allez loguer…
  • Les assertions
  • formatage des messages
  • Les regroupements
  • Monitorer les événements

Placer des alert

Ok, ok, nous faisons tous ça, moi le premier. C’est juste abominable et dangereux.

En plus ça marche pas toujours très bien car JavaScript est un langage très délicat!

Il existe bien mieux depuis longtemps, c’est simplement que la majorité des développeurs n’en ont jamais entendu parler.

Les méthodes modernes

Les méthodes en question ne sont pourtant pas loin, on les trouve directement dans nos navigateur qui proposent presque tous une barre d’outils. Et cette barre est équipée d’un onglet CONSOLE et d’un onglet DEBOGAGE.

Lancez plusieurs navigateurs et vérifiez le.

Sous IE:

05-03-2014 00-22-21

Sous Chrome:

05-03-2014 00-25-44

Vous disposez même d’un débogeur intégré avec la possibilité de placer des points d’arrêt:

09-03-2014 23-33-40

Et pour Chrome:

10-03-2014 22-51-03

Figurez vous que l’on vient de faire le plus dur.

La bonne nouvelle est que ces onglets fonctionnent de façon presque identique chez tout le monde, tout au plus l’affichage est légèrement différent, mais rien de méchant.

Alors allons y voir de plus près.

La zone de saisie

Comme son nom l’indique, vous pouvez y saisir du code JavaScript, par exemple alert(‘aaa’), mais également appeler une méthode déclarée dans votre page:

<!doctype html>
<html>
<script>
var compteur=456;
function Display () {
	alert('salut');
}
</script>
<body>
Ma page de test
</body>
</html>

Vérifiez que l’on peut effectivement déclencher Display() depuis la zone de saisie de la console et de la même façon interroger toutes les variables.

La zone de saisie est un véritable interpréteur JavaScript. Dès que vous commencez à saisir vous disposez immédiatement de l’auto complétion:

10-03-2014 22-56-40

Pour suivre la variable compteur, on tape juste son nom dans la console:

10-03-2014 22-57-57

La console: les bases

Si un point d’arrêt a été posé dans la méthode il sera actif et vous pourrez interroger le contexte d’exécution de votre script:

09-03-2014 23-38-07

Vous pouvez transformer une variable (ici compteur) en espion. C’est exactement identique à la fenêtre Watch de Visual Studio, vous pouvez même éditer le paramètre et changer sa valeur.

Quel que soit le navigateur (ici IE et Chrome), vous pouvez demander l’affichage du panneau de contrôle d’un peu partout. Typiquement le script de votre page:

10-03-2014 00-06-23

Je logue, tu logues, vous allez loguer…

On entre dans le cœur du sujet avec les logs.

Javascript expose la propriété console qui est dotée de tout un tas de choses sympas:


<!doctype html>
<html>
<script>
var compteur=456;
function Display () {
	console.log('Dans Display');
	alert('salut');
}
</script>
<body>
Ma page de test
</body>
</html>

Lancez depuis la console:

10-03-2014 00-22-11

Les informations de log seront automatiquement enregistrées sur votre console au cours de l’exécution normal de la page. Il n’est bien sûr pas indispensable de lancer quoi que ce soit depuis la console.

Vous disposez de plusieurs fonctions complémentaires:

  • console.info()
  • console.warn()
  • console.error()

L’affichage sera différent:

10-03-2014 00-33-08

Cela permet de mettre plus en relief certains messages.

Certains navigateurs comme Chrome ajoutent également des informations de débogage:

10-03-2014 00-53-08

Si on clique sur la ligne ayant provoqué le log d’erreur:

10-03-2014 00-55-33

Important:
Les navigateurs ont tous leurs particularités et certains ajoutent à console des commandes spécifiques.
Par exemple si votre code contient quelque chose comme:

var traductions = [
{ français: "Un", anglais: "One" },
{ français: "Deux", anglais: "Two" },
{ français: "Trois", anglais: "Three" }
];

Saisir dans Chrome console.table(traductions) affiche:

10-03-2014 00-45-51

C’est plus agréable.

Pour avoir un bon aperçu des possibilités de la console, entrez la commande:

console.dir(console)

Et allez voir dans le prototype.

Les assertions

Une assertion est une méthode qui teste une expression booléenne et déclenche une erreur lorsqu’elle est fausse:

10-03-2014 21-53-08

Tout est résumé ci-dessus.

Il s’agit d’un moyen intéressant de lever une erreur lorsqu’une condition particulière se produit.

formatage des messages

La console accepte un certain nombre d’instructions de formatage. Par exemple on pourrait écrire:

console.log("Ma %s mesure %f mètres, c'est grand!","girafe",4.03);

Il s’affiche:

Ma girafe mesure 4.03 mètres, c’est grand!

Les instructions de formatage les plus courantes sont:

%s Chaîne
%f float
%d Entier
%i Entier
%o élément du DOM
%O Objet JavaScript

Vous vous interrogez peut être sur les deux derniers…

Essayez ceci dans la console:

console.log(« %o », document.body);

L’élément du DOM <body> s’affiche dans la console:

10-03-2014 22-14-39

On peut obtenir des informations non pas sur l’élément du DO, mais l’objet JavaScript body en cours:

console.log(« %O », document.body);

10-03-2014 22-17-20

En réalité ces deux options sont peu utiles, on peut les remplacer respectivement par:

console.log(body);

console.dir(body);

D’autres commandes sont possibles, il est par exemple possible d’utiliser le sélecteur $(« id ») comme raccourcis pour document.getElementById() ou console.dir(objet) qui remonte la liste des propriétés d’un objet.

10-03-2014 22-28-41

Le mieux est de consulter la documentation pour avoir une vision exhaustive, nous avons vus l’essentiel je pense.

Les regroupements

Les regroupements sont pris en charge par les méthodes group et groupEnd de console. Le plus simple est de construire un exemple:

On pourrait implémenter un algorithme en 3 étapes de la façon suivante:


<!doctype html>

<html>

<script>

function Calcul () {

// première étape

// deuxième étape

// troisième étape

}

</script>

<body></body>

</html>

Les regroupement vont nous aider à organiser nos logs. Par exemple:


<!doctype html>

<html>

<script>

function Calcul () {

console.group("Etapes")

console.group("Etape 1")

// première étape

console.log("des trucs importants");

console.groupEnd();

console.group("Etape 2")

// deuxième étape

console.log("des trucs sans intérêt");

console.groupEnd();

console.group("Etape 3")

// troisième étape

console.log("on est à la bourre, c'est tip top important");

console.groupEnd();

console.groupEnd();

}

</script>

<body></body>

</html>

Lorsque la méthode Calcul s’exécute, la console affiche:

10-03-2014 22-39-33

C’est cool non?

Monitorer les événements

Monitorer les événements est une opération notoirement difficile. La console simplifie une fois de plus les choses.

Prenons l’exemple suivant:


<!doctype html>
<html>
<body>
<p>Ma page de test</p>
</body>
</html>

Si on saisie cette commande dans la console:

monitorEvents($(« p »),’mouse’)

A priori rien de spécial ne se passe:

10-03-2014 23-15-20Mais si vous déplacez la souris sur le texte, on voit apparaître les événements qui concernent la souris:

10-03-2014 23-16-28

En cliquant sur chaque événement de la liste, on peut y trouver des informations détaillées.

Vous trouverez une documentation plus complète ici:

https://developers.google.com/chrome-developer-tools/docs/commandline-api

Vous noterez au passage l’existence de unmonitorEvents et getEventListeners qui retourne la liste des événement mappé à un objet:

10-03-2014 23-23-39

Voilà, je pense que nous allons en rester là sur ce petit tour, l’essentiel est dit.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s