JavaScript
Le débogage

Points d'arrêt

Les points d'arrêt interrompent votre programme une fois que l'exécution atteint un certain point. Vous pouvez ensuite parcourir le programme ligne par ligne en observant son exécution et en inspectant le contenu de vos variables.

Il y a trois façons de créer des points d'arrêt.

1. À partir du code, en utilisant le debugger; déclaration.
2. À partir du navigateur, utilisez les outils de développement.
3. D'un environnement de développement intégré (IDE).

Déclaration de débogueur

Vous pouvez placer un debugger; déclaration n'importe où dans votre code JavaScript. Une fois que l'interpréteur JS aura atteint cette ligne, il arrêtera l'exécution du script, ce qui vous permettra d'inspecter les variables et de parcourir votre code.

Outils de développement

La deuxième option consiste à ajouter un point d'arrêt directement dans le code à partir des outils de développement du navigateur.

Ouverture des outils de développement

Chrome ou Firefox

1. Appuyez sur F12 pour ouvrir les outils de développement
2. Basculer vers l'onglet Sources (Chrome) ou l'onglet Débogueur (Firefox)
3. Appuyez sur Ctrl + P et tapez le nom de votre fichier JavaScript
4. Appuyez sur Entrée pour l'ouvrir.

Internet Explorer ou Edge

1. Appuyez sur F12 pour ouvrir les outils de développement
2. Passez à l'onglet Débogueur.
3. Utilisez l'icône du dossier située dans le coin supérieur gauche de la fenêtre pour ouvrir un volet de sélection de fichier. Vous pouvez y trouver votre fichier JavaScript.

Safari

1. Appuyez sur Commande + Option + C pour ouvrir les outils de développement.
2. Passer à l'onglet Ressources
3. Ouvrez le dossier "Scripts" dans le panneau de gauche
4. Sélectionnez votre fichier JavaScript.

Ajout d'un point d'arrêt à partir des outils de développement

Une fois que votre fichier JavaScript est ouvert dans Developer Tools, vous pouvez cliquer sur un numéro de ligne pour placer un point d'arrêt. La prochaine fois que votre programme s'exécutera, il s'arrêtera là.

Remarque sur les sources minifiées: Si votre source est réduite, vous pouvez l’imprimer (convertir en format lisible). Dans Chrome, cela se fait en cliquant sur le bouton {} dans le coin inférieur droit du visualiseur de code source.

IDE

Code Visual Studio (VSC)

VSC a un support intégré pour le débogage de JavaScript.

1. Cliquez sur le bouton Déboguer à gauche ou Ctrl + Maj + D
2. Si ce n'est déjà fait, créez un fichier de configuration de lancement ( launch.json ) en appuyant sur l'icône représentant un engrenage.
3. Exécutez le code de VSC en appuyant sur le bouton de lecture vert ou appuyez sur F5 .

Ajouter un point d'arrêt dans VSC

Cliquez à côté du numéro de ligne dans votre fichier source JavaScript pour ajouter un point d'arrêt (il sera marqué en rouge). Pour supprimer le point d'arrêt, cliquez à nouveau sur le cercle rouge.

Astuce: Vous pouvez également utiliser les points d'arrêt conditionnels dans les outils de développement du navigateur. Celles-ci aident à éviter les interruptions inutiles dans l'exécution. Exemple de scénario: vous souhaitez examiner une variable dans une boucle exactement à la ^5ème itération.

Passer à travers le code

Une fois que vous avez interrompu l'exécution sur un point d'arrêt, vous pouvez suivre l'exécution ligne par ligne pour observer ce qui se passe. Ouvrez les outils de développement de votre navigateur et recherchez les icônes de contrôle d'exécution. (Cet exemple utilise les icônes de Google Chrome, mais elles seront similaires dans d’autres navigateurs.)

Reprendre: Annuler l'exécution. Shorcut: F8 (Chrome, Firefox)

Step Over: Exécutez la ligne de code suivante. Si cette ligne contient un appel de fonction, exécutez la fonction entière et passez à la ligne suivante, plutôt que de passer à la définition de la fonction. Raccourci: F10 (Chrome, Firefox, IE / Edge), F6 (Safari)

Étape dans: Exécutez la ligne de code suivante. Si cette ligne contient un appel de fonction, accédez directement à la fonction et mettez-la en pause. Raccourci: F11 (Chrome, Firefox, IE / Edge), F7 (Safari)

Sortir: Exécuter le reste de la fonction en cours, revenir à l’appel de la fonction et faire une pause à la prochaine instruction. Raccourci: Maj + F11 (Chrome, Firefox, IE / Edge), F8 (Safari)

Utilisez-les conjointement avec la pile d'appels , qui vous indiquera la fonction dans laquelle vous vous trouvez actuellement, la fonction appelée cette fonction, etc.

Voir le guide de Google sur "Comment passer le code" pour plus de détails et de conseils.

Liens vers la documentation de la touche de raccourci du navigateur:

• Chrome
• Firefox
• C'EST À DIRE
• Bord
• Safari

Interruption automatique de l'exécution

Dans Google Chrome, vous pouvez suspendre l'exécution sans avoir à placer de points d'arrêt.

Pause à l'exception: lorsque ce bouton est activé, si votre programme rencontre une exception non gérée, le programme se mettra en pause comme s'il avait atteint un point d'arrêt. Le bouton se trouve près des contrôles d'exécution et est utile pour localiser les erreurs.

Vous pouvez également suspendre l'exécution lorsqu'un tag HTML (nœud DOM) est modifié ou lorsque ses attributs sont modifiés. Pour ce faire, cliquez avec le bouton droit sur le nœud DOM dans l'onglet Éléments et sélectionnez "Casser sur ...".

Variables d'interpréteur interactif

Notez que ceux-ci ne fonctionnent que dans les outils de développement de certains navigateurs.

$_ vous donne la valeur de l'expression évaluée en dernier.

"foo"             // "foo"
$_                // "foo"

$0 fait référence à l'élément DOM actuellement sélectionné dans l'inspecteur. Donc, si <div id="foo"> est mis en évidence:

$0                      // <div id="foo">
$0.getAttribute('id')   // "foo"

$1 fait référence à l'élément précédemment sélectionné, $2 à celui sélectionné avant, et ainsi de suite pour $3 $4 et $4 .

Pour obtenir une collection d'éléments correspondant à un sélecteur CSS, utilisez $$(selector) . Ceci est essentiellement un raccourci pour document.querySelectorAll .

var images = $$('img');  // Returns an array or a nodelist of all matching elements

¹ _{alias à document.getElementById ou document.querySelector}

Inspecteur d'éléments

En cliquant sur le Sélectionnez un élément dans la page pour l'inspecter dans le coin supérieur gauche de l'onglet Eléments dans l'onglet Chrome ou Inspecteur de Firefox, disponible à partir des outils de développement, puis cliquez sur un élément de la page pour mettre l'élément en surbrillance et lui attribuer $0 variable .

L'inspecteur d'éléments peut être utilisé de diverses manières, par exemple:

1. Vous pouvez vérifier si votre JS manipule DOM comme vous le souhaitez,
2. Vous pouvez plus facilement déboguer votre CSS lorsque vous voyez quelles règles affectent l'élément
   (Onglet Styles dans Chrome)
3. Vous pouvez jouer avec CSS et HTML sans recharger la page.

En outre, Chrome se souvient des 5 dernières sélections dans l'onglet Éléments. $0 est la sélection actuelle, tandis que $1 est la sélection précédente. Vous pouvez aller jusqu'à $4 . De cette façon, vous pouvez facilement déboguer plusieurs noeuds sans constamment les sélectionner.

Vous pouvez en lire plus sur Google Developers .

Utiliser des seters et des getters pour trouver ce qui a changé une propriété

Disons que vous avez un objet comme celui-ci:

var myObject = {
    name: 'Peter'
}

Plus tard dans votre code, vous essayez d'accéder à myObject.name et vous obtenez George au lieu de Peter . Vous commencez à vous demander qui l'a changé et où exactement il a été changé. Il existe un moyen de placer un debugger (ou autre chose) sur chaque ensemble (chaque fois que quelqu'un fait myObject.name = 'something' ):

var myObject = {
    _name: 'Peter',
    set name(name){debugger;this._name=name},
    get name(){return this._name}
}

Notez que nous avons renommé le name _name et que nous allons définir un setter et un getter pour name .

set name est le setter. C'est un bon point où vous pouvez placer le debugger , console.trace() , ou tout ce dont vous avez besoin pour le débogage. Le setter définira la valeur de name dans _name . Le getter (la partie get name ) lira la valeur à partir de là. Nous avons maintenant un objet entièrement fonctionnel avec une fonctionnalité de débogage.

La plupart du temps, l'objet modifié n'est pas sous notre contrôle. Heureusement, nous pouvons définir des paramètres et des objets sur les objets existants pour les déboguer.

// First, save the name to _name, because we are going to use name for setter/getter
otherObject._name = otherObject.name;

// Create setter and getter
Object.defineProperty(otherObject, "name", {
    set: function(name) {debugger;this._name = name},
    get: function() {return this._name}
});

Découvrez les créateurs et les getters de MDN pour plus d'informations.

Support du navigateur pour les installateurs / getters:

Casser quand une fonction est appelée

Pour les fonctions nommées (non anonymes), vous pouvez interrompre l'exécution de la fonction.

debug(functionName);

Lors de la prochaine exécution de la functionName functionName, le débogueur s'arrêtera sur sa première ligne.

En utilisant la console

Dans de nombreux environnements, vous avez accès à un objet console global contenant certaines méthodes de base pour communiquer avec des périphériques de sortie standard. Le plus souvent, ce sera la console JavaScript du navigateur (voir Chrome , Firefox , Safari et Edge pour plus d'informations).

// At its simplest, you can 'log' a string
console.log("Hello, World!");

// You can also log any number of comma-separated values
console.log("Hello", "World!");

// You can also use string substitution
console.log("%s %s", "Hello", "World!");

// You can also log any variable that exist in the same scope
var arr = [1, 2, 3];
console.log(arr.length, this);

Vous pouvez utiliser différentes méthodes de console pour mettre en évidence votre sortie de différentes manières. D'autres méthodes sont également utiles pour un débogage plus avancé.

Pour plus de documentation, d'informations sur la compatibilité et des instructions sur la façon d'ouvrir la console de votre navigateur, consultez la rubrique Console .

Remarque: si vous devez prendre en charge IE9, supprimez console.log ou console.log ses appels comme suit, car la console n'est pas définie tant que les outils de développement ne sont pas ouverts:

if (console) { //IE9 workaround
    console.log("test");
}