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

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.

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

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

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

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

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

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

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:

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 .

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