Fermer

avril 8, 2018

Améliorez vos compétences de débogage avec Chrome DevTools2 minutes de lecture

Improve Your Debugging Skills with Chrome DevTools_870x220


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 )  inspecter-icon "title =" inspecter -icon "/> dans le coin supérieur gauche des DevTools et <strong data-recalc-dims= 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 . "

 Inspecter les éléments" title = "Inspecter les éléments" style = "vertical-align: middle;" /> <br data-recalc-dims= Figure 1 . Inspecter les éléments DOM générés

Pro Tips

  • Vous pouvez éditer le code HTML et les attributs HTML d'un élément à la volée de en double-cliquant sur attribut d'un élément dans ] Panneau des éléments ou clique-droit sur l'élément et choisit " Ajouter un attribut ", " Modifier l'attribut " ou " Modifier au format HTML "option du menu contextuel .
  • Vous pouvez modifier la hiérarchie DOM par en sélectionnant un élément dans le panneau Eléments puis en faisant glisser à l'emplacement désiré

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.

 Vérifier les styles appliqués "title =" Vérifier les styles appliqués "style =" vertical-align: middle [2] <br data-recalc-dims= Figure 2 Voir les styles appliqués aux éléments DOM

Pro Tips

  • Vous pouvez utiliser les flèches du clavier pour augmenter / diminuer les valeurs numériques. 19659016] Vous pouvez utiliser le sélecteur de couleur pour définir des valeurs de couleur sur certaines propriétés

 Afficher le sélecteur de couleur "title =" Afficher sélecteur de couleur "/></p data-recalc-dims=

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

 Taille de l'onglet calculé Représentation visuelle "title =" Onglet calculé Taille Représentation visuelle "/></p data-recalc-dims=

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

 Find Grid Reference "title =" Trouver la référence de la grille "/> <br data-recalc-dims= 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

Pro Tips

  • $ telerik. $ (".RedGrid") [0] .control renvoie la référence d'objet client du premier RadGrid sur la page La partie $ telerik. $ (".RedGrid") [0] retourne l'élément que nous recherchions afin d'obtenir son identifiant.

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

Pro Tips

  • et dans la console montre la ligne exécutée précédente / suivante. 19659016] Ctrl + Espace ouvre le menu des suggestions
  • console.table (objectReference, ['index']) dans la console liste toutes les propriétés et méthodes disponibles . Dans Google Chrome, vous pouvez ignorer la console . et simplement utiliser, table (objectReference, ['index']) .

 Montrer Api Et Obtenir Intellisense "title =" Montrer Api Et Obtenir Intellisense "/> <br data-recalc-dims= 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

 Ajouter une ligne de code point d'arrêt "title =" Ajouter une ligne de code breakpoint "/> <br data-recalc-dims= Figure 5 Ajouter une ligne de points d'arrêt

Pro Tips

  • Les erreurs JavaScript sont consignées dans la console Il est toujours recommandé de rechercher ces erreurs car elles peuvent réduire les performances de la page ou même interrompre l'interaction et la fonctionnalité de l'application.
  • fichier contenant une fonction dans le panneau Sources et surligner la ligne où il est déclaré, vous pouvez enregistrer la fonction dans la console et cliquer avec le bouton gauche de la souris sur l'option.Le même résultat est obtenu en cliquant avec le bouton droit de la souris sur "dans le menu contextuel.
  • Utilisez les raccourcis F8 (unpause), F10 (pas à pas), F11 (pas à pas) lors du débogage. 19659016] Cliquez avec le bouton droit sur une ligne de code et choisissez "Continuer vers ici" pour créer l'effet équivalent de placer un point d'arrêt, de déboguer sans interruption, puis de supprimer le point d'arrêt après l'avoir frappé.
  • Cliquez avec le bouton droit sur une expression ou un texte sélectionné pour afficher un menu contextuel avec "Evaluer dans la console" et "Ajouter un texte sélectionné
  • Appuyez sur le bouton {} pour simuler le code dans le fichier source

 Icône Pretty Print "title =" Icône Pretty Print "/></p data-recalc-dims=

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  device-mode-off "title =" device-mode-off "/> (<kbd data-recalc-dims= Ctrl + Shift + M ) dans le coin supérieur gauche du DevTools Lorsque le mode Mobile est actif, le bouton sera coloré en bleu –  device-mode-on "title =" device- mode-sur "/>. Gardez à l'esprit que lorsque vous basculez entre les modes, vous devrez peut-être actualiser la page pour l'activer correctement.</p data-recalc-dims=

 Mode mobile "title =" Mode mobile "/><p data-recalc-dims= Figure 6 .

Conseils pratiques

  • Vous pouvez modifier le côté Dock des outils de développement sur le côté gauche ou droit lors de la simulation d'un périphérique mobile en mode Portrait.
  • Il existe un ensemble prédéfini de périphériques populaires dans la liste déroulante au-dessus du simulateur que vous pouvez utiliser pour simuler différentes tailles d'appareil.

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:

 Network Requests "title =" Network Requests "/> <em data-recalc-dims= Figure 7 . Inspecter les demandes de réseau

Pro Tips

  • Activer la consignation des demandes XHR dans la console. Cela rendra les demandes XHR plus facilement visibles dans la console, et un clic gauche sur le résultat vous dirigera directement vers cette requête dans le panneau Réseau. Remarque: ne cochez pas la case "Masquer le réseau".
  • Cochez la case Désactiver le cache . Cela empêchera la mise en cache des fichiers et des demandes et peut vous faire économiser du temps et des problèmes lorsqu'une modification effectuée sur le serveur n'est pas appliquée sur le client. Une autre option pour effacer le cache est d'actualiser la page avec Ctrl + F5 au lieu de juste F5 .

 activer XHR "title =" activer XHR "/ ></p data-recalc-dims=

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:

 Throttling de réseau "title =" Throttling de réseau "/></p data-recalc-dims=

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.


Les commentaires sont désactivés.



Source link

0 Partages