Points d'arrêt en JavaScript
Dans cet article, nous discuterons de l’utilisation et des avantages du point d’arrêt et de la manière de déboguer notre code JavaScript à l’aide du mot-clé debugger et du mode débogueur du navigateur.
Points d’arrêt
La plupart du temps, notre code de programme contient peu d’erreurs de syntaxe logique et notre programme ne fournit pas le résultat souhaité conformément aux instructions données. Ainsi, pour résoudre les erreurs et déboguer notre code de programme, nous devons arrêter l’exécution et vérifier le flux d’exécution à chaque étape.
Nous utilisons des points d’arrêt dans nos programmes pour arrêter l’exécution, et divers langages de programmation contiennent spécifiquement des mots clés de points d’arrêt.
Les mots-clés Breakpoints arrêtent l’exécution pendant l’exécution du code car la plupart du temps, les erreurs n’affichent aucun message d’erreur ou journal, et nous devons découvrir quel est le problème réel.
Points d’arrêt en JavaScript
Le débogage est un processus délicat, et maintenant la plupart des navigateurs fournissent un débogueur JavaScript intégré. Nous pouvons définir des points d’arrêt avec des débogueurs et définir où nous devons arrêter l’exécution.
Nous pouvons examiner les valeurs des variables au moment de l’exécution lors de l’exécution du code.
Nous pouvons activer le débogage dans notre navigateur en appuyant sur la touche F12, et dans le menu du débogueur, sélectionnez la section Console. Si notre navigateur prend en charge le débogage, nous pouvons utiliser la méthode console.log() pour afficher et examiner les valeurs.
Exemple de console :
<!DOCTYPE html>
<html>
<body>
<h1>Delftstack learning</h1>
<h2>JavaScript debugger keyword example</h2>
<p>You can on debugger with F12 key and select console in debugger menu.</p>
<script>
a = 2;
b = 4;
sum = a + b;
console.log(c); // it will display the value of sum variable
</script>
</body>
</html>
Dans le source HTML ci-dessus, nous avons utilisé la méthode par défaut console.log() pour afficher la somme des variables a et b ; nous pouvons voir la section de connexion console du mode débogueur.
Nous pouvons définir des points d’arrêt dans la fenêtre du débogueur pour le code JavaScript, et l’exécution sera arrêtée à chaque point d’arrêt, ce qui aidera à examiner les valeurs JavaScript. Nous pouvons reprendre l’exécution à nouveau avec le bouton de lecture dans la fenêtre du débogueur.
Mot-clé Debugger en JavaScript
Le mot clé JavaScript debugger est utilisé dans les instructions de code pour arrêter l’exécution ; il exécute la même fonctionnalité que nous définissons des points d’arrêt dans le débogueur.
Exemple de debugger :
<!DOCTYPE html>
<html>
<body>
<h1>Delftstack learning</h1>
<h2>JavaScript debugger keyword example</h2>
<p id="test"></p>
<p>You can on debugger and see the execution will be stop at third line.</p>
<script>
let sum = 15 + 5;
debugger; // to stop execution
document.getElementById("test").innerHTML = sum;
</script>
</body>
</html>
Dans la source HTML ci-dessus, nous avons utilisé le mot-clé debugger dans le code JavaScript pour arrêter l’exécution et affecter la variable sum au paragraphe en utilisant getElementById("id").innerHTML.