Les Chrome DevTools sont un ensemble d'outils de développement web intégrés dans le navigateur Google Chrome. Initialement créés pour les développeurs web, ils se sont très vite installés dans l’arsenal des responsables SEO en leur offrant une variété de fonctionnalités pour faciliter le diagnostic et la résolution des problèmes, améliorer la performance, l'accessibilité et l'expérience utilisateur de leur site web. Dans cet article, nous vous proposons un aperçu de cette boîte à outils native, gratuite et puissante, ainsi que 5 cas concrets d'utilisation pour différentes tâches SEO.

Sommaire :

  1. Comment accéder aux Chrome DevTools ?
  2. Comment les Chrome DevTools sont-ils organisés ?
  3. Accéder aux en-têtes HTML de la page.
  4. Changer l’user-agent.
  5. Effectuer une capture d’écran d’une page web entière.
  6. Simuler une géolocalisation précise avec capteurs.
  7. Tester ses recommandations de Webperfs :
    1. Blocage de requête réseau
    2. Remplacements locaux

Comment accéder aux Chrome DevTools ?

Chrome DevTools est fourni nativement et gratuitement avec votre navigateur Google Chrome. Ainsi, vous n’avez rien à installer. Pour commencer à l’utiliser :

  • Sur Windows : appuyez sur la touche F12 de votre clavier ou faites un clic droit sur la page et sélectionnez "Inspecter" dans le menu contextuel.
  • Sur Mac : Appuyez sur les touches Option + Commande + I simultanément sur votre clavier, ou faites un clic droit sur la page et sélectionnez "Inspecter l'élément" dans le menu contextuel.

Les Chrome DevTools s'afficheront dans une nouvelle fenêtre ou un nouveau volet, selon vos paramètres de navigateur.

Comment les Chrome DevTools sont-ils organisés ?

Chrome DevTools est une boîte à outils assez riche. Certains sont facilement trouvables, d’autres plus cachés dans les profondeurs des onglets et menus déroulants.

Commençons par nous faire une vision macro de l’outil. Les principaux rapports de Chrome DevTools sont répartis par onglets.

Onglet Utilisation
Eléments Cet onglet permet d'inspecter et de manipuler la structure du code HTML et des styles CSS d'une page. Vous pouvez voir l'arborescence des éléments HTML, modifier leur contenu, appliquer des styles CSS, ajouter des attributs, etc. Utile pour voir le code HTML avec le DOM (comprenant aussi des éléments dynamiques), non visible lors d’une simple consultation via la touche F12.
Console Utile plus pour les développeurs qu’aux responsables SEO. La console permet d'exécuter du code JavaScript, d'afficher des messages de débogage, des erreurs et des avertissements, et d'interagir avec la page en cours d'exécution. Elle est utile pour tester des expressions, exécuter des commandes DOM et résoudre les problèmes de scripts.
Sources Cet onglet permet de voir toutes les ressources locales utilisées par la page : styles, scripts, images, tous les autres fichiers appelés. Dans le SEO, on aime la possibilité de créer une version locale de la page et de tester directement l’impact des différentes optimisations.
Réseau Cet onglet affiche les requêtes réseau effectuées par la page, y compris les fichiers chargés, les requêtes AJAX, les temps de réponse, les en-têtes HTTP, etc. Pour les enjeux SEO, il permet de mieux comprendre de quoi est composée la page, analyser l’ordre de chargement de ressources, de simuler différentes conditions de réseau et de dessiner le fameux rapport de « Waterfall ».
Performances Cet onglet permet de mesurer et d'analyser les performances d'une page Web. Vous pouvez enregistrer des profils de performances, identifier les goulots d'étranglement, analyser les temps de chargement, les événements de rendu et d'interaction, et obtenir des conseils d'optimisation.
Mémoire De nouveau, surtout utile pour les développeurs. Cet onglet permet de profiler l'utilisation de la mémoire par une page Web, de détecter les fuites de mémoire et d'optimiser l'empreinte mémoire.
Appli Cet onglet offre des outils pour inspecter et manipuler le cache, les données locales, les index de base de données, les cookies, les manifestes d'application, les services workers (par exemple, si on a affaire aux PWA), etc.
Lighthouse Cet onglet permet d'effectuer toute une série d’audits pour améliorer les performances d’une page Web. Il fournit des rapports détaillés sur les performances, l'accessibilité, la Progressive Web App (PWA), les meilleures pratiques et le référencement (SEO).

Les fonctionnalités qui n’ont pas trouvé leur place dans les onglets principaux sont accessibles via :

La suite de cet article est réservée aux abonnés.

 

Alexis Rylko
Directeur technique SEO chez iProspect France

Articles similaires :