Améliorez vos compétences de débogage avec Chrome DevTools

Dans cet article, nous présentons les meilleures pratiques et astuces pour l'utilisation de Chrome Dev Tools, qui vous aideront à résoudre plus facilement les problèmes de développement d'applications Web.

Avez-vous déjà rencontré des problèmes avec JavaScript? Avez-vous déjà eu du mal à peaufiner le CSS des éléments de votre page Web? Êtes-vous ennuyé chaque fois que vous testez votre page Web sur plusieurs appareils mobiles différents?

Si la réponse à au moins l'une des questions est "oui", alors cet article de blog est fait pour vous. Découvrez nos meilleures pratiques et conseils qui vous aideront à faire face à ces difficultés et à améliorer votre performance.

En utilisant les Chrome Developer Tools (DevTools), vous pouvez facilement modifier l'apparence et la fonctionnalité de l'interface utilisateur Telerik pour les composants ASP.NET AJAX ou d'autres composants de l'interface utilisateur. comme Kendo UI widgets, à la volée. La plupart des conseils et astuces sont également applicables aux outils de développement d'autres navigateurs, et seront présentés avec l'aide du RadGrid dans l'interface utilisateur de Telerik pour ASP.NET AJAX.

Sur cette page

Inspecter le HTML généré d'un contrôle

Lorsque vous utilisez des contrôles et des composants préparés, vous devez parfois connaître la structure du code HTML généré pour vous familiariser avec son rendu afin de pouvoir l'affiner dans votre projet. Cela peut être fait en inspectant le HTML en utilisant le panneau Éléments du DevTools.

Il existe quelques approches possibles pour vérifier le rendu d'un contrôle:

• Cliquez-droit sur un élément et sélectionnez le Inspecter l'élément du menu contextuel . Cela va ouvrir les DevTools et mettre en évidence l'élément sur lequel vous avez cliqué.
• Cliquer sur le bouton Inspecter l'élément ( Ctrl + Décaler + C ) hover sur le contrôle.
• Cliquez avec le bouton droit sur sur un élément enregistré dans la console et choisissez" Révéler dans les éléments panel . "

Figure 1 . Inspecter les éléments DOM générés

Voir les styles appliqués

Lorsque vous stylisez la page, vous devez parfois modifier un peu les règles comme le remplissage, la marge ou la couleur pour obtenir une apparence parfaite. La barre latérale du panneau Eléments comporte les onglets Styles et Calculés, qui vous permettent de modifier dynamiquement les styles appliqués à l'élément sélectionné dans le panneau Eléments, et même de trouver l'origine de la règle de style. Il vous permet également de filtrer les styles, forcer différents états (: hov ) tels que plané actif centré ajouter / supprimer des classes facilement (: cls ). Cela est également utile dans les scénarios où la disposition ou l'apparence du contrôle est rompue pour découvrir quel style est en train de casser le design.

Figure 2 Voir les styles appliqués aux éléments DOM

L'onglet calculé vous donne une représentation visuelle du taille de l'élément le long des bordures, marges et bourrelets:

Obtenir la référence côté client d'un contrôle

Obtenir une référence à l'objet côté client d'un contrôle est une technique puissante et peut vous faire gagner un temps précieux, car il peut révéler toutes les propriétés et méthodes disponibles à la volée.

Essayons-le en suivant les étapes ci-dessous:

1. Inspectez le HTML rendu d'un contrôle, en utilisant la compétence que nous avons acquise plus tôt lorsque nous avons inspecté le code HTML généré par RadGrid . la valeur de l'attribut ID de l'élément dont la classe est égale au nom du contrôle (ie class = "RadGrid" ).
2. Utilise la valeur ID obtenue comme paramètre de la recherche $ () méthode. Le résultat de la méthode $ find () nous donnera une référence à l'objet client du contrôle

Figure 3 Obtenir une référence d'objet d'un objet côté client RadGrid

L'article, Obtenir une référence côté client à un objet de contrôle montre différentes approches que nous pouvons utiliser directement dans le

Get IntelliSense pour l'objet côté client

Le résultat de la méthode $ find () est une RadGrid et maintenant, quand nous avons une référence au contrôle, nous pouvons voir son API en utilisant les suggestions de saisie semi-automatique. le "IntelliSense", vous devez simplement affecter le résultat à une variable

Figure 4 . API de l'objet côté client Grid et affichage des suggestions auto-complétées

JavaScript de débogage

Lorsque votre page, fonctionnalité ou composant ne se comporte pas comme prévu, ces compétences de débogage peuvent vous aider à identifier et résoudre les problèmes

Il existe différentes approches pour activer un débogueur dans une fonction JavaScript:

• Ajouter un débogueur et une instruction dans la déclaration de la fonction Malheureusement, ce n'est pas si simple avec la fonction intégrée les fonctions des composants préparés, parce que vous n'avez pas toujours accès au code source.
• Appelez debug (functionReference) dans la console Ceci équivaut à ajouter un débogueur déclaration sur la première ligne de la déclaration de fonction.
• Line-of-code breakpo ints que l'offre DevTools. Pour les ajouter, vous pouvez accéder au code dans le panneau Sources et cliquer sur le numéro de ligne. Le clic gauche ajoutera un point d'arrêt et le clic droit vous permet de définir un point d'arrêt conditionnel (frapper seulement si l'expression donnée est vraie). Les points d'arrêt conditionnels sont très utiles pour déboguer des boucles

Figure 5 Ajouter une ligne de points d'arrêt

Simuler un périphérique mobile Rendu

Connaissez-vous la difficulté de changer divers périphériques pour vérifier comment votre page sera rendue sur un appareil mobile? La fonctionnalité Device Mode de DevTools, également appelée «Mode Mobile» dans le blog, vous permet de tester la conception réactive de votre site sur plusieurs tailles d'écran et résolutions, ainsi que de simuler avec précision les appareils mobiles. entrée pour les événements tactiles, l'orientation de l'appareil et la géolocalisation. En prime, il modifie également la chaîne de l'agent utilisateur comme si la requête venait d'un navigateur mobile.

La meilleure partie de l'utilisation du mode périphérique est que vous pouvez utiliser DevTools, vous pouvez donc appliquer toutes vos compétences de débogage comme si C'est un site de bureau. Et vous n'avez même pas besoin de brancher un seul appareil sur votre machine de développement.

Pour activer le Mode Mobile, vous pouvez appuyer sur le bouton Basculer Mode Périphérique Ctrl + Shift + M ) dans le coin supérieur gauche du DevTools Lorsque le mode Mobile est actif, le bouton sera coloré en bleu –

Figure 6 .

Inspecter les demandes réseau

Parfois, vous devez vérifier les paramètres de la requête sur le serveur ou voir le contenu et le format de la réponse Vous pouvez le faire dans le panneau Réseau:

Figure 7 . Inspecter les demandes de réseau

Vous pouvez imiter une connexion lente, ce qui est une très bonne façon d'émuler une connexion mobile en changeant l'option dans la liste déroulante "En ligne" dans l'onglet réseau:

Wrap Up

Les DevTools sont un ajout puissant au sac d'astuces du développeur. Dans cet article, nous avons examiné différentes techniques de productivité et de débogage, ainsi que les meilleures pratiques qui vous permettront de mieux comprendre le fonctionnement de vos applications et composants Web. Nous avons étudié comment les dépanner, les inspecter et les déboguer, et comment modifier leur apparence et leur apparence à la volée directement dans le navigateur.

Cependant, ce n'est qu'une petite partie de notre arsenal de développement. Quels autres outils et astuces utilisez-vous? Ce serait génial de vous entendre partager vos secrets de votre propre répertoire dans la section commentaires ci-dessous.

Restez à l'écoute pour le prochain blog avec plus de conseils et astuces de nos pratiques de développement internes.