Préface: le code de débogage est indispensable pour tout programmeur. Que vous soyez un maître ou un novice, les programmes de débogage sont une tâche indispensable. De manière générale, les programmes de débogage sont effectués après avoir écrit du code ou lors de la modification des bogues pendant les tests. Il est souvent préférable de refléter le niveau du programmeur et la précision de l'analyse des problèmes pendant le code de débogage. De nombreux débutants ignorent toujours le problème lorsque vous recherchez la cause de l'erreur, passant beaucoup de temps mais incapable de résoudre certains bogues qui s'avèrent finalement assez simples. La maîtrise de diverses compétences de débogage atteindra certainement deux fois le résultat avec la moitié de l'effort de travail. Par exemple, localisez rapidement les problèmes, réduisez la probabilité d'échec, aidez à analyser les erreurs logiques, etc. Aujourd'hui, lorsque le développement frontal d'Internet devient de plus en plus important, il est particulièrement important de réduire les coûts de développement, d'améliorer l'efficacité du travail et de se développer et de déboguer les compétences de développement frontal dans le développement frontal.
Cet article expliquera diverses techniques de débogage JS frontal une par une. Peut-être que vous les avez maîtrisés, alors passons-les ensemble. Il y a peut-être des méthodes que vous n'avez jamais vues auparavant. Vous pourriez aussi bien les apprendre ensemble. Peut-être que vous ne savez pas comment déboguer. Profitez de cette occasion pour combler l'écart.
1. Alerte, maître de débogage arout
C'est à ce moment-là que Internet commençait, et le front-end de la page Web concernait principalement l'affichage du contenu, et les scripts du navigateur ne pouvaient fournir que des fonctions auxiliaires très simples pour la page. À cette époque, les pages Web étaient principalement exécutées dans les navigateurs dominés par IE6, et la fonction de débogage de JS était encore très faible, ils ne pouvaient donc être débogués que par la méthode d'alerte intégrée dans l'objet Window. À ce moment-là, cela aurait dû ressembler à ceci:
Il convient de noter que l'effet observé ici n'est pas l'effet observé dans le navigateur IE à l'époque, mais l'effet dans la version supérieure de IE. De plus, il ne semblait pas y avoir de console de telle avancée à l'époque, et l'utilisation de l'alerte était également dans le code JS de la page réelle. Bien que la méthode d'alerte de débogage soit très primitive, elle avait sa valeur indélébile à ce moment-là, et même aujourd'hui, il a sa place à utiliser.
2. La nouvelle génération de console King de débogage
Comme JS peut faire de plus en plus de choses dans le Web Front-end, la responsabilité est de plus en plus grande, et le statut devient de plus en plus important. La méthode de débogage d'alerte traditionnelle n'a progressivement pas respecté les différents scénarios de développement frontal. De plus, les informations de débogage sont apparues par la méthode de débogage d'alerte n'est vraiment pas belle et bloqueront un contenu de page, ce qui n'est vraiment pas amical.
D'un autre côté, les informations de débogage de l'alerte doivent être ajoutées à la logique du programme telle que "alert (xxxxx)" pour fonctionner normalement, et Alert entravera le rendu continu de la page. Cela signifie qu'après la fin du débogage du développeur, il doit effacer manuellement ces codes de débogage, ce qui est vraiment gênant.
Par conséquent, la nouvelle génération de navigateurs Firefox, Chrome et IE a successivement lancé des consoles de débogage JS, soutenant l'utilisation d'un formulaire similaire à "Console.log (xxxx)" pour imprimer des informations de débogage sur la console sans affecter directement l'affichage de la page. Prenez IE comme exemple, il ressemble à ceci:
Ok, au revoir à la boutique pop-up d'alerte laide. L'étoile montante, dirigée par Chrome, a élargi les fonctionnalités plus riches à la console:
Pensez-vous que cela est satisfaisant? L'imagination de l'équipe de développement de Chrome est vraiment admirable:
Ok, j'ai dit un peu plus hors sujet. En bref, l'émergence d'objets de console intégrés sur la console et le navigateur a apporté une grande commodité au développement et au débogage frontal.
Certaines personnes peuvent demander: ce code de débogage doit-il être nettoyé une fois le débogage terminé?
En ce qui concerne ce problème, si vous avez une vérification de l'existence avancée avant d'utiliser l'objet Console, cela ne causera pas de dommage à la logique métier sans suppression. Bien sûr, afin de garantir le code soigné, une fois le débogage terminé, ces codes de débogage qui ne sont pas liés à la logique commerciale doivent être supprimés autant que possible.
3. JS Débogage du point d'arrêt
BreakPoint, l'une des fonctions du débogueur, permet d'interrompre les interruptions du programme si nécessaire, facilitant ainsi son analyse. Vous pouvez également définir des points d'arrêt en un seul débogage. La prochaine fois, il vous suffit de laisser le programme s'exécuter automatiquement vers la position Set Breakpoint, et vous pouvez l'interrompre à la dernière position de point d'arrêt de set, ce qui facilite considérablement le fonctionnement et gagne du temps. - Encyclopédie-Baidu
Le débogage de points d'arrêt JS signifie l'ajout de points d'arrêt au code JS dans les outils de développeur de navigateur, permettant à l'exécution de JS de s'arrêter à un emplacement spécifique, ce qui facilite les développeurs à analyser et un traitement logique des segments de code là-bas. Afin d'observer l'effet du débogage des points d'arrêt, nous préparons à l'avance un morceau de code JS:
Le code est très simple, il s'agit de définir une fonction, de passer en deux nombres, d'ajouter un entier aléatoire désordonné, puis de renvoyer la somme des deux nombres. Prenant l'exemple des outils de développeur Chrome, jetons un coup d'œil aux méthodes de base du débogage du point d'arrêt JS.
3.1. Sources de point d'arrêt
Tout d'abord, dans le code de test, nous pouvons voir que le code devrait fonctionner normalement via les résultats de sortie de la console dans la figure ci-dessus, mais pourquoi devrait-il être? Parce qu'un nombre aléatoire est ajouté à la fonction, le résultat final est-il vraiment correct? Il s'agit d'une supposition dénuée de sens, mais supposons que je vais vérifier maintenant: les deux nombres ont passé dans la fonction, le nombre aléatoire ajouté et la somme finale. Alors, comment fonctionner?
Méthode 1, la plus courante mentionnée ci-dessus, que ce soit en utilisant une alerte ou une console, nous pouvons le vérifier de cette manière:
D'après la figure ci-dessus, nous avons ajouté trois lignes de code de console au code pour imprimer les variables de données dont nous nous soucions. En fin de compte, nous pouvons clairement vérifier si l'ensemble du processus de calcul est normal, puis répondre aux exigences de vérification définies par notre question.
La méthode 2 et la méthode 1 présentent des inconvénients évidents dans le processus de vérification, c'est-à-dire que beaucoup de code redondant est ajouté. Ensuite, examinons si l'utilisation de points d'arrêt pour la vérification est plus pratique. Tout d'abord, voyez comment ajouter des points d'arrêt et quel effet est après le point d'arrêt:
Comme le montre la figure, le processus d'ajout de points d'arrêt à un morceau de code est de "F12 (Ctrl + Shift + I) Ouver des outils de développement" - "Cliquez sur Menu des sources" - "Trouvez le fichier correspondant dans l'arborescence de gauche" - "Cliquez sur la colonne du numéro de ligne" pour compléter l'ajout / suppression des points de rupture dans la ligne actuelle. Lorsque le point d'arrêt est ajouté, actualisez l'exécution de la page JS s'arrête à la position du point d'arrêt. Dans l'interface des sources, vous verrez toutes les variables et valeurs dans la portée actuelle. Vérifiez simplement chaque valeur pour remplir nos exigences de vérification.
Le problème est là. Si vous faites attention, vous constaterez que lorsque mon code atteint un point d'arrêt, les valeurs des variables A et B affichées ont été ajoutées. Nous ne pouvons pas voir les 10 et 20 initiaux passés lors de l'appel de la fonction de somme. Alors que dois-je faire? Cela vous oblige à revenir en arrière et à apprendre une connaissance de base du débogage des points d'arrêt. Après avoir ouvert le panneau Sources, nous verrons en fait le contenu suivant dans l'interface. Nous suivons la piste de la souris pour voir ce que cela signifie:
De gauche à droite, les fonctions représentées par chaque icône sont:
Exécution du script PAUSE / CV: Pause / CV Exécution du script (l'exécution du programme s'arrête au prochain point d'arrêt).
ÉTAPEZ-LE SECTION CALL FONCTION: Exécutez l'appel de la fonction à l'étape suivante (passez à la ligne suivante).
Entrez dans l'appel de la fonction suivante: entrez la fonction actuelle.
Sortez de la fonction de courant: Sortez de la fonction d'exécution actuelle.
Déactif / actif Tous les points d'arrêt: éteignez / sur tous les points d'arrêt (non annulés).
Pause sur les exceptions: paramètre de point d'arrêt automatique pour les exceptions.
À ce stade, les clés de fonction pour le débogage des points d'arrêt ont été presque introduites. Ensuite, nous pouvons consulter notre code de programme ligne par ligne pour voir les modifications de chaque variable après l'exécution de chaque ligne, comme indiqué dans la figure ci-dessous:
Comme mentionné ci-dessus, nous pouvons voir l'intégralité du processus des variables A et B de la valeur initiale à l'ajout d'une valeur aléatoire au milieu, puis en calculant enfin la somme et en sortant le résultat final. Ce n'est pas un problème de compléter les exigences de vérification du paramètre de question.
Pour les touches de fonction restantes, nous modifions légèrement notre code de test et utilisons un diagramme GIF pour démontrer leur utilisation:
Une chose à noter ici est que la fonction d'impression des valeurs de variables directement dans la zone de code est une nouvelle fonctionnalité ajoutée dans la nouvelle version de Chrome. Si vous utilisez toujours une ancienne version de Chrome, vous ne pourrez peut-être pas afficher les informations variables directement sous des points d'arrêt. Pour le moment, vous pouvez déplacer la souris vers le nom de la variable et faire une pause pendant une courte période, et la valeur variable apparaîtra. Vous pouvez également sélectionner le nom de la variable avec la souris, et cliquez avec le bouton droit sur "Ajouter à Watch" pour le voir dans le panneau de montre. Cette méthode s'applique également aux expressions. De plus, vous pouvez également passer au panneau de console aux points d'arrêt, entrez le nom de la variable directement dans la console et entrez les informations variables. Cette partie est relativement simple, compte tenu de la durée de l'article, et ne faisant pas de photos et de démonstrations.
3.2. Point d'arrêt du débogueur
Le soi-disant point d'arrêt du débogueur est en fait nommé par moi, et je ne sais pas comment dire des termes professionnels. Plus précisément, en ajoutant un «débogueur»; Instruction au code, il cassera automatiquement les points lorsque le code exécutera l'instruction. La prochaine opération est presque exactement la même que l'ajout de débogage de points d'arrêt dans le panneau Sources. La seule différence est que la déclaration doit être supprimée après le débogage.
Étant donné que la même façon de définir les points d'arrêt est différent, la fonction est la même que l'ajout de points d'arrêt au panneau Sources, pourquoi cette méthode existe-t-elle encore? Je pense que la raison devrait être la suivante: nous rencontrons occasionnellement le chargement asynchrone des fragments HTML (y compris le code JS intégré) dans le développement, et cette partie du code JS ne peut pas être trouvée dans les espèces d'arbres de sources, nous ne pouvons donc pas ajouter directement des points de rupture dans l'outil de développement. Ensuite, si nous voulons ajouter des points d'arrêt au script chargé de manière asynchrone, "Debugger"; fonctionnera à ce moment. Voyons directement son effet à travers le diagramme GIF:
4. DOM DÉBUGGING DE Point d'arrêt
Dom Breakpoint, comme son nom l'indique, est d'ajouter des points d'arrêt à l'élément DOM pour atteindre le but de la débogage. L'effet de l'utilisation de points d'arrêt dans l'utilisation réelle est finalement implémenté dans JS Logic. Jetons un coup d'œil aux effets spécifiques de chaque point d'arrêt DOM.
4.1. Break on Sous-Sousfre Modifications Lorsque les nœuds enfants à l'intérieur du nœud changent (casser les modifications de sous-arbre)
Aujourd'hui, lorsque le développement frontal devient de plus en plus complexe, le code JS frontal devient de plus en plus complexe, et une page Web apparemment simple s'accompagne généralement de grands segments de code JS, impliquant de nombreuses opérations d'ajout, de supprimer et de modifier les nœuds DOM. Il est inévitable qu'il soit difficile de localiser les segments de code directement via le code JS, mais nous pouvons rapidement localiser les nœuds DOM pertinents via le panneau Elements de l'outil de développeur. Pour le moment, il est particulièrement important de localiser les scripts via des points d'arrêt DOM. Jetons un coup d'œil à la démonstration du GIF:
La figure ci-dessus démontre les effets de l'ajout, de la suppression et de l'échange d'opérations d'ordre déclenchant des points d'arrêt pour les nœuds enfants UL (LI). Mais il convient de noter que la modification des attributs et du contenu des nœuds enfants ne déclenchera pas les points d'arrêt.
4.2. Break on Attributs Modifications
D'un autre côté, à mesure que la logique métier du traitement frontal devient de plus en plus complexe, la dépendance du stockage de certaines données devient de plus en plus forte. Le stockage des données temporaires dans les propriétés (personnalisées) du nœud DOM est une méthode préférée pour les développeurs dans de nombreux cas. Surtout après que la norme HTML5 a amélioré la prise en charge des attributs personnalisés (par exemple: ensemble de données, données- *, etc.), de plus en plus de paramètres d'attribut sont appliqués, de sorte que les outils de développeur Chrome fournissent également un support de point de rupture d'attribut, et les effets sont à peu près comme suit:
Cette méthode doit également être notée que toute opération sur les propriétés du nœud enfant ne déclenchera pas le point d'arrêt du nœud lui-même.
4.3. Break on Node Retirant
Ce paramètre de point d'arrêt DOM est très simple et la méthode de déclenchement est très claire - lorsque le nœud est supprimé. Ainsi, le cas doit donc être lors de l'exécution de l'instruction "ParentNode.RemoveChild (ChildNode)". Cette méthode n'est pas beaucoup utilisée.
Ce que nous avons introduit plus tôt, c'est essentiellement les méthodes de débogage que nous utilisons souvent dans le développement quotidien. Ils peuvent faire face à presque tous les problèmes de notre développement quotidien lorsqu'ils sont utilisés correctement. Cependant, les outils du développeur prennent également en compte plus de situations et fournissent plus de moyens de point de rupture, comme le montre la figure:
5. Points d'arrêt XHR
Le développement front-end a subi des changements à la terre ces dernières années, de sa réputation inconnue à sa prospérité actuelle, Ajax pilote des applications Web riches et les applications mobiles WebApp à une seule page sont en plein essor. Tout cela est inséparable de l'objet XMLHTTPRequest, et "XHR Breakpoints" est une fonction de débogage de points d'arrêt conçu à des fins asynchrones.
Nous pouvons ajouter une condition de point d'arrêt au point d'arrêt asynchrone à travers le signe "+" à droite des "points d'arrêt XHR". Lorsque l'URL lorsque la demande asynchrone est déclenchée, la logique JS générera automatiquement un point d'arrêt. La position du point d'arrêt n'est pas démontrée dans l'animation de démonstration, car la démo utilise la méthode Ajax encapsulée par jQuery. Le code a été compressé et il n'y a aucun effet. En fait, le point d'arrêt XHR est généré par l'instruction "xhr.send ()".
La puissance des points d'arrêt XHR est que nous pouvons personnaliser les règles de point d'arrêt, ce qui signifie que nous pouvons définir des points d'arrêt pour un certain lot, un certain, et même toutes les demandes asynchrones, ce qui est très puissant. Cependant, il semble que cette fonction ne soit pas beaucoup utilisée dans le développement quotidien, du moins je ne l'utilise pas beaucoup. Pensez-y, il y a environ deux raisons: premièrement, ce type de débogage des points d'arrêt n'est pas beaucoup impliqué dans les affaires quotidiennes; Deuxièmement, la majeure partie du développement frontal à ce stade est basée sur le cadre JS, et la jQuery la plus élémentaire a également bien encapsulé l'AJAX. Peu de gens résument eux-mêmes les méthodes de l'Ajax. Afin de réduire la taille du code, le projet choisit généralement des bases de code compressées, ce qui rend le suivi de point d'arrêt XHR relativement moins facile.
6. Points de pause de l'auditeur d'événements
L'événement d'événement BreakPoint, c'est-à-dire que le paramètre de point d'arrêt est effectué en fonction du nom de l'événement. Lorsque l'événement est déclenché, le point d'arrêt est à l'emplacement où l'événement est lié. Les points d'arrêt des écouteurs d'événements répertorient tous les événements de page et de script, y compris: souris, clavier, animation, minuterie, xhr, etc. Il réduit considérablement la difficulté de déboguer la logique commerciale dans les événements.
L'exemple de démonstration démontre l'effet de point d'arrêt lorsque l'événement de clic est tiré et lorsque Settimeout est défini. L'exemple montre qu'après la sélection du point d'arrêt de l'événement de clic, le point d'arrêt est déclenché lorsque les deux boutons sont cliqués, et lorsque Settimeout est défini, le point d'arrêt de "Timer" est déclenché.
Le débogage est une partie très importante du développement du projet. Cela peut non seulement nous aider à localiser rapidement les problèmes, mais aussi nous faire gagner du temps de développement. Des compétences dans diverses méthodes de débogage apporteront certainement de nombreux avantages à votre développement de carrière. Cependant, avec tant de méthodes de débogage, comment en choisir une pour votre scénario d'application actuel nécessite une expérience et des tentatives continues pour s'accumuler.
Après avoir écrit cela, on peut dire essentiellement qu'il est sorti en plein essor. J'espère que cela pourra attirer votre attention, et j'espère que cela pourra vous faire sentir un peu touché et vous sentir un peu familier. La chose la plus importante est que j'espère que vous pourrez rapidement améliorer vos compétences et devenir une personne qualifiée!