Les articles précédents ont introduit une connaissance de base de la série de débogage JS. Cette fois, les frères Bragled Code vous ont apporté des points d'arrêt JS et des méthodes de débogage dynamique. Les amis qui en ont besoin peuvent y faire référence.
Exercices après classe que j'ai quitté hier 1. Analyser comment la fonction VotePost est mise en œuvre comme recommandé.
En fait, nous avons vu le code source. Il suffit de lire le code source et vous pouvez savoir comment il est implémenté.
fonction VoTEPOST (n, t, i) {i || (i =! 1); var r = {blogApp: currentBlogApp, postid: n, VoteType: t, isabandoned: i}; $ ("# digg_tips"). css ("couleur", "rouge"). html ("commit ..."); $ .ajax ({URL: "/mvc/vote/voteblogpost.aspx", type: "Post", type de données: "JSON", ContentType: "Application / JSON; charset = utf-8", data: json.strifify (r), succès: function (n) {if (n.issuccess) {var i = $ ("" # # + T. "_Count"); && (n.status == 500? $ ("# digg_tips"). html ("Désolé! Une erreur s'est produite! S'il vous plaît comment les commentaires à [email protected]"): $ ("# digg_tips"). }C'est presque comme ça.
PS: J'utilise le code formaté de texte sublime, qui est un peu différent du résultat après la mise en forme de la console Chrome.
Vous pouvez également essayer cet outil de formatage en ligne, l'effet est similaire: JavaScript en ligne
Après avoir simplement lu le code simplement, vous pouvez à peu près savoir que cette fonction a 3 paramètres. Le premier est postid, qui est l'ID de l'article, et le second est la recommandation (Digg) ou l'opposition (Bury).
Mais le troisième n'a pas été utilisé, et la valeur par défaut est fausse
En regardant vers le bas, il affiche la chaîne "Soumettre ..." à #DIGG_TIPS, puis soumet les données à l'arrière-plan via AJAX.
Après le renvoi des données, si N.issuccess est vrai, il +1 sur l'ID de nombre correspondant de like (#DIGG_COUNT) ou d'objection (#bury_count).
Cependant, si la valeur d'Isabandoned est vraie, comptez -1.
Ensuite, nous pouvons deviner que le troisième paramètre est utilisé pour révoquer la recommandation ou l'objection. En termes simples, j'ai cliqué sur la recommandation, mais je ne veux pas le recommander maintenant. Je peux passer le troisième paramètre fidèle pour réaliser l'effet de l'annulation de la recommandation.
Tessons-le plus tard.
Ensuite, les informations N.Message renvoyées par le serveur s'affichent sur #DIGG_TIPS.
Si une erreur se produit dans AJAX, elle est 500. Il invitera "Désolé! Une erreur s'est produite! Veuillez faire des commentaires à [email protected]" Les autres statuts invitent directement le serveur pour le message d'erreur renvoyé.
C'est le processus général, car cette fonction est simple, elle peut être vue en un coup d'œil.
Certains nouveaux amis ont peut-être demandé, comment savez-vous quelle valeur est Currentblogapp, n, t, i?
Ensuite, passons à l'étape suivante et au débogage dynamique. Le débogage dynamique est une méthode très utile pour les projets compilés.
Localisez d'abord le code source de Votepost, (je l'ai dit hier et je ne le comprends pas beaucoup, puis revenez en arrière et jetez un coup d'œil en premier.)
Si facile, nous avons localisé le code source.
Ensuite, nous cliquons sur le numéro 92 et effectuons l'opération de point d'arrêt.
Pourquoi ne pas les points d'arrêt à la ligne 91?
Étant donné que la ligne 91 est la pièce de déclaration de fonction, nous ne pouvons pas définir un point d'arrêt, nous pouvons définir un point d'arrêt au code à exécuter par la fonction.
Voyant que le nombre de lignes de ligne 91 est devenu bleu, indiquant qu'il y a eu un point d'arrêt à cet endroit. Dans le même temps, nous pouvons voir les points d'arrêt abattus dans la colonne des points d'arrêt à droite.
La colonne des points d'arrêt gère tous les points d'arrêt, qui peuvent être facilement redirigés vers la position de point d'arrêt correspondant, et seront utilisés à l'avenir.
Maintenant que nous avons fini de définir le point d'arrêt, nous cliquerons sur la recommandation. . (Même si j'ai l'impression de tromper les recommandations, je ne le pensais vraiment pas. Je viens de trouver un bouton pour s'entraîner.)
Lorsque vous cliquez sur le bouton de recommandation, quelque chose de magique s'est produit. Au lieu d'exécuter la fonction de recommandation, vous avez sauté au point d'arrêt que nous venons de baisser dans le panneau Sources de la console.
Maintenant, vous pouvez non seulement voir la variable actuelle dans la colonne des variables de portée à droite, mais également déplacer la souris directement vers n'importe quelle variable pour afficher la valeur de la variable.
La colonne des variables de portée affiche la portée actuelle et sa portée parentale, ainsi que les fermetures.
N'est-ce pas super pratique? . (Les variables de portée m'ont beaucoup aidé lorsque j'ai appris la fermeture pour la première fois.)
Passons à l'étape suivante et appuyons sur F10 3 fois pour voir quelque chose comme ça.
Chaque fois que nous appuyons sur F10, nous exécuterons une instruction. Après l'avoir appuyé 3 fois tout à l'heure, nous exécuterons $ ("# digg_tips"). CSS ("Color", "Red"). Html ("Soumider ...");
Nous pouvons donc voir les #DIGG_TIPS afficher les mots dans la soumission de la page.
Mais lorsque nous appuyons à nouveau F10, nous avons constaté qu'il continuait de s'exécuter tout le long sans entrer dans la fonction de rappel à l'intérieur d'Ajax.
C'est une question déroutante, et je veux me concentrer dessus.
Pour les fonctions de rappel comme celle-ci, en particulier asynchrones, nous devons ensuite le point d'arrêt à l'intérieur de la fonction de rappel.
Nous pouvons donc simplement définir un point d'arrêt sur la ligne 96. Maintenant, nous cliquons sur la recommandation et nous nous arrêtons toujours à la ligne 92. Nous pouvons simplement appuyer sur F8 et le casser à la fonction de rappel AJAX.
Maintenant, nous pouvons déboguer les données de rappel, et nous pouvons également constater qu'il y a une fermeture supplémentaire dans les variables de portée à droite, qui est la fermeture.
Si vous ne pouvez pas le comprendre maintenant, passez-le simplement. Cette chose doit être introduite dans une grande quantité de temps, et elle ne peut pas être expliquée en quelques mots. Quoi qu'il en soit, la console est très puissante.
Tout en voyant la fermeture, nous voyons également les données de retour n d'Ajax. Il est évident que ma propriété émetteur est fausse et n'a pas réussi car elle renvoie un message "ne peut pas recommander votre propre contenu".
N'est-ce pas très intéressant? Le débogage dynamique facilite la recherche de bugs?
Ensuite, expérimentons le troisième paramètre.
Nous entrons dans Votepost (CB_ENTRYID, «DIGG», true); et appuyez sur Entrée.
Il s'est également arrêté au point de rupture de la ligne 92, donc il ne déboguera pas et entrera directement la fonction de rappel AJAX de F8.
Ici, nous voyons clairement que lorsque le troisième paramètre est vrai, la recommandation est en effet annulée. Dans le même temps, vous pouvez voir que le numéro de recommandation est en effet -1, même s'il est actualisé.
Cette fois, nous avons utilisé deux touches de raccourci F10 et F8. Nous les présenterons en détail demain. Aujourd'hui, nous apprendrons d'abord le débogage de base.
Exercices après classe: (améliorer la difficulté)
1. Consultez le bouton de commentaire Soumettre pour les commentaires ci-dessous et trouvez son événement. (jQuery Bound)
2. Déboguez dynamiquement le processus d'exécution de cet événement de commentaire de soumission.
Si vous ne connaissez pas cet exercice, il est recommandé de lire "une brève conversation sur les questions du positionnement du code source de l'événement jQuery" pour une analyse détaillée.
Cet article vient de: Blog Garden Blogger’s Bragled Article. http://www.cnblogs.com/52cik/