5 Bookmarklets Utiles pour les Développeurs

Un bookmarklet est un signet dont l’URL est une ligne unique de JavaScript préfixée par javascript: ; cliquer dessus exécute ce code sur la page courante au lieu de naviguer vers une autre adresse. Cela fait des bookmarklets la méthode la plus rapide, sans installation, pour modifier une page en direct, déboguer la mise en page, révéler un champ masqué ou capturer une couleur — sans extension, sans panneau DevTools, sans étape de build. Cet article vous présente cinq bookmarklets véritablement utiles et prêts à l’emploi, fonctionnant dans les navigateurs Chromium actuels. Il explique dans quels cas les utiliser et aborde les pièges courants (parsing sur une seule ligne, blocage par la Content-Security-Policy, limites de same-origin) avant de vous montrer comment écrire les vôtres.

Installez-les de l’une des deux façons suivantes : créez un nouveau signet et collez le code javascript: comme URL, ou faites glisser un lien dont l’attribut href contient le code vers votre barre de signets. Chaque extrait ci-dessous tient déjà sur une seule ligne — collez-le tel quel.

1. Modifier une page en direct avec le mode design

Transformez toute la page en document éditable pour tester le contenu, l’espacement et la mise en page sur un site en production sans ouvrir les DevTools :

javascript:document.designMode="on";void 0;

Définir document.designMode à "on" rend l’intégralité du document éditable — le même effet que contenteditable="true", mais appliqué à toute la page plutôt qu’à un seul élément. Cliquez dans n’importe quel titre ou paragraphe et tapez. Utilisez ce bookmarklet lorsqu’un intervenant demande « et si ce bouton disait X » ou que vous souhaitez vérifier si un nom de produit plus long casse une barre de navigation, sans toucher au code source.

Le void 0 final est important. Une URL javascript: qui se termine par une chaîne de caractères est traitée comme un document HTML vers lequel le navigateur navigue ; void 0 force une valeur de retour non-chaîne afin que la page reste en place. Vous préférez modifier une seule zone ? Remplacez par javascript:void(document.body.contentEditable=true).

2. Teinter chaque élément pour déboguer la mise en page

Visualisez les contours de chaque élément en un coup d’œil — indispensable pour repérer les débordements, les désalignements et les marges parasites :

javascript:document.querySelectorAll("*").forEach(e=>e.style.background="rgb(0 0 0 / 10%)");void 0;

Ce code applique un fond noir à 10 % d’opacité à chaque élément de la page. Les couches semi-transparentes s’empilant, les éléments imbriqués s’affichent progressivement plus sombres, ce qui vous permet de lire la profondeur du DOM à l’œil nu et d’identifier immédiatement quel conteneur est plus large que son parent. Si vous préférez des contours nets aux fonds dégradés, remplacez la ligne de fond par un contour : e.style.outline="1px solid rgb(255 0 0 / 40%)". Les contours n’affectent pas la mise en page — contrairement aux bordures, ils n’occupent pas d’espace dans le modèle de boîte — de sorte que la géométrie de la page que vous déboguez reste intacte.

3. Révéler les champs de mot de passe masqués

Basculez chaque champ de mot de passe en texte clair :

javascript:(()=>{document.querySelectorAll('input[type=password]').forEach(el=>el.type='text')})();

Ce code parcourt chaque input[type=password] et bascule son type en text, exposant la valeur courante. Utilisez-le lors du débogage d’un formulaire d’authentification, pour vérifier ce qu’un gestionnaire de mots de passe ou le remplissage automatique du navigateur a réellement saisi, ou pour confirmer qu’un collage n’a pas introduit un espace de fin. Il lit le DOM en direct de la même façon qu’un débogueur intégré à la page — les replays de session sur des flux de connexion défaillants révèlent fréquemment que le remplissage automatique a écrit une valeur subtilement incorrecte, et c’est la façon la plus rapide de confirmer manuellement ce type de bug.

4. Capturer n’importe quelle couleur à l’écran avec l’EyeDropper natif

Sélectionnez n’importe quel pixel à l’écran et obtenez sa valeur hexadécimale :

javascript:void(async()=>{try{prompt('HEX:',(await new EyeDropper().open()).sRGBHex)}catch(e){alert(e)}})()

Ce code appelle l’API EyeDropper, qui transforme le curseur en loupe-sélecteur ; la couleur choisie est retournée sous forme de sRGBHex et affichée dans une boîte prompt que vous pouvez copier. Un point important à retenir : l’API EyeDropper est réservée à Chromium (Chrome et Edge), disponible uniquement dans des contextes sécurisés (HTTPS), et Firefox et Safari ne la supportent pas en 2026. Elle est également soumise à une interaction utilisateur — open() lève une exception si elle n’est pas déclenchée par une activation utilisateur transitoire — mais un clic sur un bookmarklet est un geste utilisateur, donc l’exécution se déroule proprement. Le bloc try/catch absorbe le rejet obtenu si vous appuyez sur Échap au lieu de sélectionner une couleur.

5. Injecter les DevTools mobiles avec eruda

Obtenez une console complète et un inspecteur DOM sur n’importe quelle page — y compris sur un téléphone sans DevTools :

javascript:(function(){var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/eruda';s.onload=function(){eruda.init()};document.head.appendChild(s)})();

Ce code ajoute une balise <script> qui charge eruda — une console pour navigateurs mobiles dont la version stable actuelle est la 3.4.3 — et appelle eruda.init() une fois le chargement terminé, faisant apparaître un panneau DevTools superposé à la page. C’est la solution idéale pour déboguer sur de vrais appareils où vous ne pouvez pas connecter un inspecteur de bureau. Deux points à noter : l’URL non épinglée cdn.jsdelivr.net/npm/eruda sert toujours la dernière version publiée, et le rythme de publication d’eruda a ralenti (aucune nouvelle version npm depuis plus d’un an), donc considérez-le comme stable mais non activement maintenu. Comme il charge un script externe, ce bookmarklet est soumis à la limitation CSP décrite ci-après.

Pourquoi mon bookmarklet ne s’exécute-t-il pas ?

Quatre modes d’échec expliquent la quasi-totalité des cas où « ça ne fonctionne tout simplement pas » :

Le cas de la CSP est celui à bien intégrer : sur un site avec une Content-Security-Policy stricte — essayez le bookmarklet eruda sur GitHub par rapport à une page permissive et observez la différence — la console n’apparaîtra tout simplement pas, et une violation CSP sera consignée dans la (vraie) console à la place. La navigation javascript: elle-même peut également être bloquée par script-src.

Comment écrire votre propre bookmarklet ?

Pour écrire votre propre bookmarklet, enveloppez votre code dans une IIFE à l’intérieur d’une URL javascript: et terminez les expressions qui modifient le DOM par void 0 afin que la page ne navigue pas vers une valeur de retour stringifiée :

javascript:(function(){/* your code here */})();

L’IIFE maintient vos variables hors de la portée globale de la page, et javascript:foo() est conventionnellement préfixé par void pour éviter une navigation accidentelle si l’appel retourne une chaîne. Écrivez et déboguez la logique dans la console DevTools d’abord, puis réduisez-la sur une seule ligne — en supprimant les commentaires // — et collez-la comme URL du signet. Tout ce que vous pouvez saisir dans la console, vous pouvez l’emporter avec vous sous forme de bookmarklet en un clic.

FAQ

Pourquoi mon bookmarklet s'arrête-t-il en cours d'exécution ?

Un bookmarklet tient sur une seule ligne, donc un commentaire de ligne // met en silence tous les caractères qui le suivent, y compris vos accolades fermantes et vos appels de fonctions. Remplacez tous les commentaires // par des commentaires de bloc /* */, ou supprimez-les entièrement. Lorsque vous réduisez du code multi-lignes de la console en bookmarklet, supprimez d'abord tous les commentaires //, car le saut de ligne qui les terminerait normalement n'existe plus sur une seule ligne.

Quelle est la différence entre designMode et contentEditable dans un bookmarklet ?

Définir document.designMode à 'on' rend l'intégralité du document éditable en une seule instruction, tandis que contentEditable se définit par élément, donc document.body.contentEditable = true ne rend éditable que la région du body. Utilisez designMode lorsque vous souhaitez cliquer dans n'importe quel titre, paragraphe ou bouton sur toute la page ; utilisez contentEditable lorsque vous souhaitez limiter l'édition à un seul conteneur et laisser le reste de la page fixe.

Le bookmarklet EyeDropper fonctionne-t-il dans Firefox ou Safari ?

Non. L'API EyeDropper est réservée à Chromium, fonctionnant dans Chrome et Edge uniquement en HTTPS dans un contexte sécurisé ; Firefox et Safari ne la supportent pas en 2026. L'API requiert également une activation utilisateur transitoire, mais un clic sur un bookmarklet compte comme un geste utilisateur, donc open() s'exécute proprement lorsqu'il est déclenché de cette façon. Dans les navigateurs non supportés, le bookmarklet lève une exception car le constructeur EyeDropper est indéfini.

Un bookmarklet peut-il effectuer des requêtes fetch cross-origin ?

Pas librement. Un appel fetch() à l'intérieur d'un bookmarklet s'exécute dans le contexte de la page courante, il est donc soumis à la politique de same-origin et à la directive connect-src de la CSP du site. Les requêtes vers une origine différente sont bloquées à moins que cet endpoint n'envoie les en-têtes CORS appropriés. Limitez les appels réseau des bookmarklets au même origin que la page ou à des APIs compatibles CORS ; il n'existe aucune solution de contournement côté client pour la politique d'un site.