Comment utiliser les outils de développement Chrome pour améliorer votre site Web WordPress

Chrome Developer Tools (DevTools) est un ensemble étonnant d'outils de création Web et de débogage pour Google Chrome. Les DevTools donnent accès aux éléments qui construisent les pages Web. Vous pouvez utiliser les DevTools pour résoudre les problèmes de mise en page, examiner et modifier le CSS, définir des points d'arrêt JavaScript, inspecter le code pour l'optimisation, et bien plus encore. Les DevTools sont gratuits et déjà intégrés à votre navigateur Chrome. Donc, si vous avez Chrome, vous les avez déjà.

Dans cet article, nous aurons un aperçu de ce que sont les outils et comment les utiliser pour améliorer votre site Web WordPress.

Ouverture des outils

Il existe plusieurs façons d'ouvrir les outils :

1. Sélectionnez le menu Chrome, choisissez Outils, puis choisissez Outils de développement.
2. Faites un clic droit sur n'importe quel élément de l'écran et sélectionnez Inspecter l'élément (ma méthode préférée).
3. Ctrl + Maj + I (pour PC) | Cmd + Opt + I (pour Mac)

La fenêtre DevTools

La fenêtre des outils contient deux panneaux. Ils contiennent tous deux des outils qui peuvent être utilisés ensemble. Voici un aperçu des outils.

Le premier contient 8 groupes d'outils. Les outils comprennent :

• Éléments
• Réseau
• Sources
• Chronologie
• Profils
• Ressources
• Audits
• Console

La deuxième section contient :

• modes
• Calculé
• Auditeurs d'événements
• Points d'arrêt DOM (Document Object Model)
• Propriétés

Il existe plusieurs manières d'afficher les outils. Vous pouvez redimensionner les fenêtres pour faire de la place. Vous pouvez également déplacer les fenêtres à droite de l'écran pour vous donner un écran partagé avec les outils d'un côté et votre site Web de l'autre.

Éléments

Ce panneau vous montre l'arborescence DOM, qui représente les éléments HTML de votre page, et vous permet d'inspecter ou de modifier n'importe lequel des éléments. Vous pouvez voir les ajustements CSS en temps réel.

Vous pouvez ouvrir et réduire n'importe lequel des panneaux pour faciliter la visualisation et la navigation en cliquant sur les nœuds (ils ressemblent à des flèches ou à des triangles). L'arborescence DOM affiche l'état actuel de l'arborescence plutôt que le code HTML d'origine (par exemple, il peut avoir été modifié par JavaScript).

Lorsque vous passez la souris sur un élément dans l'arborescence, l'élément de la page Web est mis en surbrillance. Il vous montrera des informations telles que le style de police, la taille de l'image, etc.

Si vous cliquez sur l'un des éléments, la fenêtre de droite affichera le CSS. Ici, vous pouvez sélectionner des styles et apporter des modifications aux polices, couleurs, tailles, marges, bordures, remplissage, etc.

Dans le pied de page, vous verrez des fils d'Ariane afin que vous puissiez revenir en arrière si vous en avez besoin. Vous pouvez modifier n'importe lequel des éléments simplement en cliquant dessus et en tapant vos modifications. Lorsque vous appuyez sur Entrée, vous verrez les changements se produire.

Par exemple, cette image fait actuellement 600 pixels de large. Je peux sélectionner la largeur et taper une nouvelle valeur et appuyer sur Entrée.

L'image prend immédiatement la nouvelle taille.

Pour changer le style de la police, sélectionnez simplement la police et sélectionnez ce que vous voulez changer dans la fenêtre des styles à droite.

Vous pouvez même faire glisser les éléments et les déposer à de nouveaux emplacements pour modifier la mise en page de votre page.

Je déplace les commentaires récents au-dessus des messages récents simplement en faisant glisser la div.

Un clic droit vous donne un nouvel ensemble de fonctionnalités. Vous pouvez voir différents états d'éléments, modifier en HTML, définir des sauts, copier le chemin CSS, et bien plus encore. Vous pouvez également cliquer avec le bouton droit et supprimer un nœud. C'est tellement facile que c'en est presque effrayant.

J'ai utilisé cet outil pour trouver des tailles d'image et pour inspecter des extraits de code.

Réseau

Le panneau Réseau affiche les ressources de votre site Web qui sont demandées et téléchargées. Il est tracé en temps réel. Voir quels éléments prennent le plus de temps à télécharger vous donne un aperçu des problèmes à résoudre afin d'optimiser votre page.

Vous pouvez filtrer et afficher différentes vues et types de graphiques tels que la cascade. Vous pouvez enregistrer l'activité du réseau et la sauvegarder afin de pouvoir l'analyser ultérieurement.

Vous pouvez afficher les détails des ressources. Les détails incluent :

• En-têtes de demande et de réponse HTTP - cela affiche l'URL de la demande, la méthode HTTP, les codes d'état de la réponse et répertorie les en-têtes de réponse et de demande HTTP avec leurs valeurs et les paramètres de la chaîne de requête.
• Aperçu des ressources - affiche un aperçu des ressources image et JSON.
• Réponse HTTP - cela montre le contenu non formaté de la ressource.
• Noms et valeurs des cookies - cela montre les cookies qui sont transmis dans les en-têtes de requête et de réponse HTTP de la ressource, et efface les cookies.
• Messages WebSocket - celui-ci affiche les messages envoyés ou reçus via une connexion WebSocket.
• Synchronisation du réseau de ressources - cela montre un graphique du temps passé sur les phases du réseau impliquées dans le chargement de la ressource.

La vue en cascade est un excellent moyen de voir le temps nécessaire au chargement de chaque élément depuis le début de la requête jusqu'à la livraison du dernier octet de l'élément. En voyant quels éléments prennent le plus de temps, vous pouvez mieux comprendre où faire des ajustements.

Vous pouvez enregistrer les données du réseau pour une analyse future.

Sources

Vous pouvez utiliser le panneau des sources pour voir et déboguer votre code tel que JavaScript et les scripts qui font partie de la page chargée. Vous pouvez mettre en pause, reprendre, parcourir le code et faire une pause aux exceptions. Il inclut les fonctionnalités d'exécution de code de base afin que vous puissiez parcourir, entrer, sortir et basculer les points d'arrêt. Vous pouvez utiliser les points d'arrêt pour déboguer JavaScript, les mises à jour DOM et les appels réseau. Vous pouvez également définir des points d'arrêt conditionnels où toute expression peut renvoyer la valeur true ou false. Le point d'arrêt mettra alors le code en pause si la condition est remplie.

Il y a une jolie fonction d'impression qui rend le code minifié facile à lire. Cela permet également de voir plus facilement où placer vos points d'arrêt. Si cela ne fonctionne pas comme vous en avez besoin, vous pouvez utiliser un format de mappage basé sur JSON appelé carte source. Les cartes source sont créées par un minificateur qui intègre cette fonctionnalité.

Chronologie

Le panneau Chronologie indique où le temps est consacré au chargement et à l'utilisation de la page. Il peindra et tracera chaque événement sur la chronologie. Il affichera des ressources telles que JavaScript, le calcul des styles et la peinture. Vous pouvez enregistrer les événements et les analyser par étapes. Il existe trois modes :

• Événements – une liste de tous les événements organisés par type. Cela vous montre quelles tâches prennent le plus de temps.
• Cadres - cela montre le travail qui doit être fait dans chaque cadre des performances de rendu de votre site Web. Par exemple, si votre site s'affiche à 60 images par seconde, il vous montrera le travail effectué en 1/60 de seconde. Cela inclut le chargement des scripts, la peinture de la mise en page, la gestion des événements, etc. Vous pouvez l'utiliser pour afficher toute activité anormale lors du chargement de la page.
• Mémoire - cela représente graphiquement votre utilisation de la mémoire au fil du temps. Il vous montre tous les documents, nœuds et écouteurs d'événements qui sont conservés en mémoire. Cela aide à déterminer ce qui cause les fuites de mémoire.

Profils

Ici, vous pouvez profiler le temps d'exécution et l'utilisation de la mémoire des pages Web et des applications. Cela vous montre où les ressources sont utilisées. C'est un bon outil pour optimiser votre code.

Il enregistrera trois types de profils :

• Collect JavaScript CPU Profile - cela montre le temps d'exécution de vos fonctions JavaScript.
• Prendre un instantané du tas - cela montre l'utilisation de la mémoire et la distribution de vos objets JavaScript.
• Enregistrer les allocations de tas - cela enregistre vos allocations d'objets pour montrer les fuites de mémoire au fil du temps.

Ressources

Vous pouvez utiliser ce panneau pour inspecter les ressources. Il vous montrera des informations sur IndexedDB, la base de données Web SQL, les cookies de cache d'application, le stockage local et de session, etc. Vous pouvez également inspecter vos ressources visuelles, telles que les polices, les images et les feuilles de style.

L'onglet IndexedDB vous permet d'inspecter vos bases de données et magasins d'objets IndexedDB, ainsi que d'afficher et de supprimer des enregistrements.

Vous pouvez exécuter des commandes SQL et afficher les résultats sous forme de tableau. Au fur et à mesure que vous tapez les commandes, il vous donnera des indications sur les noms de table, les commandes et les clauses.

L'onglet cookies affiche des informations sur les cookies qui ont été créés par HTTP ou JavaScript. Vous pouvez les supprimer individuellement ou en groupe.

Chrome met en cache les ressources de l'application. L'onglet Cache d'application vous permet de visualiser l'état de ces ressources. Il vous montrera également l'URL de la ressource, le type de ressource dont il s'agit et sa taille.

Le local et la session Le panneau de stockage vous permet d'afficher, de créer, de supprimer et de modifier des paires clé/valeur de stockage local et de session créées avec l'API de stockage.

Audits

Le panneau Audit analyse la page lors de son chargement et suggère des correctifs pour optimiser le chargement de la page. Il comporte deux audits qui séparent les informations en deux catégories : l'utilisation du réseau et les performances des pages Web. Vous pouvez exécuter les deux audits ou seulement celui que vous voulez. Vous pouvez exécuter les audits dans l'état actuel de la page ou recharger la page et auditer au chargement.

Il n'entre pas dans autant de détails que Google PageSpeed ​​Insights, mais il vous donne suffisamment d'informations pour fixer les fruits à portée de main. Après avoir parcouru PageSpeed ​​Insights, ma page était en bon état, mais elle m'a donné des informations sur mon site que Insights n'a pas fournies.

Console

La console est utilisée pour le débogage. Vous pouvez enregistrer des diagnostics, entrer des commandes, évaluer JavaScript, créer des profils JavaScript, etc. Vous pouvez écrire des informations sur la console via la ligne de commande. À l'aide de la ligne de commande, vous pouvez utiliser des fonctions pour sélectionner et inspecter des éléments dans le DOM, surveiller des événements et arrêter et démarrer le profileur.

Mode appareil

L'une de mes fonctionnalités préférées est le mode appareil. Vous pouvez y accéder avec le petit bouton à gauche des éléments dans le menu. Le mode Appareil vous permet de choisir parmi 23 appareils mobiles populaires différents (Kindle Fire, plusieurs iPhones, plusieurs Galaxies, ordinateurs portables, etc.) et de voir à quoi ressemble votre site Web et réagit sur cet appareil.

Vous pouvez également faire glisser l'écran pour créer votre propre taille d'écran personnalisée. Le curseur imite le bout de votre doigt afin que l'écran réagisse avec la souris comme il le ferait avec votre doigt. Vous pouvez également créer vos propres appareils personnalisés dans l'écran des paramètres.

Vous pouvez également choisir le type de réseau (3G, 4G, Wi-Fi, etc.) afin d'analyser l'apparence et la réaction du site sur les différents réseaux et vitesses.

Tiroir

Au bas de l'écran, vous trouverez le tiroir. Cela peut être activé ou désactivé avec le bouton >_ sur le côté droit de la barre d'outils. Le tiroir contient :

• Console – la ligne de commande de la console. Cela rend la console disponible lors de l'utilisation d'autres panneaux.
• Recherche - trouvez n'importe quelle source. Vous pouvez choisir d'ignorer la casse et de rechercher des expressions régulières.
• Émulation – outils et paramètres pour le mode appareil. Il comprend des fonctionnalités telles que l'accéléromètre et les coordonnées de géolocalisation.
• Rendu - affiche les fonctionnalités de rendu telles que le compteur fps, les bordures en couches composites, etc. La meilleure partie de celui-ci est qu'il montrera les goulots d'étranglement potentiels.

Il est utile d'avoir ces outils dans le tiroir car certains panneaux n'incluent pas l'accès à ces outils.

Dernières pensées

Chrome Developer Tools (DevTools) est un ensemble incroyable d'outils de création Web et de débogage pour vous aider à améliorer votre site Web. Vous pouvez rapidement faire glisser et déposer des éléments pour modifier la mise en page de votre site, résoudre les fuites de mémoire, résoudre les problèmes de chargement de page, afficher votre site Web sur pratiquement n'importe quel appareil mobile et taille d'écran, et bien plus encore. Cet aperçu ne fait qu'effleurer la surface de la puissance de ces outils. La meilleure chose à ce sujet est qu'il est déjà intégré à Google Chrome, vous n'avez donc rien à télécharger.

J'aimerais vous entendre. Utilisez-vous les outils de développement Chrome ? Quelles sont vos fonctionnalités préférées ? Qu'est-ce que tu utilises le plus ? Avez-vous des conseils sur l'utilisation des outils ? Parle-nous-en dans les commentaires.