Débogage du code JavaScript
Débogage Est-ce que ce processus de recherche d'erreurs et de réparation lorsque vous examinez votre code ou votre programme. Bien que JavaScript soit difficile à déboguer, nous vous faciliterons la vie. Aujourd'hui, dans cet article, nous parlerons de la façon de déboguer le code JavaScript.
Débogueur javascript
Tous les navigateurs modernes ont des débuggeurs JavaScript intégrés. Ces débogueurs nous aident en montrant ces erreurs. Ces débogueurs peuvent également être activés ou désactivés en fonction de nos besoins.
La chose intéressante à propos de ces débogueurs est qu'avec cela, nous pouvons également définir des points d'arrêt. Les points d'arrêt sont placés dans notre code où nous arrêtons l'exécution du code. Lorsque le code est arrêté, nous pouvons vérifier les erreurs et examiner les variables.
Comme Google Chrome est un navigateur très célèbre, nous utiliserons Chrome pour la plupart des parties de cet article. Cependant, en fin de compte, nous vous montrerons comment permettre le débogage de JavaScript dans d'autres navigateurs également.
Pour commencer à déboguer dans Google Chrome, appuyez sur F12 clé. Nous pouvons également appuyer Ctrl + shift + i pour ouvrir le débogueur. Cependant, même si ces deux-là ne fonctionnent pas, essayez un clic droit de votre souris n'importe où dans la fenêtre de votre onglet de navigateur. Cliquer sur inspecter Et après ça, allez à la console.
Utilisation de la console.Méthode log ()
Google Chrome prend en charge le débogage donc que nous pouvons utiliser console.enregistrer() Dans notre code JavaScript pour l'afficher dans notre fenêtre de console.
Exemple
const str = "déboglons dans la console";// Voyons cela dans la fenêtre de la console
console.log (str);
Maintenant, lorsque nous cliquer sur F12 et que nous allons à notre console, nous verrons:
Comment définir des points d'arrêt
Nous pouvons également définir des points d'arrêt dans la fenêtre du débogueur. Comme mentionné précédemment, avec chaque point d'arrêt que nous définissons, l'exécution du code s'arrêtera. Nous examinerons ensuite notre code et trouverons l'erreur. Si nous n'avons pas trouvé l'erreur dans ce point d'arrêt, nous ajouterons un autre point d'arrêt. C'est très facile car nous pouvons continuer le code d'exécution avec un bouton de clic (bouton de lecture normalement).
Supposons que nous ayons un bouton. Chaque fois que nous cliquons sur le bouton, il ajoute une valeur à la valeur précédente. La valeur par défaut sera 0. Maintenant, si nous voulons déboguer en utilisant le point d'arrêt, nous devons définir un point d'arrêt. Si la valeur de comptoir n'augmente pas avec le clic, nous savons que le problème est sur l'écouteur d'événements, cliquez.
Pour mettre un point d'arrêt sur l'auditeur de l'événement, cliquez F12. Cela vous dirigera vers la fenêtre de la console. Du côté de la console, cliquez sur l'onglet Sources, puis passez au point d'arrêt pour les auditeurs d'événements. Dans ce cas, cliquez sur les événements de la souris, puis cochez l'option Click.
Félicitations, vous avez défini votre premier point d'arrêt. Chaque fois que vous exécutez le programme, il s'arrêtera lors de l'événement Cliquez sur l'événement de l'événement de la souris. Nous pouvons le reprendre en cliquant sur le bouton de CV en haut de l'onglet Sources.
HTML:
Javascript:
const btn = document.GetElementById ("Vanish-BTN");Soit la valeur = 1;
btn.addEventListener ("click", function ()
btn.innerHtml = valeur ++;
)
Utilisation du mot-clé Debugger
C'est la même chose que le point d'arrêt expliqué plus tôt, sauf que cela se fait via le code JavaScript et non manuellement. Nous utilisons le mot-clé du débogueur chaque fois que nous souhaitons déboguer un code. Les mots clés du débogueur arrêtent essentiellement le flux d'exécution du code comme un point d'arrêt. Après avoir arrêté l'exécution, il appelle la fonction de débogage intégrée. Cette fonction de débogueur fonctionne de la même manière qu'un point d'arrêt.
Supposons que nous voulons ajouter deux variables. Cependant, avant de les afficher comme une alerte, je veux les déboguer. Le code suivant fournira la solution à ce sujet:
Soit num1 = 5;Soit num2 = 10;
débogueur;
alerte (num1 + num2);
Le mot-clé débogueur force un point d'arrêt ou arrête l'exécution du code et invoque la fonction de débogage. Si un débogage est requis, la fonction de débogueur est appelée; Sinon, rien n'est fait.
Débogage dans différents navigateurs
La pratique courante pour commencer le débogage en javascript est en cliquant sur inspecter ou en appuyant sur la touche F12 dans votre navigateur. Cependant, si cela ne fonctionne pas, suivez les commandes ci-dessous pour ouvrir le menu Debugger.
Google Chrome
- Cliquez sur le bouton de menu dans le coin supérieur droit de Google Chrome
- Cliquez sur plus d'outils
- Cliquez sur les outils du développeur
- Sélectionnez la console ou les sources en fonction de votre besoin
Mozilla Firefox
- Lorsque vous ouvrez le navigateur, cliquez sur le menu
- Après cela, cliquez sur le développeur Web
- Cliquez sur la console Web
Microsoft Edge
- Lorsque vous ouvrez le navigateur, sélectionnez les outils du développeur dans le menu
- Puis sélectionnez la console
Opéra
- Navigateur ouvert
- Sélectionnez le menu, puis le développeur sélectionné
- Maintenant, sélectionnez les outils du développeur
- Puis cliquez sur la console
Safari
- Accédez au menu principal et cliquez sur Safari Préférences
- Cliquez sur l'option avancée
- Dans la barre de menu, sélectionnez Activer Afficher le menu.
- Lorsque le développement est vu dans le menu Cliquez sur Afficher la console d'erreur.
Conclusion
Il existe de nombreuses méthodes de débogage disponibles en JavaScript. Nous avons expliqué les méthodes les plus utilisées / communes et les plus faciles pour déboguer notre code JavaScript. Avec le développement en JavaScript, vous devrez déboguer encore et encore. Je vous suggère d'enregistrer cet article en signet dans votre navigateur afin que vous n'ayez pas à rechercher encore et encore.