Pourquoi devriez-vous commencer à utiliser les outils de développement Chrome dès maintenant

Avoir un bel ensemble d'outils pratiques pour aider à tester votre site Web est essentiel pour les développeurs. Quel est le meilleur endroit pour les garder ? Dans votre navigateur, bien sûr ! Le navigateur Web populaire de Google, Chrome, intègre des outils de développement. Il s'agit d'un ensemble d'outils conçus pour la création et le débogage Web. Les outils de développement Chrome (connus sous le nom de DevTools) permettent aux développeurs d'accéder au fonctionnement interne du navigateur Web et des applications Web.

En utilisant Chrome DevTools, vous pouvez connaître les styles utilisés, la taille des images, les scripts utilisés, etc. Vous pouvez déboguer et savoir quelles erreurs existent sur la page. Vous pouvez même activer ou désactiver les styles, ou les modifier complètement, pour voir quel effet cela a sur votre site Web.

C'est dans votre navigateur

Les outils eux-mêmes sont faciles d'accès. Voici trois façons de les ouvrir :

1. Dans votre navigateur Chrome, sélectionnez le menu Chrome (les trois barres horizontales dans le coin supérieur droit), sélectionnez Plus d'outils, puis sélectionnez Outils de développement.
2. Cliquez avec le bouton droit sur un élément sur n'importe quelle page et sélectionnez Inspecter l'élément.
3. Sur votre clavier sous Windows, sélectionnez ctrl + shift + i. Sur Mac, sélectionnez cmnd + opt + i.

N'importe lequel d'entre eux ouvrira la fenêtre DevTools en bas de votre navigateur.

Fenêtre principale

Les outils apparaissent en bas de votre écran. Vous verrez une fenêtre principale avec des menus en haut et des éléments comme vue par défaut, et une fenêtre secondaire avec des menus et des styles comme sélection par défaut.

Les outils sont regroupés en tâches. Il existe 8 groupes qui incluent les éléments, le réseau, les sources, la chronologie, les profils, les ressources, les audits et la console.

Éléments

Ici, vous pouvez voir la structure HTML de votre page. Il y a une bascule en bas pour HTML et Body. Vous pouvez passer la souris sur l'un des éléments pour voir des informations détaillées sur chacun d'eux.

Vous pouvez cliquer sur les flèches pour ouvrir et fermer le contenu des éléments principaux pour en faciliter la lecture. Vous pouvez donc fermer le corps et simplement lire l'en-tête, choisir l'élément à voir dans l'en-tête, etc. C'est un excellent outil pour afficher le code HTML de votre site Web.

Réseau

Cela montre chaque élément qui sera chargé, comment ils sont chargés, le type de fichier, la taille du fichier, le temps qu'il faut pour charger et une chronologie du moment où il sera chargé dans la séquence de chargement de page. Cela peut être utilisé pour résoudre les problèmes de réseau tels que les goulots d'étranglement dans le chargement des pages et les mauvaises demandes.

Par exemple, si vous voyez beaucoup d'erreurs 404, vous pouvez regarder de plus près pour voir quels sont les problèmes. Peut-être que vous avez supprimé une page qui reçoit encore beaucoup de trafic, ou peut-être que quelqu'un a mal tapé un lien.

Sources

Cela montre les scripts et les extraits de code qui se chargeront et d'où ils viennent.

Chronologie

Cela vous montre le temps de chargement de chaque ressource. Vous pouvez voir ce qui prend le plus de temps, ce qui aide à réduire le chargement de vos pages.

Profils

Cela montre l'utilisation de la mémoire de chaque élément. C'est très bien pour vous montrer quel code doit être optimisé.

Ressources

Ici, vous pouvez inspecter les ressources chargées. Vous pouvez consulter les cookies, le cache des applications, les bases de données HTML5, etc.

Audits

Cela vous permet d'analyser la page. Vous pouvez effectuer un audit après son chargement ou pendant son chargement.

Auditer l'état actuel

Tout d'abord, j'ai choisi d'exécuter Audit Present State. Cela exécute l'audit tel que le site se trouve actuellement, déjà chargé dans mon navigateur.

Il me donne une liste d'éléments, les colore en fonction de leur importance et indique le nombre de problèmes. Je peux voir plus de détails en cliquant dessus.

J'ai développé plusieurs d'entre eux pour voir les informations détaillées sur chacun d'eux. Il me donne des informations sur l'utilisation du réseau et les performances des pages Web. Il me donne des conseils sur la façon de résoudre les problèmes et les priorise pour moi.

Recharger la page et auditer au chargement

Je suis retourné et j'ai choisi d'auditer en charge. Les résultats sont similaires, mais comme prévu, il y a plus de problèmes lors du chargement de la page qu'après le chargement de la page.

Entre les deux, j'obtiens des informations sur JavaScript, la mise en cache du navigateur, la mise en cache proxy, la taille des cookies, la diffusion de contenu à partir d'un domaine sans cookie, les dimensions de l'image, l'ordre et les styles des scripts, le placement de CSS dans l'en-tête du document, la suppression des fichiers CSS inutilisés et l'utilisation de CSS normal noms de propriété. Bien sûr, les résultats varient selon le site.

Les informations ne sont pas aussi détaillées que PageSpeed ​​Insights, mais elles sont suffisantes pour me lancer et j'aime la commodité qu'elles soient intégrées à l'outil que j'utilise de toute façon. Je recommande de l'exécuter chaque fois que vous apportez une modification à votre site. Il est trop facile à utiliser pour ne pas l'utiliser.

Console

Il s'agit de la console JavaScript où vous pouvez tester des pages et des applications. Vous pouvez déboguer vos scripts et obtenir des conseils sur les modifications à apporter. La console vous permet d'entrer des commandes afin que vous puissiez interagir avec votre page Web. Il enregistrera les informations de diagnostic pour vous aider à déboguer. Vous pouvez l'utiliser dans l'écran principal ou dans le tiroir (la fenêtre sous l'écran principal).

Vous pouvez utiliser les API de console ou de ligne de commande. Vous pouvez écrire dans la console, formater vos éléments et styler les sorties, mesurer le temps d'exécution ou de chargement, afficher et marquer la chronologie, compter les instructions, définir des points d'arrêt, évaluer les expressions, surveiller les événements, empiler les messages, voir les erreurs et les avertissements, etc. Suite.

C'est un outil puissant, mais il y a beaucoup à l'utiliser. Heureusement, un bon matériel de référence est fourni avec des exemples sur la façon de l'utiliser.

Débogage

La sélection de ctrl + p sous Windows ou cmd + p sous Mac ouvrira l'écran de débogage où vous pourrez sélectionner les scripts à déboguer. Cet outil vous offre les fonctionnalités de débogage que vous vous attendez à voir dans n'importe quel environnement de programmation : pause, continuer, entrer, franchir, points d'arrêt, code formaté, etc.

Des fichiers d'aide détaillés sont fournis pour vous guider dans l'utilisation du mode de débogage.

Fenêtre Styles CSS

La case à l'extrême droite contient toutes les informations CSS. Lorsque vous sélectionnez un élément, la fenêtre Styles à droite vous montre les informations sur les styles de l'élément. Cette rubrique est intéressante. Il existe cinq groupes d'outils : Styles, Calculé, Écouteurs d'événements, Points d'arrêt DOM et Propriétés.

modes

Vous pouvez sélectionner les styles et les modifier manuellement dans cette fenêtre. Par exemple, vous pouvez sélectionner la taille et la couleur de la police.

Sélectionnez la taille de la police et entrez votre propre taille. Lorsque vous le faites, la taille de la police que vous avez sélectionnée changera à l'écran.

Faire la sélection sur une couleur de police ouvrira le sélecteur de couleurs. Sélectionnez la couleur que vous voulez et appuyez sur Entrée. Vous verrez la police que vous avez sélectionnée passer à la nouvelle couleur. C'est un excellent moyen d'essayer de nouveaux styles, tailles et couleurs de police.

Si vous cliquez sur site.CSS sur la droite, vous ouvrirez une fenêtre plus grande avec les informations en détail. Ici, vous pouvez taper le nom de la police que vous souhaitez utiliser, spécifier une couleur, spécifier une taille, etc.

Calculé

Cela montre la taille de la boîte en pixels. Il a un rembourrage, une bordure et une marge.

Mode appareil

Il y a un petit bouton à gauche entre la loupe et le menu Éléments qui ressemble à un appareil mobile. Devinez quoi? C'est un appareil mobile. C'est le mode d'émulation de l'appareil. C'est un excellent moyen de voir à quel point votre site est réactif.

Dispositif

Ce qui est encore plus cool que le simple fait d'être un appareil mobile, c'est que vous pouvez choisir de quel appareil mobile il s'agit, puis vous pouvez voir le site Web comme si vous le regardiez sur cet appareil. Maintenant, c'est génial !

J'ai sélectionné Amazon Kindle Fire HDX 7" et l'écran imitait cet appareil afin que je puisse voir à quoi ressemblerait le site sur son écran et comment le toucher fonctionnerait.

Vous pouvez modifier l'orientation de l'écran en appuyant sur le bouton Échanger les dimensions.

C'est un excellent moyen de voir à quoi ressemble votre site WordPress sur le plus petit écran mobile. J'ai choisi l'iPhone 6 et la taille de l'écran a changé pour correspondre à la nouvelle taille et résolution de l'écran. Il y a beaucoup d'appareils à voir. Vous pouvez également voir une taille personnalisée en faisant glisser les côtés pour augmenter ou diminuer la taille.

Réseau

Il existe également une sélection pour choisir le type de réseau via lequel vous accédez au site. Cela vous permet de voir les performances de votre site Web à travers différents types et vitesses de connexion. Vous pouvez tester plusieurs vitesses de 50 Kbps GPRS à 30 Mbps WiFi, et plusieurs vitesses de connexion 2G, 3G et 4G. C'est un excellent moyen de tester la vitesse de votre site Web via des réseaux carieux et d'obtenir des informations sur ce qu'il faut améliorer.

Requêtes médias

Il y a un petit bouton en haut à gauche qui ressemble à des marches d'escalier. Il ouvre une autre section d'écran au-dessus de la fenêtre du site Web qui affiche différentes largeurs de pixels. En cliquant dessus, l'écran du mobile prend cette taille. Ils vous montrent :

• Requêtes ciblant une largeur maximale
• Largeurs dans une plage
• Requêtes ciblant une largeur minimale

Cela vous aide à ajuster les styles et le contenu multimédia pour une conception entièrement réactive.

Le tiroir

Il y a une autre section d'outils sous l'écran principal appelée le tiroir. Cela ajoute :

Console - c'est la même console que dans la fenêtre principale. En le plaçant ici, vous pouvez l'utiliser avec n'importe lequel des outils de la fenêtre principale.

Rechercher – vous permet de rechercher des sources.

Émulation – vous pouvez choisir Périphérique (ici, vous pouvez choisir le modèle, la résolution, le réseau, etc.), Média, Réseau (débit et agent utilisateur) et Capteurs (écran tactile, accéléromètres, etc.).

Rendu - affichez les rectangles de peinture, les bordures de calques composites, le compteur FPS, la repeinture continue de la page et les goulots d'étranglement potentiels du défilement.

Paramètres et plus

La barre de menu à droite vous indiquera le nombre d'erreurs et d'avertissements sur votre site, vous permettra de masquer le tiroir en bas, vous permettra d'ajuster les paramètres et d'ancrer l'outil à la fenêtre principale (créant un écran partagé entre votre site Web et les DevTools).

Il existe une grande quantité de paramètres que vous pouvez ajuster afin que vous puissiez modifier les outils pour qu'ils fonctionnent comme vous en avez besoin.

Canari chromé

Si vous voulez vraiment être à la pointe des outils de développement Chrome de Google, essayez Chrome Canary. Son icône est jaune. Trouver? Il a besoin d'une cape. C'est le dernier et le meilleur de Google. Il est conçu pour les développeurs et dispose de la dernière version des DevTools. Il n'est pas encore assez stable pour une utilisation générale, il va donc probablement casser votre système.

Si vous êtes susceptible de causer de graves dommages à votre environnement lorsque votre système tombe en panne, regardez l'icône Chrome Canary dans l'image ci-dessus et ne clignez pas des yeux pendant cinq secondes.

Vous pouvez maintenant passer à la fin. Vous ne vous souviendrez pas de cette partie.

Emballer

Les outils de développement de Google Chrome sont un excellent outil pour le dépannage, l'amélioration des performances du réseau, la visualisation de votre site sur différentes tailles et résolutions d'écran, et l'obtention d'informations sur les endroits où votre site doit être amélioré. Il y a beaucoup de fonctionnalités et vous pouvez en ajouter encore plus grâce aux extensions. Ces outils à eux seuls sont une excellente raison d'installer Google Chrome, même s'il ne s'agit pas de votre navigateur principal. Prendre le temps d'apprendre les fonctionnalités sera payant et votre site et vos visiteurs vous en remercieront.

À ton tour! Utilisez-vous les outils de développement Chrome ? Ai-je oublié votre fonctionnalité préférée ? Avez-vous quelque chose à ajouter? J'aimerais en entendre parler dans les commentaires ci-dessous!

Image miniature de l'article par Anikei / shutterstock.com