Outils de développement Google Chrome : comment les utiliser

SOS WP

Ouvrir l’index du contenu

Ce guide a été mis à jour le

Quel est votre navigateur préféré ? Je suis sûr que beaucoup d’entre vous me répondront “Google Chrome”! Tout à fait dans la lignée des tendances que j’ai rapportées il y a quelques jours dans mon article sur la compatibilité des navigateurs. Et c’est aussi ma préférée, grâce à la présence du très utile outils pour les développeurs.

Une chose qui m’ennuie vraiment, et je vais donc essayer d’y remédier à ma façon avec ce guide, c’est le fait que de très nombreux utilisateurs utilisent Google Chrome sans même connaître un dixième de son potentiel.

La plupart d’entre eux utilisent Chrome un peu pour la mode, un peu pour la marque Google. Même plusieurs personnes qui ont du plaisir à créer des sites Web sont souvent inconscientes de l’utilité de la création de sites Web. Instruments chromés.

Voici donc un guide qui vous expliquera comment tirer le meilleur parti de votre navigateur favori et l’utiliser pour vous aider à créer et gérer votre site, grâce à la fonction outils pour les développeurs Google Chrome.

Quels sont les outils pour les développeurs Google Chrome ?

Chrome fournit une série d’outils à utiliser dans le navigateur, grâce auxquels vous pouvez effectuer une analyse de n’importe quelle page Web. Vous pouvez également modifier le code et voir le résultat immédiatement.

La grande opportunité qui vous est offerte est donc de localiser rapidement tout problème sur votre site et d’essayer de le résoudre rapidement. Ensuite, vous pouvez corriger votre site en toute sécurité.

De plus, le outils pour les développeurs Chrome sont utilisables sur n’importe quel site Web, pas seulement le vôtre, donc vous pouvez aussi essayer d’apporter des changements à vos sites favoris pour voir ce que vous pouvez obtenir.

Oui, vous pouvez aussi le faire sur le site de SITECLEENMAIN !

Et maintenant, je vais vous montrer comment ça marche.

Comment accéder aux outils de développement Chrome

Il y a plusieurs façons d’accéder à cet outil.

  • Cliquez avec le bouton droit de la souris sur le point de la page que vous voulez analyser, puis cliquez sur Inspecter;
  • Utilisez la combinaison de touches CTRL + Maj + C (Windows) ou Commande + Option + C (Mac) ;
  • Cliquez sur le menu formé par les trois points en haut à droite (Personnaliser et contrôler Google Chrome) puis remonter Plus d’outils > Outils de développement.

Vous pouvez utiliser la méthode qui vous convient le mieux.

L’écran qui s’ouvre ressemblera à ceci :

Outils de développement Google Chrome : comment les utiliser

Comme vous pouvez le voir, il y a plusieurs sections et beaucoup d’options. Dans ce guide, nous approfondirons les parties les plus utiles pour le développement de votre site. Si vous avez besoin d’étudier l’outil plus en détail, veuillez consulter le guide officiel Chrome Developer Tools Guide.

Les fonctions des outils des développeurs Chrome

Voici les panneaux que vous trouverez dans les outils de développement :

  • Mode de l’appareilà gauche, avec un aperçu de votre page ;
  • Élémentspour analyser et corriger le code ;
  • Consolepour afficher les messages JavaScript ;
  • Sourcespour le débogage JavaScript ;
  • Réseautagepour le débogage réseau ;
  • Performancepour analyser le temps de chargement ;
  • Mémoirepour savoir combien de mémoire est occupée ;
  • Applicationpour analyser les applications web progressives, les caches, les cookies, etc ;
  • Sécuritépour détecter les problèmes de sécurité tels que ceux liés au certificat ;
  • Auditspour lancer un scan avec LightHouse.

Je n’expliquerai pas chaque fonction en détail, comme je vous l’ai déjà dit, mais voyons lequel pourrait être le plus utile pour le développement de votre site.

Mode de l’appareil

La fonction la plus pratique du outils pour les développeurs Chrome et vers laquelle vous vous tournerez sûrement le plus souvent est précisément Mode de l’appareil.

En fait, sur le côté gauche de l’écran, vous verrez votre site en format mobile. Dans cette section, vous pouvez interagir avec votre site : vous pouvez cliquer sur les liens, faire défiler la page, remplir des formulaires, etc.

La première option du menu au-dessus de l’aperçu vous permet de choisir entre plusieurs appareils. De cette façon, votre site sera redimensionné en fonction de l’écran de l’appareil de votre choix, tel que iPhone X, Galaxy S5, iPad et autres. En cliquant sur le bouton Modifier vous pouvez choisir parmi de nombreux autres modèles de smartphones.

Sélectionner Réactifau lieu de cela, vous pouvez faire glisser le côté droit pour redimensionner la largeur et voir si votre site est réellement “fluide”, c’est-à-dire s’il s’adapte sans problème à tout type d’écran.

Outils de développement Google Chrome : comment les utiliser

A côté de la première entrée, vous aurez des chiffres qui indiquent respectivement la largeur et la hauteur, de sorte que vous pouvez définir la valeur que vous voulez.

Le dernier symbole de cette section vous permet de passer du mode portrait au mode paysage, ce qui vous permet de tester vos pages en utilisant n’importe quelle orientation de périphérique.

Éléments

Le panel Éléments vous permet de modifier le code de votre site. En haut vous aurez le code HTML, tandis qu’en bas vous verrez le code CSS, puisque par défaut l’onglet est sélectionné Styles.

Ces sections sont modifiables, vous pouvez donc apporter les modifications que vous voulez et, après avoir appuyé sur Entrée, vous verrez le résultat dans l’aperçu.

Dans l’image ci-dessous, par exemple, j’ai transformé notre bouton Aller aux guides et j’ai changé le libellé de l’orange en vert pour “Lisez les guides”.

Outils de développement Google Chrome : comment les utiliser

Console

De la table ronde Console dieux Outils de développement chromevous pourrez entrer du code JavaScript. Double-cliquez sur la ligne vide indiquée par le symbole > pour activer le curseur et commencer à écrire.

Les développeurs seront facilités dans la tâche également grâce aux suggestions automatiques qui apparaîtront dès que vous commencerez à taper.

Outils de développement Google Chrome : comment les utiliser

Dans l’aperçu, vous verrez tout de suite le résultat de ce que vous avez entré.

De plus, en sélectionnant l’option Afficher l’encadré de la consolevous verrez tous les messages et toutes les erreurs. En sélectionnant tous les messages, vous aurez alors un aperçu complet de ce qui se passe sur votre page.

Supposons que vous ayez des problèmes avec certains plugins. Si vous contactez l’assistance, ils peuvent vous demander de leur envoyer le contenu de cette section. Il suffit de le copier et de le coller dans un simple fichier texte et de le lui envoyer. Dans tous les cas, suivez leurs instructions.

Sources

Le panel Sources est utile pour déboguer les problèmes JavaScript. Pour comprendre son fonctionnement, vous pouvez utiliser la démo de débogage simple et utile fournie par Google.

Il y a deux champs où vous pouvez entrer des chiffres. Le bouton ci-dessous devrait faire un ajout entre les deux chiffres que vous avez entrés, mais quelque chose ne fonctionne pas. Utilisez le panneau Sources pour trouver où se trouve l’erreur et la corriger.

Réseautage

De plus, le panneau Réseautage vous permet d’effectuer des opérations de débogage telles que, par exemple, la vérification que vos ressources sont chargées ou téléchargées correctement.

Cet outil vous permet également de contrôler les en-têtes HTTP, le contenu, la taille de vos fichiers.

Performance

De là, vous pouvez analyser en détail tout ce qui se passe, une milliseconde à la fois, dans votre page. Je vous suggère d’utiliser la fonction Performance dans un mode inconnu, afin d’obtenir des résultats plus fiables.

Appuyez sur le bouton Record (le point gris) et naviguez vers votre site pendant quelques secondes, puis appuyez sur Stop.

La première partie du panel vous montrera des graphiques très détaillés sur le timing de chaque action qui a eu lieu sur votre site. Si la boîte Captures d’écran était actif, il vous montrera également la capture d’écran correspondant à chaque moment.

Ci-dessous, cependant, vous trouverez un graphique montrant combien de temps le test a duré, dans mon cas environ 33 secondes, et combien de temps il a fallu pour charger, exécuter les scripts, etc.

Outils de développement Google Chrome : comment les utiliser

Mémoire

Avec le Mémoire vous pouvez connaître la quantité de mémoire occupée par votre page, ce qui vous permet de comprendre pourquoi, par exemple, elle diminue les performances après un certain temps qui est ouvert ou qui se fige complètement.

Application

La fonction Application vous permet d’inspecter toutes les ressources qui sont téléchargées, telles que les informations de session, les cookies, les images, les feuilles de style, etc.

Dans cette section, la fonction Manifesteavec lequel vous pouvez vérifier ce qui se passe lorsqu’un utilisateur ajoute votre site à la maison de son smartphone. C’est une bonne façon de tester votre application créée avec des systèmes comme Super Progressive Web Apps.

Sécurité

Grâce à la fonction d’analyse de sécurité que vous trouverez dans les outils de développement Chrome, vous pourrez vérifier tous les problèmes pouvant survenir avec votre certificat SSL ou ceux liés au contenu mixte (https contenant des ressources http).

En fait, vous pouvez découvrir exactement quelles ressources http sont à l’origine du problème et le résoudre facilement.

Par exemple, vous avez peut-être correctement configuré votre site en https, mais vous avez ajouté une image en utilisant son URL http. Avec cet outil, dans un instant vous saurez quelle est l’image http et vous n’aurez qu’à ajouter un s au code.

Audits

La plupart des panneaux que nous avons vus jusqu’à présent sont certainement très techniques et vous ne les utiliserez probablement pas tous si vous n’avez aucune connaissance en programmation. Mais maintenant, voyons quelque chose d’intéressant qui pourrait être utile à tout le monde.

Le panel Audits est l’un des des fonctions du outils pour les développeurs Chrome plus utile pour tous ceux qui veulent analyser leur site web, même sans être de grands experts.

Il s’agit en fait d’une version simplifiée de l’outil PageSpeed, que vous avez probablement déjà utilisé pour analyser la performance de vos pages.

Voici comment l’installer :

  1. AppareilChoisissez d’analyser les performances à partir d’un téléphone mobile ou d’un ordinateur de bureau ;
  2. Auditschoisir les catégories à analyser ;
  3. Accélérationchoisir entre la simulation 4G, appliquer les performances de la 4G (le CPU est vraiment ralenti et pas seulement une simulation), ou tout laisser tel quel ;
  4. Stockage clairSi actif, vous obtiendrez la performance d’un nouveau visiteur, tandis que si non actif, vous obtiendrez les résultats d’un visiteur qui revient.

Attendez que le rapport soit généré et vous trouverez des valeurs qui indiquent le niveau de performance de chacune des catégories que vous avez sélectionnées précédemment.

En faisant défiler le panneau, vous verrez également toutes les suggestions pour améliorer les performances de votre page.

Trucs et astuces pour les développeurs Chrome

Est-ce que les panneaux sur le côté droit de la fenêtre vous dérangent ? Déplacez-les vers une autre fenêtre !

  1. Allez dans le panneau Console ;
  2. Appuyez sur les touches CTRL (ou Commande sur Mac) + Shift + P ;
  3. Type désarmer et sélectionnez Déverrouiller dans une fenêtre séparée;
  4. Les panneaux s’ouvrent dans une fenêtre séparée.

Comment restaurer les panneaux dans la même fenêtre ?

  1. Dans la fenêtre du panneau, appuyez de nouveau sur CTRL (ou Commande sur Mac) + Maj + P ;
  2. Type banc des accusés;
  3. Choisissez le mode que vous préférez : en bas, à droite, ou restaurez à la dernière position que vous avez utilisée.

Outils de développement Google Chrome : comment les utiliser

Vous voulez analyser un élément particulier de la page, mais vous ne le trouvez pas dans le code ? Cliquez sur le symbole qui représente un carré avec la flèche, puis sélectionnez l’élément que vous voulez analyser.

Le panneau vous montrera immédiatement le point exact du code relatif à cet élément.

Outils de développement Google Chrome : comment les utiliser

La même chose se produit lorsque vous visitez une page Web, cliquez avec le bouton droit de la souris à un certain point et sélectionnez Inspecter l’élément.

Enfin, pour une meilleure lisibilité, essayez l’option thème sombre des outils pour les développeurs de Chrome. Accédez aux réglages en appuyant sur la touche F1 et dans la section Préférences > Apparence > Thème trié sur le volet Sombre.

Outils de développement Google Chrome : comment les utiliser

Conclusion

Que pensez-vous de cet outil ? Comme vous l’aurez deviné, c’est quelque chose de vraiment complet pour les développeurs les plus exigeants, et peut-être avez-vous un peu peur d’entendre parler de fonctions aussi complexes.

En fait, il contient également des fonctions simples qui peuvent être utiles à tout le monde, de celles qui permettent de vérifier si le site est réellement sensible à celles qui servent à l’analyse des performances.

Avez-vous déjà utilisé des outils de développement ?

Pensez-vous que d’autres navigateurs ont des outils plus utiles ?

Laissez-nous votre avis dans un commentaire !

Pour continuer votre lecture voici quelques articles similaires

Pas encore de commentaire, ajoutez le votre ci-dessous!


Ajouter un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *