Trop de bookmarklets ? Utilise les snippets Chrome !

26 juil. 2023 — Temps de lecture : 2 min

Table des matières

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 semaines, heureux hasard, j'ai découvert une toute nouvelle façon de sauvegarder des petits bouts de code JS dans Google Chrome : les snippets.

Les snippets Google Chrome, c'est quoi ?

En fait, ce sont des scripts JavaScript qu'on peut sauvegarder dans la console des Chrome DevTools pour pouvoir les réutiliser plus tard.

Autrement dit, au lieu de retaper à chaque fois le le même code JS en console, on peut l'enregistrer pour le faire tourner chaque fois qu'on en a besoin.

Plus besoin de passer obligatoirement par la case bookmarklets !

Comment créer un snippet ?

Pour créer un snippet, c'est simple :

ouvre la console avec ⌥ ⌘ C (Mac) ou CTRL ⇧ C (Windows)
clique sur l'onglet "Sources"
clique sur les 2 petites flèches de droite, puis sur "Snippets"
clique sur "New Snippet"
ajoute ton bout de code JS
enregistre-le avec ⌘ S (Mac) ou CTRL S (Windows)
donne-lui un nom

Comment lancer un snippet ?

Pour exécuter le snippet, trois possibilités :

soit en faisant un clic droit dessus, puis en cliquant sur "Run"
soit en le sélectionnant et en cliquant sur la petite flèche en bas à droite
soit en lançant un raccourci :
- ouvrir le menu de commande avec ⌘ O (Mac) ou CTRL O (Windows)
- puis taper ! suivi du nom du snippet

Ici je récupère les balises h2 avec le code `console.log($$("h2").map(x => x.innerText).join("\n"))`

Je te conseille ce site si tu souhaites avoir des exemples d'utilisation : ajout de jQuery dans la page, affichage des cookies, inspection des headers, etc.

Et voilà, tu as maintenant sous la main une alternative sympa aux bookmarklets !

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.

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

15 mars 2023

Payant Membres Public

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

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

7 déc. 2022

Payant 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