Améliorez vos compétences de débogage avec Chrome DevTools (Partie 2)
Dans cet article, nous couvrons les techniques avancées utilisant Chrome DevTools, qui amélioreront encore les compétences acquises dans la première partie de cette série.
Avez-vous maîtrisé la manière d'inspecter le code HTML généré et les CSS appliqués? Avez-vous confiance dans le débogage de JavaScript dans le navigateur? J'espère que oui, car dans ce post, nous couvrons des techniques avancées utilisant les Chrome DevTools qui amélioreront encore les compétences que nous avons obtenues dans Partie 1 .
compétences, nous allons expérimenter avec des exemples de base avec les widgets Kendo UI et, à la fin de ce post, vous trouverez un exemple réel pour pratiquer vos compétences nouvellement acquises avec l'aide du jQuery Grid .
Dans cet article
Achèvement de code intelligent et achèvement automatique
La complétion de code intelligente et l'auto-complétion sont des fonctions populaires dans les EDI qui améliorent la productivité des développeurs. Dans Chrome 68, l'équipe de DevTools a décidé d'intégrer des fonctionnalités similaires dans la console . Plus précisément, Évaluation avérée Indication automatique après exécution de fonction et Indices d'argument .
Supposons la fonction suivante pour voir comment ces fonctionnalités fonctionnent: [19659008] test de fonction (yourValue) {
revenir {
valeur: votre valeur,
multiplié: votre valeur * 3
};
}
Evaluation enthousiaste
Voici ce que Chrome DevTools affichera dans la Console avec le Eager Evaluation activé:
Cette fonctionnalité active l'expression évaluation du code dans la console à condition que l'expression n'ait pas d'effets secondaires (c'est-à-dire que l'exécution ne fait rien d'autre que de renvoyer une valeur). Vous pouvez en savoir plus sur les effets secondaires de la question, Fermetures de JavaScript et effets secondaires en anglais? sur le débordement de pile.
Astuce: Vous avez aussi une telle évaluation lorsque vous ouvrez l'onglet Source en mode de débogage et survolez ou mettez en surbrillance une expression
Auto-Complete After Execution Function
Cette fonctionnalité repose sur Eager Evaluation et la même limitation s'applique à cause de l'absence d'auto-complétion disponible si la fonction a des effets secondaires.
Astuce: Enregistrez le résultat de la fonction dans une variable (voir Récupérez IntelliSense pour l'objet côté client ) et exécutez la fonction dans Console pour vérifier le résultat
Utilisez ensuite l'API de la console et enregistrez l'expression dans une variable sous la forme var lastEvaluatedExpression = $ _; .
Arguments Hints
pop-up qui affiche les arguments éligibles que vous pouvez transmettre fr Vous écrivez le code pour appeler une fonction dans la console ou ouvrez / survolez ses crochets.
Accédez facilement aux éléments sélectionnés et aux expressions exécutées
Dans la section précédente, j'ai référencé une variable $ _ sans expliquer ce qu'il fait. Ce n'est pas magique; cela fait partie de l'API de ligne de commande intégrée. Chrome DevTools assignera des objets et des expressions à une liste de variables prédéfinies. Par exemple, l'expression 40 + 2 sera évaluée à 42 . Pour plus de commodité, je souhaiterais peut-être accéder à ce résultat sans avoir à me souvenir d’un nom de variable ou de l’expression qui l’a créé, ou qui a passé 7,5 millions d’années à le calculer . Avec Chrome DevTools, vous pouvez maintenant utiliser simplement la variable $ _ .
L'API de ligne de commande de Chrome DevTools enregistre certains objets et résultats d'expression dans des variables prédéfinies. Les autres raccourcis utiles fournis par la Console sont $ 0 $ 1 $ 2 $ 3 et $ 4. . $ 0 fait référence au dernier élément sélectionné dans le panneau Elements $ 1 fait référence à l'élément précédent, etc. Cela peut être très utile lorsque vous avez besoin d'une référence à l'élément DOM qui représente un contrôle ou un widget et que vous souhaitez vérifier rapidement ses membres disponibles.
Essayons ceci avec la démonstration de PanelBar pour l'interface utilisateur Kendo où nous accédons au premier élément et le basculons:
Astuce: Chrome DevTools peut vous aider avec les modifications HTML et DOM que votre application fait et vous donner un indice peut l'optimiser (voir Rendu rapide de liste rapide en angulaire )
Les info-bulles peuvent être difficiles à inspecter car elles disparaissent après un certain temps. Il peut être tout aussi difficile d’inspecter d’autres types d’éléments de masquage automatique, comme ceux qui sont affichés lors d’une intervention de l’utilisateur (par exemple, un clic de souris et un glissement). Historiquement, j'ai dû utiliser un code laid pour les référencer et les inspecter. Entrez setTimeout () et le débogueur.
La responsabilité de setTimeout () consiste à exécuter une logique spécifique après une période donnée. Une autre caractéristique est qu'il réordonne l'exécution des fonctions. Cela s'avère pratique lorsque vous devez exécuter une fonction après quelques animations rapides (voir Pourquoi setTimeout (fn, 0) peut-être utile? ).
Une fois que nous comprenons mieux ce qui se passe setTimeout () nous pouvons combiner sa puissance avec l'instruction debugger afin d'activer le mode de débogage lorsque l'élément de masquage automatique est affiché sans craindre qu'il disparaisse si nous clignotons.
L'animation ci-dessous montre comment nous pouvons inspecter l'info-bulle en évaluant setTimeout (function () {debugger;}, 3000) dans la console :
Cette image (ci-dessus) dispose de l'API de dessin et de Tooltip widget de l'interface utilisateur de Kendo.
Astuce: Pour enregistrer l'élément modifié une fois modifié, collez le code suivant dans la console : window.focusedelement;
setInterval (function () {if (window.focusedElement! = document.activeElement) {window.focusedElement = document.activeElement; console.log (document.activeElement)}})
Pour effacer l'intervalle, rechargez le clearInterval () :
Explorons d'autres approches pour briser l'exécution de la page et vérifier les valeurs actuelles des variables.
DOM Change Breakpoints
casser lorsque la structure ou les attributs de l'élément DOM sélectionné changent ou qu'il est supprimé via JavaScript. Pour basculer cette fonctionnalité: cliquez avec le bouton droit de la souris sur l'élément dans le panneau Eléments, survolez Break dans le menu contextuel et sélectionnez «Modifications de sous-arborescence», «Modifications d'attributs» ou «Suppression de nœuds».
Points d'arrêt XHR / Fetch
Ils se cassent lorsque l'URL de la demande contient la chaîne configurée pour le point d'arrêt. Pour basculer cette fonctionnalité: développez le volet Points d'arrêt XHR dans le panneau Sources, cliquez sur le bouton Ajouter un point d'arrêt et entrez la partie d'URL souhaitée.
Points d'arrêt du programme d'écoute d'événement
Ceux-ci se brisent lorsque l'événement de souris, clavier, périphérique, animation, etc. souhaité est déclenché. Pour basculer cette fonctionnalité: développez Points d'arrêt des écouteurs d'événement dans l'onglet Sources et vérifiez les événements (catégorie de) souhaités.
Points d'arrêt d'exception
Ceux-ci se brisent lorsqu'une exception traitée ou non gérée est levée. Pour basculer cette fonctionnalité: cliquez sur le bouton Pause on Exception dans l'onglet Sources; Lorsque ces exceptions sont activées, une option supplémentaire permettant de mettre en pause les exceptions détectées est disponible.
Une fois familiarisé avec les points d'arrêt, vous pouvez activer plusieurs points. sauter la plupart d'entre eux. Dans ce cas, vous pouvez utiliser l'une des possibilités pour continuer l'exécution de la page sans interruption:
- Cliquez sur le bouton Continuer pour afficher une liste déroulante et choisissez le bouton Continuer sans interruption
- Fermez rapidement les Chrome DevTools en appuyant sur F12
L'onglet Sources comporte quelques autres volets à mentionner:
- Onglet Expressions de surveillance: permet de surveiller les valeurs des variables ou les évaluations d'expressions au fil du temps
- le chemin d'exécution, dans l'ordre chronologique inverse, qui a amené le code à ce point d'arrêt
- Volet Portée: indique quelles variables locales et globales sont actuellement définies
Contextes d'exécution dans Chrome DevTools
] ReferenceError (indiquant que la fonction n'est pas définie) en essayant d'exécuter une fonction déjà déclarée dans la console du navigateur? Vous n'êtes pas seul, cela arrive à tout le monde.
Une des raisons pour lesquelles vous recevez une telle erreur pourrait être que la page contenant le script est chargée dans un