js série de débogage positionnement du code source et débogage [bases]_javascript compétences

Traitons d'abord du premier problème : 1. Consultez le code source de la fonction recommandée appelée par cette fonction en bas de l'article
C'est en fait très simple, il suffit de cliquer sur la loupe pour sélectionner la recommandation.

Ce votePost(cb_entryId,'Digg') est la fonction appelée par le bouton de recommandation. N'est-ce pas très simple ?

La deuxième question est de localiser l'emplacement du fichier où se trouve la fonction.
En fait, c'est très simple. Bien sûr, les amis qui ne sont pas familiers avec les consoles ne savent peut-être pas comment le voir.
Je tape votePost dans la console et j'appuie sur Entrée,

Le code source de la fonction est affiché en gras et il y a un lien blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:1 dans le coin inférieur droit.
Le v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1 suivant est simplement ignoré.

ps : Si vous voulez savoir ce que c'est, il s'agit en fait d'un numéro de version. Quant à sa fonction, il s'agit souvent d'empêcher la mise en cache des détails.
blog-common.js :1 C’est à peu près ce que cela signifie. .
blog-common.js est le fichier js où se trouve cette fonction
1 est le numéro de ligne du code.

Cliquez directement sur ce lien pour accéder au panneau Sources. Il s'agit du panneau du code source. La fonction la plus importante pour le débogage sera présentée plus tard.

Mais tout le code est sur une seule ligne, comment doit-on le changer ? Il y a 4946 caractères, tous condensés sur une seule ligne. .
Chrome nous fournit une fonction de formatage du code. Cliquez sur le bouton Pretty print ci-dessous pour formater le code.

Une fois le formatage terminé, le code sera très beau. Quant à savoir s'il peut être lu ou compris, c'est une autre affaire.
Si vous ne le comprenez pas, il se peut que le code ait été compilé par des outils tels que UglifyJS et Closure de Google, comme le fichier jquery.min.js.
Il est également possible que votre niveau soit trop bas et que vous ne compreniez pas le code écrit par le maître pour le moment. Alors je ne peux rien y faire. Vous ne pouvez que travailler dur pour améliorer votre force.
Si vous ne trouvez pas l’emplacement de la fonction après le formatage, ne vous inquiétez pas, je suis là, alors pourquoi paniquer ?
Revenez tout à l’heure au panneau de la console.

Vous êtes ravi de retrouver, blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:91
Le numéro de ligne est devenu 91. Cliquez maintenant sur ce lien pour accéder à la position formatée correspondante. N'est-ce pas très pratique ? .

La dernière question est de modifier la fonction pour la rendre invalide. C'est la plus simple, beaucoup plus simple que la précédente, mais beaucoup de gens ne savent pas comment la faire fonctionner, je vais donc l'expliquer ici.
Tout d'abord, nous savons que la fonction appelée par la fonction de recommandation est votePost(cb_entryId,'Digg'), et qu'elle est écrite directement sur le code HTML et liée via onclick.
Cette fonction est donc une fonction globale et peut être appelée partout, alors qu'est-ce que cela signifie ?
Cela signifie que nous pouvons la modifier, tout comme une variable globale, vous pouvez la modifier n'importe où, n'est-ce pas, donc la fonction globale devrait également être la même.
Nous pouvons donc le modifier directement en fonction vide.
votePost = function () {}; ou votePost = $.noop fonctionnent tous les deux. $.noop est une fonction vide fournie par jQuery pour notre commodité.

VotePost est désormais une fonction vide, donc rien ne se passera lorsque vous cliquerez sur le bouton Recommander.
Bien sûr, cela prendra à nouveau effet après avoir actualisé la page. Nous déboguons simplement les modifications sur la page sans modifier le code source du parc de blogs, il est impossible de prendre effet de manière permanente.
Le débogage signifie donc le processus de recherche et d'élimination des erreurs. Si la source de l'erreur est localisée, modifiez-la, puis testez-la. Si elle est erronée, actualisez-la et modifiez-la à nouveau, afin qu'il ne soit pas nécessaire de modifier le fichier lui-même. le rendre irrécupérable.

C'est tout pour aujourd'hui. En fait, il y a très peu de fonctions globales directes à déboguer, car jQuery est maintenant populaire et diverses liaisons de clics, de clics et d'autres événements rendent le positionnement du code source très fastidieux.
Heureusement, j'ai déjà écrit un article analysant ce problème plus en détail. Pour plus de détails, veuillez vous référer à "Une brève discussion sur les problèmes de positionnement du code source des événements jQuery"
. Je ne connais pas d'autres frameworks, donc je ne les ai pas analysés, mais les idées sont en fait similaires et il doit y avoir un mécanisme de gestion des événements.

Il n'y a pas beaucoup de points de connaissances aujourd'hui, mais il faut les consolider par soi-même, sinon vous les oublierez instantanément.

Exercices après les cours :
1. Analysez comment la fonction votePost est implémentée et recommandée.
2. Débogage dynamique et analyse de votePost. (Doit être combiné avec la connaissance du point d'arrêt)

Demain, je vais parler des points d'arrêt et du débogage dynamique. Je n'ai pas trouvé de sujet approprié, donc je vais me contenter de celui-ci. Si vous avez quelque chose de approprié qui nécessite un débogage dynamique, veuillez laisser un commentaire. .