Avez-vous remarqué que vous copiez sans cesse le même code JavaScript dans la console des DevTools? Un extrait de débogage, une extraction de données d’une page, une modification rapide du DOM, et à chaque fois vous devez le saisir manuellement ou le coller depuis un bloc-notes.

Les Chrome DevTools intègrent un éditeur d’extraits directement dans l’onglet Sources depuis plusieurs années. Vous écrivez le script une fois, vous lui donnez un nom et vous l’exécutez sur n’importe quelle page en un clic ou avec un raccourci. C’est plus rapide qu’un bookmarklet et cela ne nécessite aucune extension.

Nous allons parcourir tout le cycle étape par étape: de l’ouverture du panneau Snippets jusqu’à des exemples concrets prêts à l’emploi que vous pourrez récupérer pour vous.

💡 Aperçu rapide:

• Ouvrez le panneau Snippets via l’onglet Sources ou le menu de commandes
• Créez un nouvel extrait et donnez-lui un nom explicite
• Écrivez le code JavaScript dans l’éditeur et enregistrez avec Ctrl+S
• Exécutez l’extrait avec le bouton Run ou via le menu de commandes avec !
• Parcourez des exemples pratiques: vider une page, collecter des données, modifier des styles

Ce que sont les snippets et pourquoi vous en avez besoin

Un snippet est un fragment de JavaScript enregistré directement dans les Chrome DevTools. Contrairement au code saisi dans la console, il ne disparaît pas lorsque vous rechargez la page ou fermez le navigateur; il reste dans l’onglet Sources en attendant d’être exécuté.

Le principal avantage par rapport à la console: un snippet s’exécute dans le contexte de la page courante et a pleinement accès à son DOM, à ses variables et à ses API. Vous pouvez écrire un script pour extraire des données de n’importe quel site, modifier la mise en page ou automatiser des tâches répétitives, et l’exécuter quand vous le souhaitez sans avoir à le retaper.

Une approche alternative consiste à utiliser des bookmarklets (des marque-pages avec javascript: dans l’URL), mais ils sont limités par la longueur de l’URL et peu pratiques pour du code multiligne. Dans Firefox, l’équivalent était Scratchpad, mais il a été retiré du navigateur à partir de la version 70 et remplacé par l’éditeur de console multiligne.

Regardez ce court tutoriel vidéo sur les snippets; il est en anglais, mais toutes les actions sont montrées à l’écran et correspondent exactement aux étapes décrites ci-dessous.

Voici à quoi ressemble un flux de travail typique avec un snippet: la capture d’écran montre la page d’origine à gauche et le code dans l’éditeur à droite.

Le code source de cet exemple fait trois choses: il affiche un message dans la console, vide document.body et insère un nouveau paragraphe:

1
console.log('Hello, Snippets!');
2
document.body.innerHTML = '';
3
var p = document.createElement('p');
4
p.textContent = 'Hello, Snippets!';
5
document.body.appendChild(p);

Après exécution, la page change complètement: Hello, Snippets! apparaît dans la console et le contenu du body est remplacé par un seul paragraphe.

Comment ouvrir le panneau des snippets

Le panneau Snippets se trouve dans l’onglet Sources. Il y a deux façons d’y accéder: avec la souris et via le menu de commandes.

Première méthode: à la souris

Ouvrez les DevTools (F12 ou Ctrl+Shift+I) et allez dans l'onglet Sources. Sur la gauche, vous verrez le panneau Page avec l'arborescence des fichiers de la page; il est ouvert par défaut.

Cliquez sur l'onglet Snippets dans la même colonne de gauche. Si l'onglet n'est pas visible, cliquez sur la flèche More tabs (>>); un menu déroulant s'ouvrira avec les onglets masqués, dont Snippets.

Deuxième méthode: le menu de commandes

Le menu de commandes est le moyen le plus rapide de naviguer dans les DevTools si vous retenez le raccourci.

• Placez le focus n'importe où dans les DevTools.
• Appuyez sur Ctrl+Shift+P (Windows/Linux) ou Cmd+Shift+P (Mac) pour ouvrir le menu de commandes.
• Commencez à taper snippets et sélectionnez Show Snippets, puis appuyez sur Enter.

Créer un nouveau snippet

Le panneau Snippets est ouvert; ajoutons maintenant le premier script.

Via le panneau Sources

Dans le panneau Snippets, cliquez sur le bouton New snippet. Saisissez le nom du snippet et appuyez sur Enter; il apparaîtra dans la liste à gauche.

Le nom doit être explicite; dans un mois, vous ne vous souviendrez plus de ce que fait snippet-3. Écrivez «clear-page-and-log», «extract-product-prices» ou «toggle-dark-mode».

Via le menu de commandes

Même raccourci Ctrl+Shift+P / Cmd+Shift+P, mais tapez cette fois snippet et sélectionnez Create new snippet, puis Enter.

Le nouveau snippet est créé avec un nom par défaut; renommez-le en faisant un clic droit et en sélectionnant Rename.

Modifier le code d'un snippet

Cliquez sur le nom du snippet dans le panneau de gauche; l'éditeur de code s'ouvrira à droite. C'est un éditeur complet avec coloration syntaxique, numéros de ligne et autocomplétion pour JavaScript.

Écrivez le code comme vous le feriez dans n'importe quel éditeur. Toutes les API standard du navigateur sont disponibles: les objets document et window, les fonctions fetch et console, le stockage localStorage. Tout ce que la page voit.

Lorsque le code n'est pas sauvegardé, un astérisque apparaît à côté du nom du snippet. Sauvegardez: Ctrl+S (Windows/Linux) ou Cmd+S (Mac).

Utilisez Ctrl+Z / Cmd+Z pour annuler; l'historique des modifications fonctionne pendant la session d'édition.

Exécuter un snippet

Avec le bouton Run du panneau Sources

Ouvrez le snippet souhaité dans l'éditeur. Cliquez sur le bouton Run (icône Play) en bas du panneau:

Ou appuyez sur Ctrl+Enter (Windows/Linux) / Cmd+Enter (Mac). Le snippet s'exécutera dans le contexte de la page actuellement ouverte.

Via le menu de commandes avec un point d'exclamation

Ouvrez le menu de commandes (Ctrl+Shift+P / Cmd+Shift+P), supprimez le symbole >, tapez ! et commencez à saisir le nom du snippet. Les DevTools afficheront les options correspondantes:

Sélectionnez celle dont vous avez besoin et appuyez sur Enter. Cette méthode est pratique lorsque vous ne voulez pas basculer vers l'onglet Sources.

Renommer et supprimer

Ces deux opérations se font depuis le panneau Snippets en faisant un clic droit sur le nom du snippet:

• Rename: attribuez un nouveau nom,
• Remove: supprimez définitivement le snippet.

La suppression ne demande pas de confirmation, soyez donc prudent. Avant de supprimer un script complexe, copiez le code dans un fichier texte.

Exemples pratiques de snippets

Nous avons couvert la théorie; voici maintenant plusieurs scripts prêts à l'emploi que vous pouvez copier, sauvegarder en tant que snippet et utiliser immédiatement.

Nettoyer une page pour une capture d'écran

Supprime tout le contenu et insère un fond blanc propre, utile pour réaliser des captures d'écran destinées à un portfolio ou à de la documentation:

1
document.body.innerHTML = '';
2
document.body.style.backgroundColor = '#fff';

Collecter tous les liens d’une page

Extrait toutes les URL et les affiche dans la console sous forme de liste. Utile pour auditer une page ou collecter des données:

1
const links = [...document.querySelectorAll('a[href]')];
2
links.forEach((a, i) => console.log(`${i + 1}. ${a.href} — "${a.textContent.trim()}"`));
3
console.log(`Всего ссылок: ${links.length}`);

Mode sombre sur n’importe quel site

Applique une inversion à l’ensemble de la page, fonctionne même en l’absence de thème sombre intégré:

1
document.documentElement.style.filter = 'invert(1) hue-rotate(180deg)';
2
const imgs = document.querySelectorAll('img, video');
3
imgs.forEach(el => el.style.filter = 'invert(1) hue-rotate(180deg)');

Mettre en évidence tous les boutons d’une page

Encadre chaque <button> et input[type="submit"] avec une bordure rouge, pratique pour vérifier la mise en page:

1
document.querySelectorAll('button, input[type="submit"], [role="button"]').forEach(el => {
2
  el.style.outline = '3px solid red';
3
});

Tous ces extraits peuvent être combinés et étendus pour vos propres besoins. Enregistrez-les une fois, utilisez-les pendant des années.

⁉️🤔 Foire aux questions

Où les snippets Chrome DevTools sont-ils physiquement stockés?

Les snippets sont stockés dans le profil Chrome, dans le fichier Preferences (JSON) situé sous le chemin %LocalAppData%\Google\Chrome\User Data\Default\Preferences sur Windows ou ~/Library/Application Support/Google/Chrome/Default/Preferences sur Mac. Ils ne sont PAS synchronisés via un compte Google; si vous changez d’ordinateur ou réinstallez le navigateur, les snippets sont perdus. Pour les transférer manuellement, copiez la section devtools.preferences.snippets d’un fichier Preferences vers un autre, navigateur fermé.

Quelle est la différence entre un snippet et un bookmarklet?

Un bookmarklet est un marque-page dont l’URL commence par javascript:, limité par la taille de l’URL (environ 2000 caractères) et peu pratique à modifier. Un snippet est un véritable éditeur intégré aux DevTools, sans limite de longueur, avec coloration syntaxique et persistance entre les sessions. Un snippet peut aussi être exécuté avec le raccourci Ctrl+Enter sans avoir à quitter le clavier.

Peut-on exécuter un snippet automatiquement au chargement de la page?

Pas directement. Un snippet nécessite toujours une exécution manuelle. Si vous avez besoin d’automatisation au chargement, utilisez une extension Chrome (script de contenu) ou Tampermonkey/Violentmonkey avec des userscripts; ils se déclenchent sur l’événement de chargement de la page et ne nécessitent aucune intervention manuelle.

Comment sauvegarder mes snippets avant de réinstaller Chrome?

Ouvrez les DevTools, allez dans Sources → Snippets, faites un clic droit sur chaque snippet et sélectionnez Save as; cela enregistrera un fichier .js sur le disque. Vous pouvez aussi ouvrir chrome://version/, repérer le chemin du profil, fermer Chrome et copier la section JSON devtools.preferences.snippets depuis le fichier Preferences.

Pourquoi mon snippet ne voit-il pas les variables de la console?

Un snippet s’exécute dans son propre scope; il n’a pas accès aux variables déclarées dans la console via var/let/const dans le scope global. Pour transmettre des données, affectez une valeur directement à window: window.myData = {...} dans la console, puis lisez window.myData dans le snippet. Ou l’inverse: le snippet peut écrire des données sur window, et la console peut les lire.

Est-ce que cela vaut la peine d’apprendre les snippets en 2026?

Les snippets font partie de ces outils qui ne changent pas pendant des années, mais qui accélèrent radicalement le travail routinier si vous ne les oubliez pas. Cinq minutes passées à créer un script pour collecter des liens ou nettoyer une page vous épargnent des dizaines d’opérations manuelles chaque mois.

Commencez par trois snippets simples: collecter des données depuis des tableaux sur une page, vider rapidement le DOM pour des captures d’écran et mettre en surbrillance un élément par sélecteur. Sauvegardez-les, et la prochaine fois que vous aurez besoin d’extraire des données d’un site tiers ou de vérifier une mise en page, vous réglerez cela en quelques secondes au lieu de passer une demi-heure à faire du copier-coller.

Pensez simplement à sauvegarder: les snippets ne sont pas synchronisés entre les appareils et, sans une copie du fichier Preferences, ils disparaîtront lors de la réinstallation du système.