JavaScript Débogage

Lorsque vous écrivez du JavaScript, cela peut être pénible s'il n'y a pas d'outils de débogage.

Débogage JavaScript

Sans outils de débogage, il est difficile d'écrire des programmes JavaScript.

Votre code peut contenir des erreurs de syntaxe et des erreurs logiques ; sans outils de débogage, ces erreurs sont difficiles à trouver.

Habituellement, si JavaScript comporte des erreurs, aucun message n'est affiché, donc vous ne pouvez pas localiser la position de l'erreur dans le code.

Note Souvent, des erreurs se produisent pendant que vous écrivez un nouveau code JavaScript.

Outils de débogage JavaScript

La recherche d'erreurs dans le code d'un programme est appelée débogage de code.

Le débogage est difficile, mais heureusement, de nombreux navigateurs disposent d'outils de débogage intégrés.

Les outils de débogage intégrés peuvent être activés ou désactivés, et les messages d'erreur graves seront envoyés à l'utilisateur.

Avec les outils de débogage, nous pouvons définir des points d'arrêt (positions où le code arrête son exécution) et détecter les variables pendant l'exécution du code.

Pour activer les outils de débogage dans un navigateur, appuyez généralement sur la touche F12 et sélectionnez « Console » dans le menu de débogage.

Méthode console.log()

Si le navigateur prend en charge le débogage, vous pouvez utiliser la méthode console.log() pour afficher les valeurs JavaScript dans la fenêtre de débogage :

Exemple

a = 5; b = 6; c = a + b; console.log(c);

Essayez-le vous-même »

Définition de points d'arrêt

Dans la fenêtre de débogage, vous pouvez définir des points d'arrêt dans le code JavaScript.

À chaque point d'arrêt, l'exécution du code JavaScript s'arrête afin que nous puissions inspecter les valeurs des variables JavaScript.

Après l'inspection, vous pouvez reprendre l'exécution du code (par exemple, avec le bouton lecture).

Mot-clé debugger

debuggerLe mot-clé est utilisé pour arrêter l'exécution de JavaScript et appeler la fonction de débogage.

Ce mot-clé a le même effet que la définition d'un point d'arrêt dans les outils de débogage.

Si aucun débogage n'est disponible, l'instruction debugger ne fonctionnera pas.

Lorsque le débogueur est activé, le code arrête l'exécution avant la troisième ligne.

Exemple

var x = 15 * 5; debugger; document.getElementbyId("demo").innerHTML = x;

Essayez-le vous-même »

Outils de débogage dans les principaux navigateurs

Habituellement, pour activer les outils de débogage dans un navigateur, appuyez sur la touche F12 et sélectionnez "Console" dans le menu de débogage.

Les étapes pour chaque navigateur sont les suivantes :

Navigateur Chrome

  • Ouvrez le navigateur.
  • Dans le menu, sélectionnez"Plus d'outils"。
  • Dans"Plus d'outils"puis sélectionnez⟦⟧"Outils de développement""Developer tools"。
  • Enfin, sélectionnez Console.

Ou vous pouvez faire un clic droit et sélectionner"Inspecter", comme indiqué dans la figure ci-dessous :

Navigateur Firefox

  • Ouvrez le navigateur.
  • Faites un clic droit et sélectionnez"Inspecter l'élément"。

Safari

  • Ouvrez le navigateur.
  • Faites un clic droit et sélectionnez Inspecter l'élément.
  • Dans la fenêtre qui s'ouvre en bas, sélectionnez "Console".

Navigateur Internet Explorer.

  • Ouvrez le navigateur.
  • Dans le menu, sélectionnez Outils.
  • Dans Outils, sélectionnez Outils de développement.
  • Enfin, sélectionnez Console.

Opera

  • Ouvrez le navigateur.
  • Cliquez dans le coin supérieur gauche et sélectionnez"Outils de développement", sélectionnez"Inspecteur Web"。

Une façon plus simple est : clic droit et sélectionnez"Inspecter l'élément"

Autres extensions