Aller au contenu

Comment afficher des données sous forme de tableau dans la console Google Chrome ?

Antoine Brisset
Antoine Brisset
Temps de lecture : 2 min
Comment afficher des données sous forme de tableau dans la console Google Chrome ?
Photo by Adi Goldstein / Unsplash

Table des matières

Aujourd'hui, je vais te montrer une petite astuce pour afficher les éléments HTML d'une page (balises Hx, meta tags, liens, etc.) sous forme de tableau, directement dans la console Chrome.

Pour parvenir à ce résultat, je vais utiliser deux "utilitaires" bien pratiques : $$() et table().

Récupérer des données avec $$()

Une fois que tu as ouvert la console Chrome (raccourci clavier ⌥ ⌘ I), il te suffit d'aller dans l'onglet console, de taper $$ suivi du sélecteur CSS correspondant à ton besoin entre parenthèses, puis d'appuyer sur entrée.

Quelques exemples :

  • récupérer tous les h2 : $$('h2')
  • récupérer tous les liens : $$('a')
  • récupérer toutes les images : $$('img')
  • récupérer toutes les balises hreflang : $$('link[rel="alternate"][hreflang]')
  • récupérer toutes les balises Open Graph : $$('head > meta[property^="og"]')

Si tout se passe bien, tu devrais obtenir ce genre de résultat.

Les éléments <a> sont stockés dans un array

Afficher les données sous forme de tableau avec table()

Maintenant, on va mettre en forme les données en les affichant dans un joli tableau avec table().

Avec les liens, par exemple, ça donne : table($$('a')).

Les élements <a> sont affichés sous forme de tableau

OK. Ça commence à ressembler à quelque chose !

La dernière étape, c'est de filtrer les colonnes qui t'intéressent.

Dans mon cas, par exemple, je ne veux que l'ancre, l'URL et l'attribut rel des liens.

J'utise donc table($$('a'), ['text', 'href', 'rel']).

Ce qui me permet d'obtenir le résultat ci-dessous.

Les attributs text, href et rel des liens sont affichés dans un tableau

Et voilà ! Tu peux même exporter le tableau dans un fichier Google Sheets ou Excel en le surlignant et en faisant un copier/coller.

Pratique, non ?

Pour aller plus loin, tu peux jeter un coup d'œil à la doc ici et .

Chrome

Antoine Brisset Twitter

Consultant SEO depuis 2010. Je traque les clics inutiles et automatise les tâches répétitives pour gagner du temps dans mon quotidien de travailleur du web.


Articles Similaires

Membres Public

Trop de bookmarklets ? Utilise les snippets Chrome !

Au quotidien, j'utilise énormément les bookmarklets : vérification de balises meta, affichage du robots.txt, accès à la Google Search Console d'une page, etc. Le hic, c'est que j'en ai tellement, que je dois maintenant cliquer sur les deux petites flèches à droite pour en afficher certains. Il y a quelques

Trop de bookmarklets ? Utilise les snippets Chrome !
Membres Public

Comment afficher les Core Web Vitals d'une page avec les Chrome DevTools ?

L'outil d'inspection de Google Chrome regorge de fonctionnalités intéressantes. Pourtant, beaucoup d'entre elles sont cachées. Par exemple, savais-tu qu'il était possible d'afficher les Core Web Vitals d'une page directement dans la fenêtre du navigateur ? Personnellement, je me sers de ce raccourci quand je dois auditer rapidement un site, ou pour

Comment afficher les Core Web Vitals d'une page avec les Chrome DevTools ?
Membres Public

Comment faire la capture d'écran d'une page entière sur Chrome sans extension ?

Est-ce que tu savais qu'il était possible, sur Google Chrome, de faire un screenshot d'une page web au complet sans passer par une extension ? Pour ma part, j'ai découvert ça il y a seulement quelques semaines et depuis je ne me sers plus du tout de l'extension que j'avais installée

Comment faire la capture d'écran d'une page entière sur Chrome sans extension ?