Pour des gens comme moi qui étudient JavaScript par eux-mêmes et n'ont aucune expérience dans l'apprentissage d'autres langues, au début, le débogage du JavaScript était également un point relativement difficile. De nombreuses choses de base doivent être explorées par elles-mêmes, et ce processus est très déprimant.
J'ai pensé à profiter de l'occasion pour démontrer les photos du billet de blog de fermeture ci-dessus à l'aide de Firebug, qui peut être considérée comme un partage de l'expérience de débogage.
L'exemple de code est le suivant:
La copie de code est la suivante:
fonction fn () {
var max = 10;
Bar de la fonction de retour (x) {
if (x> max) {
console.log (x);
}
}
}
var fl = fn (),
max = 100;
fl (15);
Sélectionnez Firebug - Script
La barre de surveillance à droite peut être des objets de fenêtre et des variables Max, FL et FN.
En même temps, vous pouvez également voir les propriétés de la fenêtre ci-dessous. En prenant l'emplacement à titre d'exemple, vous pouvez directement exécuter la sortie de Window.Location dans la "console" et sortir davantage la valeur d'attribut HREF de l'emplacement. Bien sûr, lorsque vous faites référence aux propriétés et aux méthodes des objets de fenêtre, vous n'avez pas besoin d'utiliser le formulaire "Window.xxx" mais utilisez directement "xxx".
Revenez au point,
Revenez à la colonne "Script", déboguez JavaScript et affichez les valeurs variables en frappant "Points d'arrêt".
Il existe plusieurs concepts que vous pouvez d'abord comprendre: points d'arrêt, entrée étape par étape, saut étape par étape et sortie étape par étape. Je ne le décrirai pas ici.
Cette fois, nous utilisons principalement la méthode de définition des points d'arrêt et d'entrer étape par étape.
Vous pouvez cliquer pour définir un point d'arrêt à la marque gauche et le clic droit pour porter un jugement régulier.
Plusieurs points d'arrêt peuvent être définis et les points d'arrêt de set peuvent être supprimés dans la colonne "point d'arrêt".
Ici, vous cassez le point directement au début de la balise de script et actualisez la page.
à ce moment-là
1. L'objet de fenêtre d'origine dans la zone de surveillance à droite devient ceci et pointe vers la fenêtre. Sortir ceci.Location dans la "console" obtiendra le même résultat que l'emplacement.
2. Les variables globales Max et FL sont initialisées à non définies
3. FN () est une déclaration de fonction, car l'analyseur lira d'abord la déclaration de fonction et la rendra disponible avant d'exécuter un code (accessible)
Cliquez sur le bouton "Entrée en une seule étape" dans le coin supérieur droit
Exécutez le code étape par étape et affichez cela, les modifications de la valeur de chaque variable et la pile dans la zone de surveillance. Vous pouvez vous référer au blog recommandé.
Alors venez un autre exemple de ceci
Le code est le suivant:
La copie de code est la suivante:
var name = 'la fenêtre';
var obj = {
Nom: «le local»,
getNameFunc: function () {
console.log (this.name);
return function () {
console.log (this.name);
};
}
};
var c = obj.getNamefunc ();
c ();
Toujours "étape", vous pouvez voir que lors de l'exécution de la ligne de code C (), vous entrez getNameFunc, cela change de pointant vers l'objet de fenêtre vers OBJ et la console sortira "The Local".
L'exécution étape par étape vous permet de voir très clairement la logique exécutée de l'ensemble du code.
Ce qui précède est un résumé de la méthode d'utilisation de la fonction de débogage de Firebug pour comprendre les fermetures JavaScript et ceci. J'espère que tu l'aimes