Débogage JavaScript

Les erreurs se produisent toujours, chaque fois que vous écrivez du nouveau code informatique.

Débogage JavaScript

Écrire du JavaScript sans débogueur est difficile.

Votre code peut contenir des erreurs de syntaxe ou des erreurs de logique, ce qui est difficile à diagnostiquer.

Généralement, si le code JavaScript contient des erreurs, rien ne se passe. Il n'y a pas de message d'erreur et aucune indication ne permet de trouver l'erreur.

Généralement, chaque fois que vous essayez d'écrire un nouveau code JavaScript, des erreurs peuvent se produire.

Débogueur JavaScript

Trouver des erreurs dans le code de programmation est appelé débogage de code.

Le débogage n'est pas simple. Heureusement, tous les navigateurs modernes ont un débogueur intégré.

Le débogueur intégré peut être ouvert ou fermé, forçant les rapports d'erreurs à être signalés à l'utilisateur.

Grâce au débogueur, vous pouvez également définir des points d'arrêt (endroit où l'exécution du code est interrompue) et vérifier les variables pendant l'exécution du code.

Généralement, appuyez sur la touche F12 pour démarrer le débogueur dans le navigateur, puis sélectionnez "Console" dans le menu du débogueur.

la méthode console.log()

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

Exemple

<!DOCTYPE html>
<html>
<body>
<h1>Ma première page Web</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

Essayez-le vous-même

Astuce :Visitez notre manuel de référence JavaScript Console pour obtenir plus d'informations sur la méthode console.log().

Définir un point 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, JavaScript s'arrêtera pour vous permettre de vérifier les valeurs de JavaScript.

Après avoir vérifié la valeur, vous pouvez reprendre l'exécution du code.

Mot-clé debugger

debugger Le mot-clé stoppe l'exécution de JavaScript et appelle (si présent) la fonction de débogage.

Cela fonctionne de la même manière que de définir un point d'arrêt dans le débogueur.

Si le débogueur n'est pas disponible,debugger L'instruction n'a pas d'effet.

Si le débogueur est ouvert, ce code s'arrêtera avant l'exécution de la troisième ligne.

Exemple

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

Essayez-le vous-même

Outils de débogage des navigateurs populaires

Généralement, vous pouvez activer le débogage via la touche F12 dans le navigateur et choisir "Console" dans le menu du débogueur.

Sinon, suivez les étapes suivantes :

Chrome

  • Ouvrez le navigateur
  • Sélectionnez les outils à partir du menu
  • Sélectionnez les outils de développeur à partir des outils
  • Enfin, sélectionnez la console

Firebug Firefox

  • Ouvrez le navigateur
  • Veuillez vous rendre sur la page Web : http://www.getfirebug.com
  • Selon les instructions suivantes : Comment installer Firebug

Internet Explorer

  • Ouvrez le navigateur
  • Sélectionnez les outils à partir du menu
  • Sélectionnez les outils de développeur à partir des outils
  • Enfin, sélectionnez la console

Opera

  • Ouvrez le navigateur
  • Veuillez vous rendre sur la page Web : http://dev.opera.com
  • Selon les instructions suivantes : Comment installer Firebug Lite

Menu Développeur Safari

  • Cliquez sur le menu Safari, Préférences, Avancé
  • Cochez "Activer le menu développement dans la barre de menu"
  • Lorsque le menu apparaît avec une nouvelle option "Développement", sélectionnez "Afficher la console d'erreur"

Saviez-vous que?

Le débogage est le processus de test, de recherche et de réduction des bugs (erreurs) dans un programme informatique.

Le premier bug connu de l'histoire informatique était un insecte réel coincé dans un dispositif électronique (un insecte).