Débogage JavaScript


Table des matières

    Afficher la table des matières


Des erreurs peuvent (seront) se produire à 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 y a aucun message d'erreur et vous n'obtiendrez aucune indication où rechercher les erreurs.

La recherche (et la correction) des erreurs dans le code de programmation est appelée débogage de code.


Débogueurs JavaScript

Le débogage n’est pas facile. Mais heureusement, tous les navigateurs modernes disposent d'un Débogueur JavaScript.

Les débogueurs intégrés peuvent être activés et désactivés, forçant ainsi 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é) et examinez 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 appuyez sur 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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html> 

Conseil : Apprenez-en davantage sur la méthode console.log() dans notre référence de la console JavaScript.


Définition de 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 cessera de s'exécuter et vous permettra d'examiner 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-clé debugger 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 du débogueur n’a aucun effet.

Avec le débogueur activé, ce code cessera de s'exécuter avant exécute la troisième ligne.

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Debugger</h2>

<p id="demo"></p>

<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>

<script>
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

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éveloppement dans la barre de menus".

  • Lorsque la nouvelle option "Développer" apparaît dans le menu :
    Choisissez "Afficher l'erreur Console".


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 véritable bug (un insecte) coincé dans l’électronique.