1. Qu'est-ce que le débogage des points d'arrêt? Est-ce difficile?
Le débogage des points d'arrêt n'est en fait pas une chose compliquée. Une compréhension simple de l'absence d'appels sortants consiste à ouvrir le navigateur, à ouvrir des sources, à trouver le fichier JS et à cliquer sur le numéro de ligne. Il semble très simple à opérer, mais ce que beaucoup de gens sont réellement confus, c'est où briser le point? (Regardons d'abord une capture d'écran de point d'arrêt, en prenant le point de rupture du navigateur Chrome comme exemple)
Rappelez-vous les étapes?
Ouvrez la page avec un navigateur Chrome → Appuyez sur F12 pour ouvrir les outils du développeur → Ouvrir Sources → Ouvrir le fichier de code JS que vous souhaitez déboguer → Cliquez sur le numéro de ligne, OK! Félicitations à votre point d'arrêt vierge pour avoir frappé, haha ~~
2. Comment atteindre les points d'arrêt de manière appropriée?
Le fonctionnement des points d'arrêt est très simple. Le problème de base est de savoir comment appuyer sur les points d'arrêt pour dépanner le problème avec le code? Permettez-moi de continuer à vous donner un exemple à comprendre. Sans plus tarder, l'image ci-dessus:
Supposons que nous implémentons maintenant une fonction qui se charge plus, comme le montre la figure ci-dessus, mais il y a un problème avec le chargement de plus de fonctions. Après avoir cliqué, les données ne sont pas chargées. À quoi devons-nous penser à ce moment? (Écrivez la réponse dans une autre ligne, et vous pouvez voir quelle est votre première réaction)
La première chose qui m'est venue à l'esprit était de savoir si mon clic a réussi? La méthode dans l'événement click est-elle en cours d'exécution? OK, si vous voulez connaître la réponse à cette question, essayons de frapper un point d'arrêt immédiatement. Où est le point d'arrêt? Pensez-y d'abord.
Image suivante:
Avez-vous pensé à cela? C'est vrai, car nous voulons savoir si le clic est réussi, bien sûr, nous ajoutons un point d'arrêt lors de l'événement de clic dans le code. N'oubliez pas de ne pas l'ajouter sur la ligne 226, car la fonction de la méthode de clic est exécutée, pas le sélecteur de la ligne 226. Le point d'arrêt a été frappé maintenant, alors que faire? Pensez-y vous-même ~
Continuez vers l'image ci-dessus:
Ensuite, bien sûr, nous sommes retournés et avons cliqué sur le bouton de chargement plus, pourquoi? Front. . . Si vous demandez ceci, veuillez me permettre d'utiliser cette émoticône, sans cliquer sur le bouton de chargement plus, comment déclencher l'événement de clic? Comment exécuter les fonctions dans l'événement Click sans déclencher l'événement de clic? Rugissement. . Mais je crois que tout le monde ne posera pas de questions aussi basses ~ Je ne parlerai pas de bêtises ~
Continuez vers le sujet, l'image ci-dessus est la situation après avoir cliqué sur la charge de plus de boutons. Nous pouvons voir que la page à gauche est couverte par une couche translucide. Il y a aussi une chaîne d'anglais et deux boutons au-dessus de la page. Les 227 lignes du code à droite ont été ajoutées avec une couleur d'arrière-plan. Cette situation se produit, peu importe ce que les boutons signifient et ce que font leurs fonctions. Quelles informations avez-vous obtenues de cette photo? Continuez à y penser ~
Si la situation ci-dessus se produit, cela signifie que la fonction de l'événement de clic a été appelée, ce qui explique en outre que l'événement de clic entre en vigueur. Ensuite, le premier «suspect criminel» que nous avons causé à ce problème est exclu.
Pour ajouter:
Et si la situation ci-dessus ne se produit pas? Cela signifie-t-il que l'événement de clic n'a pas pris effet? Qu'est-ce qui a fait que l'événement de clic ne prenait pas effet? Tout le monde y pense eux-mêmes ~
Il existe de nombreuses raisons pour lesquelles l'événement de clic ne prend pas en vigueur, tels que les erreurs multi-sélecteur, les erreurs de syntaxe, les éléments sélectionnés sont générés plus tard, etc. Comment le résoudre?
Le sélecteur est faux, vous pouvez continuer à voir le contenu de la partie console plus tard, je pense que tout le monde sait comment y faire face.
Erreurs de syntaxe, vérifiez attentivement. Vous pouvez comparer des grammaires inconnues sur Baidu.
L'élément sélectionné est généré plus tard. La façon la plus simple de le gérer est d'utiliser la méthode .on (). Cette chose est traitée avec une délégation d'événements. Vous pouvez utiliser Baidu pour plus de détails.
Alors, où l'identité du "suspect criminel" sera-t-elle enfermée ensuite?
Nous tournons notre attention vers l'événement à l'intérieur et l'événement de clic est déclenché, donc le problème suivant est le problème de fonction à l'intérieur. Si vous voulez demander pourquoi? S'il vous plaît, donnez-moi un morceau de tofu. . .
Par exemple, je vous donnerai un stylo et vous demanderai d'écrire. Ensuite, vous écrivez un mot sur le papier et constatez que le mot n'est pas sorti. Pourquoi? Vous avez dit que je l'avais écrit, et il y avait encore des rayures sur le papier. Est-il possible que le stylo n'ait pas d'encre ou que la pointe soit cassée? Cet exemple est davantage un principe de chargement de clics. L'action d'écriture est un opération de clic et la fonction interne est la pointe de l'encre ou du stylo. Comprenez-vous ~
Ensuite, nous analysons le contenu de l'événement Click, qui contient trois phrases. La première phrase est que la variable que je grandisse seule, la deuxième phrase consiste à ajouter une balise I au bouton, et la troisième phrase consiste à appeler la méthode de demande de données.
Grâce au rôle de ces trois phrases, nous pouvons placer une plus grande partie de la suspicion dans la troisième phrase et une petite partie des première et deuxième phrases. Certaines personnes peuvent se demander, comment la deuxième phrase peut-elle être suspecte? Sa fonction est juste d'ajouter une étiquette, qui n'a aucun effet sur les données. En effet, cette phrase n'a aucun effet sur les données, mais pour des considérations rigoureuses, elle peut encore faire des erreurs, par exemple, que se passe-t-elle si elle manque de point-virgule? Ou y a-t-il un symbole à l'intérieur de la phrase mal? Souvent, c'est ce genre de petit problème qui lance beaucoup de notre temps.
OK, afin de verrouiller davantage le "suspect criminel", je vous présenterai un outil, qui est également l'une des deux icônes apparaissant dans l'image ci-dessus, voir l'image ci-dessous:
La fonction de cette petite icône est appelée "exécution par phrase" ou "Exécution étape par étape". Il s'agit d'un nom que je comprends personnellement, ce qui signifie que chaque fois que je clique dessus, l'instruction JS exécutera une phrase plus tard, et elle a également une clé de raccourci, F10. La figure suivante montre l'effet une fois qu'il a cliqué:
J'ai cliqué sur ce bouton deux fois (ou utilisé la touche de raccourci F10) et le code JS a été exécuté de la ligne 227 à la ligne 229, donc je l'ai appelé "instruction par étape" ou "étape étape par étape". Cette fonction est très pratique et sera utilisée pour la plupart des débogages.
Il est trop tard, je continuerai à écrire demain, le bon spectacle arrive toujours ~
―Vision `` are
Ok, continuez à écrire!
L'introduction ci-dessus montre que j'ai cliqué deux fois sur le bouton "Exécution de phrase par phrase" et le code est passé de la ligne 227 à la ligne 229. Que pensez-vous que cela signifie? Cela signifie-t-il que du point de vue grammatical, les deux premières phrases ne sont pas problématiques, donc cela signifie également que les deux premières phrases éliminent les soupçons? Je ne le vois pas.
Comme nous le savons tous, le chargement davantage est une fonction de la page suivante, et la plus principale est la valeur du numéro de page transmise à l'arrière-plan. Chaque fois que je clique sur le bouton de chargement plus, la valeur du numéro de page doit être augmentée de 1. Donc, si les données de la page suivante ne sortent pas, est-il possible qu'il y ait un problème avec la valeur du numéro de page, c'est-à-dire [it variable] (ce qui suit est le nom unifié i)? Alors, comment dépanner s'il y a des problèmes avec le numéro de page? Tout le monde pense en premier.
Voici deux façons de visualiser la valeur de sortie réelle du numéro de page i], la figure ci-dessus:
Le premier type:
Les étapes de fonctionnement sont les suivantes:
1. Toujours appuyer sur un point d'arrêt sur la ligne 227 → 2. Cliquez une fois sur le bouton de chargement plus → 3. Cliquez une fois sur le bouton "Exécuter Instruction par phrase", et le code JS sera exécuté à la ligne 228 → 4. Utilisez la souris pour sélectionner I ++ (qu'est-ce que cela signifie que vous ne comprenez pas? dans l'image ci-dessus.
Le deuxième type:
Cette méthode est en fait similaire à la première, sauf que la valeur de i est sortie sur la console. Il vous suffit de suivre la première méthode à exécuter à l'étape 3 → 4. Ouvrez la console du même niveau que les sources → 5. Entrez I → 6. Appuyez sur Entrée de la touche.
Dans la deuxième méthode ci-dessus, la console est mentionnée. Nous pouvons l'appeler Console ou autre chose. Ce n'est pas important. La console a une fonction très puissante. Pendant le processus de débogage, nous devons souvent savoir quelles sont les valeurs de certaines variables, ou si nous utilisons le sélecteur [$ ". Div") pour sélectionner les éléments que nous voulons, etc., peuvent être imprimés sur la console. Bien sûr, il est également possible d'utiliser directement la première méthode.
Permettez-moi de vous montrer les éléments que nous voulons sélectionner dans la console. Image ci-dessus ~
Entrez $ (ceci) dans la console pour obtenir l'élément sélectionné. Oui, c'est l'objet que nous avons cliqué - Chargez plus d'éléments de bouton.
Ici, je vais vous dire ma compréhension de la console de la console: cette chose est un analyseur JS, qui est utilisé par le navigateur lui-même pour analyser le gars qui exécute JS. Cependant, le navigateur nous permet aux développeurs de contrôler le fonctionnement et la sortie de JS pendant le processus de débogage via la console. Grâce aux deux méthodes ci-dessus, vous pouvez penser qu'il est très facile à utiliser, mais je voudrais vous le rappeler, ou c'est une confusion que certains débutants sont plus susceptibles de rencontrer.
Confused 1: Lorsqu'il n'y a pas de point de rupture, entrez I dans la console et que la console rapporte une erreur.
Cela devrait être un problème commun pour les débutants. Pourquoi ne puis-je pas produire directement la valeur des variables dans la console sans casser le point? Personnellement, je comprends que je suis juste une variable locale pour le moment. Si aucun point d'arrêt n'est défini, le navigateur analysera tous les js. La console ne peut pas accéder aux variables locales, mais ne peut accéder qu'à des variables globales. Par conséquent, la console rapportera une erreur que j'ai non définie, mais lorsque JS atteint un point d'arrêt, la console l'analyse dans la fonction où la variable locale I est située, et je peux accéder à ce moment.
Confusion 2: Pourquoi puis-je imprimer quelque chose directement dans $ (". Xxx") dans la console?
C'est très simple. La console elle-même est un analyseur JS, et $ (". xxx") est une instruction JS, donc la console naturellement peut analyser cette instruction et sortir le résultat.
Après avoir introduit l'utilisation du bouton et de la console "d'exécution de phrase par phrase", nous allons enfin introduire un bouton, l'image ci-dessus:
J'appelle ce bouton "Processus Exécution", qui est différent du bouton "Exécution de l'instruction". Le bouton "Exécution de processus" est souvent utilisé lorsqu'une méthode appelle plusieurs fichiers JS. Le code JS impliqué est relativement long, donc ce bouton sera utilisé.
Au-dessus de:
Supposons que dans l'image ci-dessus, je n'ai fait un point d'arrêt que sur la ligne 227, puis j'ai continué à cliquer sur le bouton "Exécuter Instruction par phrase" à la ligne 229, que se passe-t-il à nouveau si je clique à nouveau sur le bouton "Exécuter Instruction par phrase"? Il entrera dans le JS dans l'image suivante:
Ce sont le contenu du fichier de bibliothèque Zepto. Il n'y a rien de bon à regarder. C'est très compliqué à courir. Nous ne pouvons pas toujours utiliser le bouton "Exécution phrase par sensation", vous constaterez donc que vous avez appuyé sur la majeure partie de la journée et toujours encerclé dans le fichier de bibliothèque. . . Que faire pour le moment? Ensuite, il est temps de "procéder à l'exécution du processus" pour monter sur scène.
Au-dessus de:
En plus de définir un point d'arrêt sur la ligne 227, j'ai également appuyé sur un point d'arrêt sur la ligne 237. Lorsque nous exécutons la ligne 229, cliquez directement sur le bouton "Process-by Process". Vous constaterez que JS a directement sauté le fichier de la bibliothèque et a couru à la ligne 237. Vous pouvez l'utiliser par vous-même pour en faire l'expérience.
Résumé final:
Cet article présente principalement les trois outils du bouton "phrase par sensation par série", bouton "Exécution process-by serial", console de la console et quelques idées lors des bugs de débogage. Je ne répéterai pas l'utilisation de l'outil. Connaissez simplement l'utilisation. Comment l'utiliser plus raisonnablement doit être résumé et amélioré grâce à beaucoup de pratique ~
En fait, ce dont je veux parler principalement dans cet article est un moyen de déboguer des bogues, mais parce que les exemples que j'ai choisis impliquent trop de choses. . . J'avais peur que le contenu de tout soit trop long et que tout le monde n'était pas intéressé à le lire, alors j'ai simplement choisi une partie pour vous l'expliquer. Je me demande si vous avez gagné quelque chose. Ne regardez pas les trois phrases que j'ai écrites beaucoup de choses dans le débogage. Si vous le faites vraiment comme moi dans le projet réel, vous prendrez probablement beaucoup plus de temps pour déboguer un bug que d'écrire un script. . . Dans les situations réelles, nous devons développer la première fois que nous obtenons le problème, vérifiez le problème dans nos esprits et trouvons le point le plus probable. Si nous ne pouvons pas trouver rapidement le point le plus important, vous pouvez utiliser la méthode la plus gênante mais fiable pour utiliser le bouton "Exécution phrase par sensation" pour exécuter l'intégralité de JS lié au problème un par un. Au cours du processus d'exécution, nous devons également clarifier nos pensées et faire attention à la valeur correcte de chaque variable et aux éléments sélectionnés par le sélecteur. De manière générale, si vous faites cela une fois, les bogues seront presque résolus.
Je pense donc personnellement que notre idée de débogage des bogues devrait être la suivante: premièrement, si JS est exécuté avec succès; Deuxièmement, que JS ait des problèmes de logique, des problèmes variables, des problèmes de paramètres, etc.; Enfin, s'il n'y a aucun problème avec ce qui précède, veuillez vérifier attentivement divers symboles. . .
OK ~ C'est tout au sujet du point d'arrêt ~ Si vous ne comprenez pas, vous pouvez laisser un message ci-dessous ~ Si vous avez des points de connaissance que vous ne comprenez pas ou que vous ne comprenez pas au sujet de la frontale, vous pouvez également laisser un message ci-dessous. Lorsque vous aurez le temps, je continuerai à écrire des documents sur vos messages ~