Débogage JavaScript
Des erreurs peuvent (arriveront) à chaque fois que vous écrivez un nouveau code informatique.
Débogage de code
Le code de programmation peut contenir des erreurs de syntaxe ou des erreurs logiques.
Beaucoup de ces erreurs sont difficiles à diagnostiquer.
Souvent, lorsque le code de programmation contient des erreurs, rien ne se passe. Il n'y a pas de messages d'erreur et vous n'obtiendrez aucune indication sur l'endroit où rechercher les erreurs.
La recherche (et la correction) des erreurs dans le code de programmation s'appelle le débogage du code.
Débogueurs JavaScript
Le débogage n'est pas facile. Mais heureusement, tous les navigateurs modernes ont un débogueur JavaScript intégré.
Les débogueurs intégrés peuvent être activés et désactivés, ce qui force le signalement des erreurs à l'utilisateur.
Avec un débogueur, vous pouvez également définir des points d'arrêt (endroits où l'exécution du code peut être arrêtée) et examiner les variables pendant l'exécution du code.
Normalement, sinon suivez les étapes en bas de cette page, vous activez le débogage dans votre navigateur avec la touche F12, et 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()pour afficher les valeurs JavaScript dans la fenêtre du débogueur :
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
Conseil : En savoir plus sur la console.log()méthode dans notre Référence de la console JavaScript .
Définir des points d'arrêt
Dans la fenêtre du débogueur, vous pouvez définir des points d'arrêt dans le code JavaScript.
À chaque point d'arrêt, JavaScript arrête de s'exécuter et vous permet d'examiner les valeurs JavaScript.
Après avoir examiné les valeurs, vous pouvez reprendre l'exécution du code (généralement avec un bouton de lecture).
Le mot-clé du débogueur
Le mot- debuggerclé arrête l'exécution de JavaScript et appelle (si disponible) la fonction de débogage.
Cela a la même fonction que de définir un point d'arrêt dans le débogueur.
Si aucun débogage n'est disponible, l'instruction de débogage n'a aucun effet.
Avec le débogueur activé, ce code cessera de s'exécuter avant d'exécuter la troisième ligne.
Exemple
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
Outils de débogage des principaux navigateurs
Normalement, vous activez le débogage dans votre navigateur avec F12, et sélectionnez "Console" dans le menu du débogueur.
Sinon suivez ces étapes :
Chrome
- Ouvrez le navigateur.
- Dans le menu, sélectionnez "Plus d'outils".
- Dans les outils, choisissez "Outils de développement".
- Enfin, sélectionnez Console.
Firefox
- Ouvrez le navigateur.
- Dans le menu, sélectionnez "Développeur Web".
- Enfin, sélectionnez "Console Web".
Bord
- Ouvrez le navigateur.
- Dans le menu, sélectionnez "Outils de développement".
- Enfin, sélectionnez "Console".
Opéra
- Ouvrez le navigateur.
- Dans le menu, sélectionnez "Développeur".
- Dans "Développeur", sélectionnez "Outils de développement".
- Enfin, sélectionnez "Console".
Safari
- Allez dans Safari, Préférences, Avancé dans le menu principal.
- Cochez "Activer Afficher le menu Développer dans la barre de menus".
- Lorsque la nouvelle option "Développer" apparaît dans le menu :
Choisissez "Afficher la console d'erreurs".
Saviez-vous?
Le débogage est le processus de test, de recherche et de réduction des bogues (erreurs) dans les programmes informatiques.
Le premier bug informatique connu était un vrai bug (un insecte) coincé dans l'électronique.