webdevpro.net

Débogeur Javascript pour FireFox et Chrome

Débogeur Javascript pour FireFox et Chrome | webdevpro.net

Débogeur Javascript

Le débogeur Javascript est un menu disponible dans tous les navigateurs modernes.
Il permet de chercher des bugs, erreurs de programmation, présents dans les scripts JS.
Le débugger, aussi appelé console de debug Javascript, permet d’arrêter l’exécution d’un script à une instruction donnée et d’observer en détail l’état de la mémoire :

  • est ce que les variables / fonctions / objet / existent ?
  • quel est le contenu des variable ainsi que le type du contenu ?

La console de debug permet, en plus, d’exécuter pas à pas (instruction par instruction) le code source et de voir en détail ce qui n’est pas conforme à la logique du programme : variable undefined alors qu’il faut une valeur, number attendu mais array donné etc …

Debugging et log

Il ne faut pas confondre la console de débuggage avec la console de log :

  • ce sont tous les deux des outils de debuggage
  • mais ils deux stratégies différentes pour répondre au même besoin :
    1. console de débuggage : mettre en pause le flux d’exécution du script et le parcourir pas à pas
    2. console de log : avoir un détail précis sur une variable particulière lorsque le code est exécutée à 100%
  • ces deux outils sont complémentaires de la palette des outils de développement web

Les points d’arrêts

Les points d’arrêts, en anglais Breakpoints, est la fonction centrale du débuggeur javascript.
Il s’agit d’un marqueur ajouté par le développeur qui va permettre de :

  • mettre en pause le flux d’exécution à une instruction
  • observer l’état de la mémoire à cet instant d’exécution

Grâce à ce marqueur, le développeur va pouvoir se mettre dans la peau du navigateur est suivre l’ordre d’exécution du script et voir le comportement des variables / fonctions.

Console debug js FireFox

Pour accéder à la console trois possibilités :

Apparence de la console de debug js de FireFox
debugger javascript firefox

  1. via le raccourci clavier : Ctrl + Maj + S
  2. via la barre de menu : Outils > Développement web … > Débogueur
  3. clique droit : Examiner l’élément > Onglet débogeur

Console debug js Chrome

Pour accéder à la console trois possibilités :

Apparence de la console de debug js de Chrome
debugger javascript chrome

  1. via le raccourci clavier : Ctrl + Maj + I
  2. via la barre de menu : 3 points > Plus d’outils … > Outils de développement > Onglet Source
  3. clique droit : Inspecter > Onglet Source

Exemple de petit script js à débugger

La suite de l’article utilise le script suivant. A insérer dans un fichier index.html

mini script js pour tester le débogeur
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Manipuler le debugger</title>
</head>
<body>
	<h1></h1>
	<script>
		function $(elementHTML){
			return document.querySelector(elementHTML);
		}
		function changeSize(w){
			return  (w*10) + "px";
		}
		function log(texte){
			console.log(texte)
		}
		function init(){
			debugger;
			var name = "Main Title";
			var h1 = $('h1');
			log(name);
			name = "Introduction";
			log(name);
			h1.innerHTML = name;
			h1.style['font-size'] = changeSize(10);
		}
		init();
	</script>
</body>
</html>

La Console debug js FireFox en détail pour les points d’arrêt

Nous allons nous concentrer sur la console de débug FireFox. Sachez que, pour Chrome, le mode de fonctionnement est très proche lorsque l’on utilise des breakpoints :

Panneaux du débogeur
debugger javascript firefox

  1. Panneau de gauche : arborescence des fichiers sources locals et/ou distants + liste des fonctions js disponibles (uniquement pour Firefox)
  2. Panneau central : le code source à debugger avec la ligne surlignée
  3. Panneau de droite avec plusieurs sections : contrôle du debugging et 4 panneaux d’information

Détail sur le volet d’information

Panneau d’information

  1. Boutons de contrôle du menu de débug
  2. Expressions espionnes (Watch sur Chrome) : nom d’une ou plusieurs variables sur lesquelles il faut suivre le contenu
  3. points d’arrêt (Breakpoints sur Chrome) : liste de tous les points d’arrêt mis en place
  4. Pile d’exécution (Call Stack) : contexte d’exécution que je résume comme étant l’endroit où l’instruction est exécutée : dans un contexte global ou dans une contexte local (dans une fonction). Ce concept est important en javascript à cause des fonctions de type closure
  5. Portée (Scope) : liste les variables globales / locales (dans des fonctions) et détermine si elles existent et quelles sont leur valeur

Ajouter un ou plusieurs point d’arrêt

Il existe deux méthodes pour ajouter un point d’arrêt :

  • ajouter le mot clé debugger; dans le code source javascript
  • clique droit dans la numérotation du volet central > Ajouter un point d’arrêt

Le point d’arrêt s’ajoute dans le volet de droite dans la section point d’arrêt

Exécuter le script Pas à Pas

Après avoir ajouté un point d’arrêt, il faut recharger la page via un f5. Le navigateur va alors :

  1. afficher le script dans le panneau central. (Attention pour Firefox, il arrive qu’il faille cliquer sur le point d’arrêt et/ou arrêter le refresh de la page)
  2. exécuter le script jusqu’au point d’arrêt (ligne surlignée)
  3. remplir le panneau de droite

Pour faire défiler le code pas à pas, il faut utiliser les boutons situés en haut du panneau d’information :

Parcourir pas à pas son script js
pas à-pas debugger javascript firefox

  • Passer la fonction (step over) : passer à l’instruction suivante comportant ou non une fonction
  • Entrer dans la fonction (step into) : pour les instructions utilisant des fonctions, rentrer à l’intérieur de la fonction appelée
  • Sortir de la fonction (step out) : sortir de la fonction et retour vers l’instruction qui l’a appelée
  • reprendre (resume) : reprendre l’exécution jusqu’au prochain point d’arrêt, si aucun point d’arrêt ultérieur, finalise l’exécution

A chaque clique sur un de ces boutons, le panneau d’information se met à jour permettant de voir de détail le contenu des variables, l’existance des fonctionset la liste des propriétés et méthodes des objets

Supprimer les points d’arrêt

Dans le panneau de droite, il suffit de cliqur sur la croix du point d’arrêt pour le supprimer définitivement

Conclusion

Le débogeur js est un outil très intéressant pour apprendre à programmer mais aussi pouvoir comprendre un script comportant de nombreuses lignes de codes.
Plus le code sera complexe (et non réalisé par vos soins), et plus ce menu va devenir indispensable car permet de décortiquer le code à un moment donné : contenu des variables grâce à la section portée des variables (scope), connaitre le contexte d’exécution, parcourir le contenu des fonctions …

Autres fonctionnalités du debogeur non vues dans l’article sur le web