👩‍🎤 🦓 👹 Mes outils de développement Chrome préférés 👨‍🏫 💇🏻 💃🏿

Bonjour mes amis!

Chrome Developer Tools est une boîte à outils très puissante pour le développement d'applications Web. En utilisant ces outils, nous pouvons naviguer dans le DOM, vérifier les requêtes du serveur, régler les performances des applications, etc.

Parmi les nombreuses fonctionnalités disponibles, il y en a plusieurs vraiment intéressantes. Ces "fonctionnalités" permettent de faire un ou deux clics de moins - n'est-ce pas pourquoi nous nous sommes réunis ici?

Style JQuery pour accéder au DOM

jQuery est une bibliothèque impressionnante. Elle gère le Web depuis une époque entière. Selon certains rapports, plus de 70% des sites Web les plus populaires dans le monde utilisent telle ou telle version de jQuery. Il s'agit d'une réalisation incroyable pour une bibliothèque écrite en 2006.

L'API la plus populaire fournie par jQuery est $, utilisée pour sélectionner les éléments DOM. Dans la console de l'outil de développement Chrome (ci-après dénommée la console), il est possible d'utiliser le sélecteur $, qui est un alias de document.querySelector ().

Par exemple, pour cliquer sur un bouton, vous devez procéder comme suit:

$$ est un synonyme de document.querySelectorAll ():

Il y a quelques astuces supplémentaires pour travailler avec $. Parfois, le sélecteur est trop complexe pour être saisi manuellement, ou nous ne pouvons tout simplement pas déterminer la spécificité suffisante du sélecteur. Si nous sélectionnons un élément dans l'onglet «Éléments», nous pouvons le récupérer dans la console en utilisant la variable $ 0:

En fait, la console vous permet d'accéder aux 5 derniers éléments sélectionnés. Ces éléments sont disponibles via les variables $ 0- $ 4, respectivement:

Copier les propriétés d'un élément

L'onglet Éléments est très utile. Il stocke l'arborescence DOM de notre site, vous permet de visualiser les styles d'éléments et de les modifier à la volée.

La chose vraiment cool que j'ai découverte est la possibilité de copier les propriétés d'un élément (et pas seulement) en utilisant le menu contextuel.

Par exemple, vous pouvez copier un sélecteur d'élément:

ce sélecteur n'est peut-être pas suffisamment spécifique ou trop spécifique, mais il aide quand même à déboguer le code.

Comme vous pouvez le voir, nous pouvons également copier des styles d'élément, le "chemin" JS (document.querySelector (SELECTOR)) ou XPath.

Filtrage des requêtes réseau

Parfois, nous devons travailler avec une page envoyant beaucoup de demandes au serveur. Je veux dire, beaucoup de demandes.

Patauger dans ces étendues sauvages à la recherche d'une demande spécifique n'est pas une occupation agréable. Heureusement, vous pouvez filtrer les requêtes.

Un ensemble de filtres vous permet d'afficher les requêtes par type, par exemple, XHR / Fetch, feuilles de style, scripts JS, images, etc.:

vous pouvez également spécifier vos propres critères dans le champ de saisie situé au-dessus des filtres:

Émulation de différentes vitesses de connexion réseau

En utilisant l'onglet «Réseau», nous pouvons tester notre site dans des conditions de vitesses de connexion différentes. La valeur par défaut est définie sur en ligne, dans laquelle vous profitez pleinement de la bande passante de votre connexion.

Outre la connexion en ligne, des «préréglages» tels que Fast 3G, Slow 3G et hors ligne sont disponibles, qui diffèrent par la vitesse de chargement des pages, la vitesse de téléchargement des fichiers et le délai. Si vous devez émuler autre chose, vous pouvez utiliser le bouton Ajouter ... pour ajouter votre propre profil:

Utilisation d'expressions en direct dans la console

Que sont les expressions en direct?

Les expressions en direct sont des expressions qui sont constamment «évaluées» dans la console. Supposons que vous souhaitiez suivre la valeur d'une variable. Vous pouvez le saisir encore et encore:

grâce à Live Expressions, vous pouvez vous concentrer sur le code et permettre à Chrome de surveiller indépendamment les modifications:

cette fonctionnalité est disponible pour les variables déclarées dans la console et les variables déclarées dans le script.

Émuler divers appareils

Ceux qui travaillent avec des applications réactives connaissent la sensation que vous ressentez lorsque vous travaillez dur et longtemps à la beauté de la mise en page juste pour voir comment tout se désagrège sur l'appareil avec une résolution différente.

Je ne suis pas ici pour parler des requêtes des médias, mais pour montrer un moyen de tester leur travail.

Si vous cliquez sur le bouton qui ressemble à une tablette et à un téléphone, vous verrez comment la zone d'affichage du navigateur change en fonction de la taille des différents appareils.

Vous pouvez sélectionner un appareil dans la liste des préréglages contenant des appareils populaires tels que iPhone X, iPad Pro, Pixel 2, Pixel 2 XL, etc. Cette liste est loin d'être complète (pas très pertinente), mais elle est tout à fait suffisante pour résoudre la plupart des problèmes.

Si le périphérique dont vous avez besoin n'est pas répertorié, vous pouvez définir la résolution manuellement. Comme vous pouvez le voir, j'ai défini ma propre autorisation pour émuler OnePlus 6 (mon gadget de tous les jours):

Changer l'état de l'article

Avez-vous rencontré une situation dans laquelle vous souhaitez jouer avec les styles appliqués à un élément lorsque vous le survolez (: survol), mais chaque fois que vous déplacez le curseur sur l'onglet styles, l'élément perd le survol?

Les outils de développement vous permettent de corriger l'état d'un élément. Nous pouvons facilement activer / désactiver des états tels que: actif,: survol,: focus,: focus au sein et: visité:

voici mes outils de développement Chrome préférés. Merci de votre attention.

Bon codage!

Mes outils de développement Chrome préférés