Débogage JavaScript

dans un programme ou un scriptErreurest appeléBug.

Débogage (Debugging)Est le processus de test, de détection et de réduction des erreurs (bugs) dans les programmes informatiques.

Débogueur JavaScript

Tous les navigateurs populaires ont un débogueur JavaScript intégré.

Vous pouvez ouvrir et fermer le débogueur intégré pour signaler les erreurs aux utilisateurs.

Avec le débogueur, vous pouvez arrêter le code à certains points d'arrêt (endroits où le code peut s'arrêter).

Une fois l'exécution arrêtée, vous pouvez vérifier l'état du script et ses variables pour déterminer s'il y a des problèmes.

Vous pouvez également observer l'évolution des valeurs des variables.

Méthode console.log()

Si votre navigateur prend en charge le débogage, vous pouvez l'utiliser pourconsole.log();Affichez les valeurs JavaScript dans la fenêtre du débogueur :

let　x　=　50;
let　y　=　20;
let　z　=　x　+　y;
console.log(z);

Pour accéder à la console du navigateur Web, appuyez d'abord surF12Appuyez sur les touches du clavier, puis cliquez sur l'onglet "Console".

Mot-clé debugger (débogueur)

Toute fonctionnalité de débogage disponible via le mot-clé debugger, comme la pose d'un point d'arrêt.

Si aucune fonction de débogage n'est disponible, cette phrase est invalide.

Les exemples suivants montrent le code où la phrase debugger est insérée pour appeler le débogueur :

var a =　50　+　20;
debugger;
document.getElementById("output").innerHTML = a;

Lorsque vous appellez le débogueur, l'exécution de la phrase debugger sera suspendue. C'est comme un point d'arrêt dans le fichier source du script.

Outils de débogage des principaux navigateurs

Généralement, vous utilisez l'activateur de navigateurF12Dans le débogage, puis choisissez "Console" dans le menu débogueur.

Sinon, suivez les étapes suivantes :

Chrome

• Ouvrez le navigateur

• Dans le menu, choisissez "Plus d'outils"

• Dans les outils, choisissez "Outils de développeurs"

• Enfin, choisissez la console

FireFox

• Ouvrez le navigateur

• Dans le menu, choisissez "Développeurs Web"

• Enfin, choisissez "Console Web"

Edge

• Ouvrez le navigateur

• Dans le menu, choisissez "Outils de développeurs"

• Enfin, choisissez "Console"

Opera

• Ouvrez le navigateur

• Dans le menu, choisissez "Développeurs"

• Dans "Développeurs", choisissez "Outils de développeurs"
  

• Enfin, choisissez "Console"

Safari

• Allez à Préférences, Avancé dans le menu principal Safari

• Cochez "Activer l'affichage du menu développement dans la barre de menu"

• Lorsque l'option nouvelle "Développement" apparaît dans le menu :
  Choisissez "Afficher la console de erreurs"