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.
Passer du côté obscure : accéder à l’outil de développement
Tout ce que nous allons voir se fait à partir du navigateur internet Chrome de Google. Afin de pouvoir le télécharger : cliquez ici.
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 “
“, puis “Plus d’outils”, et finalement “Outils de développement”. (voir image ci-dessous)
Voilà qu’une nouvelle fenêtre s’ouvre sur votre navigateur :
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. - 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).
Note : J’écrirai bientôt un article plus détaillé sur cet onglet
Passons maintenant à…
La console : site web, parle moi !
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 ?
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 ?
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 !
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é ?
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.
Laissez moi en commentaire si vous avez des questions.
Pour aller plus loin
- Documentation officielle google
https://developers.google.com/web/tools/chrome-devtools/
