Share
Dans la première partie, nous avons vu comment écrire et exécuter du JavaScript à l’aide de DevTools. Dans la deuxième partie, nous examinerons le débogage de JavaScript et l’adoption d’un flux de travail permettant de résoudre plus efficacement les erreurs JavaScript et de diagnostiquer les problèmes..
Vous pouvez utiliser le mot clé debugger directement dans votre code pour appeler les fonctionnalités de débogage (le cas échéant) du moteur d'exécution JavaScript. L'effet de l'ajout du mot clé débogueur dans votre code est identique à la définition manuelle d'un point d'arrêt via l'interface utilisateur de DevTools. Dans Chrome, le débogueur le mot clé n'a aucun effet tant que DevTools est fermé.
Les commandes du débogueur fournissent un contrôle fin du flux de débogage. Utilisez-les lorsque vous êtes en pause à un point d'arrêt pour naviguer efficacement dans le code JavaScript. Chaque contrôle de débogueur répertorié dans cette section correspond à un bouton dans les outils de développement que vous pouvez sélectionner lorsque vous êtes en pause à un point d'arrêt..
Laisse le point d'arrêt actuel et reprend l'exécution du code normalement. Cela n'affecte pas les autres points d'arrêt qui n'ont pas encore été mis en pause.
Utilisation Continuer lorsque le point d'arrêt actuellement mis en pause n'est pas utile et que vous souhaitez que l'exécution du code reprenne normalement.
Parcourez le code ligne par ligne (une ligne par clic) jusqu'à ce qu'un appel de fonction soit atteint. À ce stade, l’appel de la fonction est "écrasé" et vous n’intervenez pas dans cet appel de fonction particulier..
Utilisation Enjamber lorsque ce que vous essayez de résoudre est couvert par la fonction actuelle et que vous n'avez pas besoin de regarder les appels de fonction externes.
Semblable à Enjamber, sauf que dans ce cas, vous accédez aux appels de fonction externes en allant à leur première ligne.
Utilisation Entrer dans lorsque vous êtes intéressé par l'exécution ligne par ligne ainsi que par les appels de fonction externes.
Quand vous entrez dans une fonction, Sors continuera à exécuter le reste du code de fonction, mais il n'est pas débogué.
Utilisation Sors lorsque vous n'avez aucun intérêt pour le reste de la fonction actuelle et que vous souhaitez continuer à déboguer en dehors de celle-ci.
La pile d'appels est active lorsqu'elle est suspendue à un point d'arrêt. Le chemin d’exécution qui mène au point d’interruption actuellement mis en pause est indiqué dans la pile d’appels, l’appel supérieur étant le plus récent..
Chaque appel dans la pile contient:
Cliquez sur n'importe quel appel dans la pile pour naviguer jusqu'à son point dans le code source avec la ligne appropriée en surbrillance. Pour copier une trace de pile dans votre presse-papiers, clic-droit sur un appel et sélectionnez Copier la trace de la pile. Dans le menu contextuel de la pile d'appels, vous pouvez également sélectionner Redémarrer le cadre.
Considérez le cas d’utilisation que le débogueur a suspendu à mi-parcours d’une fonction de rappel déclenchée par un gestionnaire d’événements click et vous essayez de déboguer pourquoi la récupération du cible ne semble pas fonctionner comme prévu.
Vous constatez qu'une tentative d'accès à la propriété cible a été effectuée dans le cadre du ce mot-clé, mais vous rappelez ensuite que c'est une propriété de l'objet événement passé en tant qu'argument à la fonction de rappel.
Vous pouvez réécrire la fonction à l'aide de Live Edit pour vérifier que vos modifications fonctionnent et que le nouveau JavaScript est injecté dans le moteur V8..
Lorsque vous écrivez un gestionnaire d’événements pour un événement tel que scroll, vous pouvez commencer par utiliser console.log pour voir à quoi ressemble l'argument passé (l'objet event). Un conseil rapide pour y parvenir est d’utiliser le monitorEvents raccourci. Collez le code suivant dans le Panneau de la console puis faites défiler la page:
monitorEvents (fenêtre, "redimensionner");
Notez que l'objet événement est enregistré dans la console, prêt pour l'inspection..
Lorsque vous souhaitez que le débogueur suspende la première ligne d'une fonction lors de son exécution, vous pouvez effectuer l'une des opérations suivantes:
Une autre technique consiste à exécuter débogage (fn) qui fait partie de l'API de ligne de commande. La fonction prend comme argument la fonction que vous souhaitez déboguer et sera interrompue à la première ligne de son exécution..
Cette technique vous permet de suspendre le débogueur lorsqu'une propriété d'un objet qui vous intéresse est accédée de quelque manière que ce soit (en lecture ou en écriture). Pour interrompre la lecture ou l’écriture d’une propriété d’un objet, exécutez ce qui suit (via la commande Panneau de la console ou Extraits):
Object.defineProperty (document.body, 'scrollTop', get: function () debugger;, set: function (val) debugger;);
Ceci applique un getter et un setter au scrollTop propriété du document.body objet. L'instruction de débogage existe dans le getter et le setter personnalisés. Vous pouvez aussi utiliser Objet.observer interrompre les ajouts de propriétés pour un objet spécifié:
var watchMe = ; Object.observe (watchMe, function () debugger;);
Le mot-clé débogueur à part, pour définir un point d'arrêt via DevTools, vous pouvez cliquer sur la ligne de code que vous souhaitez interrompre dans la gouttière. Cette méthode de définition d'un point d'arrêt comporte des fonctionnalités supplémentaires: vous définissez un point d'arrêt conditionnel qui ordonnera aux outils de développement de faire une pause à un point d'arrêt uniquement si une expression donnée a la valeur true. Par exemple, vous pouvez définir un point d'arrêt conditionnel sur pause uniquement s'il existe un argument d'erreur..
Pour définir un point d'arrêt conditionnel:
Vous pouvez également utiliser la technique du point d'arrêt conditionnel pour insérer rapidement un console.log déclaration en tant qu'expression à évaluer. Puisque console.log évalue à indéfini, DevTools ne se met pas en pause, mais comme l'expression est toujours exécutée, vous pouvez inspecter la valeur des variables de cette façon..
Lorsque le débogueur est suspendu à un point d'arrêt, vous pouvez afficher le Panneau de la console en mode tiroir en utilisant le Échapper clé. Le code que vous entrez est évalué dans le même contexte que le point auquel vous êtes mis en pause, ce qui signifie que les variables dont la portée est étendue vous seront accessibles..
Une expression de montre est un outil permettant de simplifier la technique d’inspection régulière (via console.log par exemple) de variables étendues. Regarder les expressions est un volet du panneau Sources. Vous pouvez ajouter ou supprimer des expressions de surveillance à l'aide de la commande Plus et Moins boutons. Un objet typique à surveiller est le ce objet; remarquez comment il fait référence à un objet de fenêtre global lorsque vous n'êtes pas en pause à un point d'arrêt.
Watch Expressions se mettra généralement à jour pendant que vous parcourez le code. Si ce n'est pas le cas, cliquez sur le bouton Rafraîchir bouton.
Considérez le script suivant:
Accentsconagua
fonction a () return b (); fonction b () return c (); function c () console.trace ('La trace'); retourne 42; une();
Il y a trois fonctions déclarées. Une fonction une fonction d'appels b, puis fonction b fonction d'appels c. Le script lance la chaîne avec un appel à la fonction une. le console.trace instruction enregistre dans la console une trace de pile à partir du point où la méthode a été appelée. Utiliser console.trace affiche le résultat de l’utilisation de console.trace.
Notez que les noms des fonctions et les lignes où elles sont appelées sont indiqués dans le message de trace. Vous pouvez cliquer sur le numéro de ligne à atteindre jusqu'à son point dans le code source via le panneau Sources. Cette technique fonctionne aussi pour les extraits..
Le débogueur propose différents modes de traitement des exceptions:
Lorsque vous devez déboguer un site sur lequel vous avez peu de connaissances, vous pouvez utiliser une technique de débogage différente. Dans cette approche, vous vous connectez à des événements qui, selon vous, vont être déclenchés, et vous demandez à DevTools d'interrompre ces événements si et quand ils se produisent. Il existe deux catégories de points d'entrée "extérieur> dans":
Vous avez pour tâche de déboguer une page Web, en particulier le DOM. Les nœuds sont ajoutés et supprimés au cours du cycle de vie de la page, et vous devez inspecter le JavaScript qui permet de réaliser cela. Définissez un point d'arrêt DOM en procédant comme suit:
Chaque fois que vous définissez un point d'arrêt DOM, vous pouvez facilement l'activer ou le désactiver au niveau de la Points d'arrêt DOM volet dans le Panneau d'éléments. Dans ce volet, chaque point d'arrêt que vous avez défini est répertorié et vous pouvez interagir avec ce volet des manières suivantes:
La description: Une modification de sous-arbre se produit lorsque l’arborescence d’un nœud racine (qui a le point de rupture défini) est modifiée. Cela peut inclure l'ajout ou la suppression de nœuds.
Cas d'utilisation: Un vide div Le conteneur est présent dans le DOM et une requête Ajax se produit lors du chargement de la page, qui ajoute de nouveaux nœuds au conteneur d'origine. Ajoutez un point d'arrêt de modification de sous-arbre sur le conteneur pour afficher le point exact dans le code qui ajoute de nouveaux nœuds au DOM.
Exemples de message: En pause sur un Sous-arbre modifié point d'arrêt défini sur corps, parce que son descendant p a été éliminé. Ou: en pause sur un Sous-arbre modifié point d'arrêt défini sur div # parent, car un nouvel enfant a été ajouté à ce noeud.
La description: Une modification d'attribut se déclenche lorsqu'un nom d'attribut ou une valeur sur un nœud est ajouté, supprimé ou modifié. Ceci inclut tous les attributs, tels que classe, Les données-*, ou style.
Cas d'utilisation: Un changement visuel se produit sur la page à un moment apparemment aléatoire, et vous le limitez à une classe qui est définie de manière dynamique sur l'élément body. Vous souhaitez rechercher la cause de cet ajout de classe dynamique.
Exemple de message: En pause sur un Attribut modifié point d'arrêt défini sur p.
La description: Un point d'arrêt de suppression de nœud se déclenche au point où un nœud est supprimé du parent contenant le point d'arrêt défini.
Cas d'utilisation: Vous construisez une application de liste de tâches et souhaitez vérifier que lorsqu'un utilisateur supprime une tâche, celle-ci est également supprimée du DOM. Vous pouvez définir un point d'arrêt de suppression de nœud pour vous assurer que ce problème se produit..
Exemple de message: En pause sur un Nœud supprimé div # conteneur.
Dans DevTools, vous pouvez activer un certain nombre de points d'arrêt prédéfinis du programme d'écoute d'événements. Ceux-ci offrent des points d'entrée dans le code JavaScript qui appartient à une page.
Considérons un simple à propos de: vide page. Définir un Cliquez sur point d'arrêt de l'écouteur d'événements sur cette page en procédant comme suit:
Souris Catégorie d'auditeur d'événement.Cliquez sur écouteur d'événement.Vous avez maintenant défini un point d'arrêt. Si vous cliquez sur la page, notez que rien ne se passe. Maintenant, exécutez le code JavaScript suivant dans le répertoire Panneau de la console.
document.addEventListener ('cliquez sur, console.log.bind (console))Lorsque vous définissez un point d'arrêt pour le même événement pour lequel vous avez enregistré un écouteur d'événements, le débogueur s'interrompt avant le point d'exécution du rappel de votre écouteur d'événements..
Vous pouvez enregistrer des points d'arrêt pour de nombreux types d'événements, tels que des minuteries, des événements tactiles, etc. répertoriés dans le tableau ci-dessous..
| Catégorie d'événement | Exemples d'événements |
|---|---|
Animation | requestAnimationFrame, cancelAnimationFrame, animationFrameFired |
Contrôle | redimensionner, faire défiler, zoomer, mise au point, flou, sélectionner, modifier, envoyer, réinitialiser |
Presse-papiers | copier, couper, coller, beforecopy, beforecut, beforepaste |
Mutation DOM | DOMActivate, DOMFocusIn, DOMFocusOut, DOMAttrModified, DOMCharacterDataModified, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMContentLoaded, DOMContentLoaded |
Dispositif | appareilorientation, devicemotion |
Glisser / déposer | dragenter, dragover, dragleave, drop |
Clavier | saisie au clavier, saisie au clavier, pression au clavier, saisie |
Charge | load, beforeunload, décharger, annuler, erreur, hashchange, popstate |
Souris | cliquez, dblclick, mousedown, mouseup, mouseover, mousemove, mouseout, mousewheel, wheel |
Minuteur | setTimer, clearTimer, timerFired |
Toucher | touchstart, touchmove, touchend, touchcancel |
WebGL | webglErrorFired, webglWarningFired |
La technique du "débogage de l'extérieur dans" peut être utile lorsque vous devez déboguer un site Web tiers dont la fonctionnalité est défaillante, ou même lorsque vous êtes curieux de savoir comment fonctionne un élément de la page que vous consultez..
Il existe un certain nombre d'extensions Chrome, dont beaucoup améliorent les fonctionnalités de DevTools. Une liste de fonctionnalités est disponible dans la galerie d'extensions de DevTools.
Pour les auteurs de DevTools Extension, la fonctionnalité de prétraitement JavaScript est un sujet intéressant à connaître. Le préprocesseur peut intercepter le code source JavaScript avant d'entrer dans le moteur V8, ce qui signifie que le code source JavaScript peut être modifié via DevTools avant d'entrer dans la VM, le tout à partir d'une extension..
Outre les fonctionnalités d'interception, l'API de prétraitement dispose d'un accès par programme pour le rechargement des sources de script. Une extension peut, à tout moment de son cycle de vie, recharger une source JavaScript sans recharger la page Web d'origine..
Cette section couvre quelques outils offrant un certain niveau d’intégration entre Node.js et Chrome DevTools..
Les outils de développement comportent deux parties:
Toute application peut implémenter la communication via le protocole de débogage distant et permettre à ses utilisateurs de déboguer via DevTools. L'inspecteur de nœud est l'un de ces outils. Après l'installation, vous pouvez exécuter n'importe quel script de noeud à l'aide de Node Inspector. L'outil démarre un serveur Web qui héberge le frontal DevTools. Cette version spéciale de DevTools n'utilise pas le back-end Chrome, mais plutôt celle de Node Inspector..
Comme vous pouvez le voir dans l'inspecteur de nœud, DevTools est suspendu à un point d'arrêt. La pile d'appels fait référence aux appels exécutés dans Node.js. La seule implication du navigateur ici concerne l'interface utilisateur de DevTools..
Utilisez Node Heapdump pour prendre un instantané du segment de mémoire V8 à un moment donné dans votre code. L'état actuel du segment de mémoire V8 est sérialisé et exporté dans un fichier.
Comparez deux instantanés de tas pour déterminer quels objets ne sont pas récupérés. C'est utile pour attraper les fuites de mémoire.
Voilà pour cette série en deux parties sur une expérience de débogage moderne. J'espère qu'à ce stade, vous êtes à l'aise avec la création et le débogage de JavaScript dans Chrome DevTools. Vous connaissez les flux de travail qui peuvent faciliter le débogage et vous connaissez quelques astuces pour gérer un site de production sur lequel vous n'avez pas encore travaillé. Assurez-vous d’essayer certaines des techniques que vous avez apprises ici la prochaine fois que vous aurez besoin de déboguer..
Merci pour la lecture!
