Accueil / Google Chrome / Comment utiliser les outils de développement Google Chrome

Comment utiliser les outils de développement Google Chrome :

Google Chrome Dev Tools

Comment utiliser les outils de développement Google Chrome ?

Saviez-vous qu’il est possible de faire parler un site internet ? Et que celui-ci a bien plus de choses à dire que l’on ne le pense.

Et bien c’est que ce que tout Webmaster professionnel sait faire. Je vous propose d’apprendre à parler avec vos sites et même celui des autres, grâce aux outils de développement que propose Google sur Chrome.

Ce que nous allons voir ensemble :

  • Passer du côté obscure : accéder à l’outil de développement
  • Les éléments : code source, viens à moi !
  • La console : site web, parle moi !
  • Network : Avec qui tu communique ?
  • Sources : qu’est-ce qu’il y a sous le capot ?
  • Performance : 3, 2, 1, chronomètre !
  • Audits : qualité or not qualité ?
  • Pour aller plus loin

Passer du côté obscure : accéder à l’outil de développement

Une fois que vous l’avez installé sur votre machine, allez sur le site de votre choix, le vôtre, celui de votre client ou autre

Maintenant, rendez-vous dans le menu en haut à droite de votre navigateur et cliquez sur “Menu Google Chrome“, puis “Plus d’outils”, et finalement “Outils de développement”. (voir image ci-dessous)

Chrome- Utiliser les outils

Voilà qu’une nouvelle fenêtre s’ouvre sur votre navigateur :

Chrome- Utiliser les outils

Nous allons ensemble parcourir chacun des onglets les plus importants de cette fenêtre ensemble et lister ce que ceux-ci permettent de faire. (Un article sera dédié prochainement pour chaque onglet.)

Commençons avec…

Les éléments : code source, viens à moi !

Nous voici dans le premier onglet : Elements. Celui-ci permet de visualiser ce qui permet au navigateur d’afficher le rendu actuel de votre site, c’est-à-dire, ce que l’on voit sur le site, ce qui est visible.

Comme vous le savez, afin de pouvoir afficher un site, le navigateur a besoin d’un code HTML, de CSS et du JS (JavaScript).

Ce sont ces trois langages que nous pouvons visualiser dans l’onglet Elements. (Si vous ne connaissez pas le HTML, CSS et JS, pas, pas de panique, je donne toutes les infos plus bas 🙂 )

Grâce à cet onglet, vous pouvez ainsi :

  • Voir le code HTML de votre page Ce qui permet de voir la structure de la page, de savoir quel élément contient quoi. Vous ne connaissez pas le HTML, c’est parfait, lisez mon article sur le sujet pour tout savoir : créer une page en HTML.
  • Trouver des éléments directement depuis l’affichage Ce qui permet en un clic de retrouver où se trouve un élément dans le code HTML.
  • Voir le CSS d’un élément HTML particulier Cela permet en un clin d’oeil de connaître le code CSS appliqué sur un élément HTML. Le CSS est une enigme pour vous ? Lisez mon article sur le CSS.
  • Modifier temporairement le CSS Idéal et plus pratique pour tester un morceau de code CSS avant de l’appliquer réellement sur votre site. Cela n’a aucun impact sur le site réellement, mais uniquement sur votre affichage actuel.
  • Simuler un autre appareil (téléphone, tablette, etc.) Ce qui est très pratique pour s’assurer que le site est bien compatible avec l’affichage sur mobile (responsive design).

Passons maintenant à…

La console : site web, parle moi !

Chrome- Utiliser les outils

Depuis la console, vous pouvez voir tous les messages d’erreurs, les messages système (logs), voir les messages envoyés par les différents code JavaScript (JS) ou d’erreur de chargement (d’image par exemple)

Network : Avec qui tu communique ?

Chrome- Utiliser les outils

L’interface Network nous permet de voir en tant réel tout les échanges que le site internet effectuer avec :

  • Le serveur Comme pour le chargement d’images, de contenu additionnel
  • Des ressources externes Cela peut être des morceaux de codes
  • Appels à des API Pour poser des questions à d’autres applications, des fonctionnalités comme GoogleAnalytics, etc.

Sources : qu’est-ce qu’il y a sous le capot ?

Chrome- Utiliser les outils

Nous retrouvons aussi la fenêtre Sources qui permet d’accéder aux fichiers CSS et JS que le code HTML inclus lors de l’affichage.

Contrairement à l’onglet Elements où nous voyons le CSS d’un élément en particulier, ici nous voyons le fichier CSS en entier sans tri particulier.

Performance : 3, 2, 1, chronomètre !

Chrome- Utiliser les outils

Cet onglet des outils de développement permet de chronométrer le temps d’exécution de chaque partie du site.

C’est d’une précieuse aide lorsque l’on souhaite savoir d’où vient un ralentissement et apporter des optimisations sur le chargement du site.

Audits : qualité or not qualité ?

Chrome- Utiliser les outils

Cet onglet des outils de développement est le prolongement du service PageSpeed de Google.

Ce formidable outils permet de scanner votre site internet pour vous donner des pistes technique d’améliorations :

  • Controle de rapidité
  • Temps de chargement
  • Gestion du mobile

J’espère que cet article vous aura plus, n’hésitez pas à le partager si vous avez appris quelque chose que vous ne connaissiez pas encore.