Dans cet article, nous allons expliquer comment déboguer JavaScript en utilisant Devtools dans Chrome étape par étape. Si vous souhaitez déboguer votre code JavaScript dans Chrome, vous devez suivre ces étapes comme mentionné ci-dessous.

Aperçu du projet

Je vais démontrer un exemple de la façon de déboguer le code JavaScript dans Chrome. Dans cette étape, je vais donner une description de base du code. Ce projet concerne le fonctionnement du modulo de calcul entre deux nombres. Cet exemple vous permet de passer la valeur du dividende et du diviseur respectivement. Par la suite, en cliquant sur le bouton de calcul, il faudra une minute pour calculer le mod entre deux nombres et vous donnera la sortie. La syntaxe de l'opération modulo est la suivante:

x mod y = r

Où x = dividende, y = diviseur et r = reste

Il y a deux fichiers dans ce projet, .html et .fichier js. Le fichier JavaScript contient 5 fonctions afin de calculer le mod de deux nombres:

1. Cliquez sur le gestionnaire: Il donne un message d'alerte si un ou les deux champs d'entrée sont vides
2. Les entrées sont vides (): Cette fonction est utilisée pour vérifier si les champs d'entrée sont vides ou non
3. UpdateLabel (): Cette fonction est utilisée pour calculer le mod de deux nombres
4. getNumber1 (): Utilisé pour obtenir la valeur du premier numéro
5. getNumber2 (): Utilisé pour obtenir la valeur du deuxième numéro

Le code JavaScript est illustré ci-dessous:

fonction onClick ()
if (inputsareEmpty ())
étiqueter.textContent = 'alert: vous devez saisir des nombres dans les deux champs.';;
retour;

UpdateLabel ();

fonction inputSareEmpty ()
if (getnum1 () === "|| getnum2 () ===")
Retour Vrai;
autre
retourne false;


fonction updateLabel ()
var valeur1 = getNum1 ();
var valeur2 = getNum2 ();
var mod = "valeur1"% "valeur2"
étiqueter.textContent = value1 + '%' + value2 + '=' + mod;

fonction getnum1 ()
Retourne les entrées [0].valeur;

fonction getnum2 ()
Retour des entrées [1].valeur;

Le code de fichier HTML est illustré ci-dessous:

Calculer le mod entre deux nombres

Entrez la valeur du dividende

Entrez la valeur du diviseur

Calculer le mod (%)

Sortie du projet:

Détection de bogues

La partie triste est que chaque fois que nous exécuterons ce code, il vous montrerait certains bugs. Comme vous pouvez l'observer clairement dans l'exemple ci-dessous, lorsque nous insérons les valeurs, la sortie n'est pas définie au lieu d'un résultat réel. Donc, maintenant nous devons détecter la cause originale du bug qui est expliqué brièvement dans le même article plus tard.

Exemple

Dans cet exemple, nous allons passer des valeurs qui donnent la sortie non définie comme indiqué dans l'image ci-dessous.

Donc, maintenant nous devons corriger ce bug rapidement. Dans cette étape, notre objectif principal est de détecter la source des bogues. Pour une détection rapide du bogue, vous devez déboguer le code JavaScript dans Chrome.

Pour cela, vous devez exécuter l'application sur Chrome, puis vous devez ouvrir Devtool en appuyant sur les touches courtes Ctrl + shift + i. Après avoir ouvert le Devtool, vous pourrez voir l'écran affiché ci-dessous. Outre de nombreuses tâches effectuées par Devtool, il peut également surveiller les demandes, modifier CSS.

Présentation de l'outil des développeurs

Vous pouvez déboguer votre code JavaScript dans l'onglet Panneau source. Il a 3 parties comme indiqué ci-dessous:

1. Page de navigateur de fichiers: Les demandes de chaque fichier peuvent être répertoriées dans cet onglet.
2. Éditeur de code: Il affiche le contenu des fichiers
3. Volet de débogage javascript: Utilisé pour inspecter JavaScript

Débogage de code

Le moyen le plus simple de déboguer un bogue dans votre code est que vous devez insérer le console.enregistrer() fonction dans votre code pour inspecter les valeurs simultanément.

fonction updateLabel ()
var valeur1 = getNum1 ();
console.log ('value1:', valeur1);
var valeur2 = getNum2 ();
console.log ('value2:', value2);
var mod = parseInt (valeur1)% parseInt (valeur2);
console.log ('result:', mod);
étiqueter.textContent = value1 + '%' + value2 + '=' + mod;

Bien que le console.enregistrer() La fonction peut être une bonne option pour détecter les bogues, mais les points d'arrêt peuvent être une option plus efficace car elle vous permet de faire une pause de code pendant son exécution et d'analyser la valeur correspondante. De plus, un point d'arrêt est meilleur que la console.log () parce que travailler avec la console.log () Vous devez observer de nombreuses étapes qui doivent être effectuées manuellement afin de visualiser les valeurs dans la fenêtre de la console tandis que les points d'arrêt le facilitent en travaillant directement.

Insertion de points d'arrêt dans le code

Dans le cas où vous reviendrez et jetez un œil aux fonctionnalités de l'application, vous saurez que le résultat de l'opération modulo semble être incorrect après avoir cliqué sur le "bouton Calculer". Par conséquent, vous devrez mettre un point d'arrêt avant l'événement de clic.

Les points de rupture de l'auditeur d'événements vous aident à trouver l'événement spécifique que vous souhaitez cesser en élargissant le groupe correspondant comme indiqué ci-dessous. Comme l'image le montre clairement qu'en vérifiant la boîte clique.

Entrez dans votre code

L'image ci-dessous illustre que si vous souhaitez arrêter l'exécution d'une ligne spécifique E.g. Nous disons la ligne 21, alors nous cliquerons dessus et observerons un marqueur bleu sur cette ligne spécifique qui s'assure que l'exécution s'arrêtera automatiquement lorsqu'elle atteindra la ligne 21.

Détecter la cause d'un bug

Comme nous mettons un point d'arrêt sur la ligne 21, ce qui signifie que le code s'arrête toujours chaque fois que l'exécution du code atteint cette ligne. Lorsque le code est interrompu sur une certaine ligne, le panneau de portée spécifie ses variables locales et globales.

Comme vous le voyez dans l'image ci-dessous, les deux valeurs ne sont pas des entiers. Ils sont joints en guillemets comme vous le voyez dans l'image ci-dessous ainsi que la valeur du mod semble également suspecte. Enfin, la source du bug est détectée.

Correction de bogues

Maintenant, vous pouvez modifier le code et le tester à nouveau. Cliquez sur l'icône de CV comme indiqué à droite de l'écran de la fenêtre. Maintenant, remplacez la ligne 20 par la ligne mentionnée ci-dessous et enregistrez les modifications.

var mod = parseInt (valeur1)% parseInt (valeur2);

Ensuite, désactivez les points d'arrêt et testez le code avec différentes valeurs pour vérifier les résultats corrects.

La sortie de 24% 9 est la suivante:

La sortie de 5% 3 est la suivante:

Conclusion

JavaScript est la langue la plus populaire et son besoin augmente de jour en jour. Presque partout JavaScript est utilisé. Dans cet article, nous avons expliqué le débogage du code JavaScript dans Chrome. Par la suite, nous avons discuté de chaque étape en profondeur. Des exemples d'images sont également fournies pour chaque étape pour vous aider à comprendre.