Un navigateur
piloté
par ton IA.

Avant de commencer

Tu as déjà essayé de demander à ChatGPT ou Claude d'aller lire une page web ? Tu connais la frustration. Parfois il y arrive, parfois il te dit « Désolé, je ne peux pas accéder à cette URL ». Ou pire : il hallucine un contenu qu'il n'a jamais vu, te raconte des choses qui n'existent pas, te cite des chiffres inventés. Tu cliques le lien pour vérifier, et tu te rends compte que la page parle d'un sujet complètement différent.

Dev-browser règle ce problème. C'est un navigateur sans fenêtre (Chromium en coulisse, comme Chrome sans les pubs) que ton IA pilote en écrivant un petit script. Tu n'ouvres jamais Chrome toi-même. Tu dis ce que tu veux, Claude écrit le script, il s'exécute dans un Chrome invisible, tu récupères ce qui t'intéresse · le texte d'un article, un chiffre précis dans un tableau, un screenshot d'une page, le rendu d'une page que tu viens de modifier. Sous le capot, dev-browser s'appuie sur la même mécanique que Playwright et Puppeteer (les deux librairies de référence pour piloter un navigateur), mais tu ne touches jamais leur API : Claude le fait pour toi.

Je l'ai installé sur mon Mac il y a deux mois. Aujourd'hui, je l'utilise presque tous les jours : vérifier qu'une page est bien déployée, scraper un site que Claude ne connaît pas, prendre un screenshot pour valider un design, tester le formulaire d'inscription de mon site sans ouvrir Chrome à la main, capturer un article concurrent avant qu'il change.

Le déclic, pour moi, ça a été le moment où j'ai compris que dev-browser n'est pas un outil de dev. C'est un outil d'entrepreneur curieux qui veut que son IA puisse vraiment faire ce qu'il lui demande. Tu ne te bats plus avec des « je ne peux pas accéder », tu ne copies-colles plus du contenu à la main, tu n'ouvres plus dix onglets Chrome pour vérifier dix pages. Tu délègues, et ton IA exécute pour de vrai.

Voici les principales alternatives en un coup d'œil pour situer dev-browser dans l'écosystème.

Le concept · un navigateur que tu ne vois pas

Le vrai problème résolu

Claude connaît énormément de pages grâce à son entraînement. Mais deux limites :

1. Il ne connaît pas les pages récentes (créées après son cutoff, c'est-à-dire la date où son entraînement s'est arrêté).
2. Il ne peut pas interagir avec une page : cliquer, remplir, attendre qu'un script JS se lance, faire défiler.

Dev-browser corrige les deux. Il ouvre vraiment un navigateur (Chromium en coulisse, comme Chrome sans les pubs) sans fenêtre graphique. Claude y envoie des ordres en JavaScript : « va sur cette page, attends 3 secondes, récupère le texte du h1, clique sur ce bouton ».

Comment ça marche, sans jargon

Imagine un robot qui ouvre Chrome à ta place et fait exactement ce que tu lui dis. C'est ça, dev-browser. Sauf que le robot, c'est ton ordi, et que la fenêtre Chrome, tu ne la vois jamais. Tout se passe en coulisse.

Concrètement, voilà ce qui se passe quand tu demandes à Claude « va voir si ma page est en ligne » :

1. Claude écrit un petit script (un mini-programme de 5-10 lignes, en JavaScript, le langage des pages web).
2. Le terminal lance Chrome en arrière-plan · ce qu'on appelle « headless » (sans tête, sans fenêtre visible). Il s'ouvre, mais sur un écran que personne ne voit.
3. Dev-browser intercepte le script et l'exécute dans ce Chrome invisible : aller sur l'URL, attendre que la page charge, lire le contenu, cliquer un bouton, ce que tu veux.
4. Le résultat revient dans ton terminal · le texte récupéré, l'image du screenshot, les données extraites. Claude lit le résultat et te répond en français dans la conversation.

Tu n'as jamais vu Chrome s'ouvrir. Tu n'as jamais cliqué. Tu n'as jamais écrit une ligne de code. Tu as juste demandé en français, et tu as reçu la réponse en français. C'est tout.

Le script, à quoi ça ressemble (pour ta culture)

Tu n'écriras jamais ça toi-même, mais voilà ce que Claude tape dans ton terminal quand tu lui demandes de récupérer le titre de jerwis.fr :

dev-browser --headless <<'EOF'
      const page = await browser.getPage("main");
      await page.goto("https://jerwis.fr");
      const titre = await page.evaluate(() => document.querySelector("h1").innerText);
      console.log(titre);
    EOF
    

Lecture en français : « ouvre un navigateur, va sur jerwis.fr, récupère le texte du gros titre (le h1), affiche-le dans le terminal ». Fin. Le navigateur se ferme tout seul, le titre s'affiche, Claude te le renvoie. Cinq secondes chrono.

5 cas concrets · même si tu n'es pas dev

Sur le papier, dev-browser sonne « outil de dev pour scraper et tester ». Dans la vraie vie, c'est un assistant qui te débloque des tâches que tu ferais à la main, mal, en perdant du temps. Voilà 5 cas où je m'en sers, qui n'ont rien à voir avec du code.

dev-browser --headless <<'EOF'
      const page = await browser.getPage("main");
      await page.goto("https://tonsite.fr/tarifs");
      const texte = await page.evaluate(() => document.body.innerText);
      console.log(texte.includes("49 €") ? "OK 49€ visible" : "MANQUANT");
    EOF
    

dev-browser --headless <<'EOF'
      const page = await browser.getPage("main");
      await page.goto("https://site-bloqué.com/article");
      await new Promise(r => setTimeout(r, 3000));
      const article = await page.evaluate(() => document.querySelector("article").innerText);
      console.log(article);
    EOF
    

Cas 03 · Capturer un design pour t'en inspirer

Tu vois un beau site, tu veux le partager à ton designer · screenshot en 5 secondes

Tu tombes sur un site qui te plaît (un concurrent, une landing page bien foutue, le portfolio d'un freelance). Tu veux l'envoyer à ton designer ou le coller dans une réunion. Tu dis à Claude : « prends un screenshot de stripe.com en taille desktop ». Il lance dev-browser, capture l'image en 1920×1080, te la montre dans la conversation, tu la sauvegardes.

Pratique aussi pour archiver une page avant qu'elle change. Une promo, une mention légale, une version d'une page concurrent que tu veux garder. Dev-browser fige l'instant, tu as la preuve.

La commande :

dev-browser --headless <<'EOF'
      const page = await browser.getPage("main");
      await page.setViewportSize({ width: 1920, height: 1080 });
      await page.goto("https://stripe.com");
      await page.screenshot({ path: "stripe-home.png", fullPage: true });
      console.log("Screenshot enregistré : stripe-home.png");
    EOF
    

dev-browser --headless <<'EOF'
      const page = await browser.getPage("main");
      await page.goto("https://tonsite.fr");
      await page.fill("input[type=email]", "test@example.com");
      await page.click("button[type=submit]");
      await new Promise(r => setTimeout(r, 2000));
      const message = await page.evaluate(() => document.querySelector(".success-msg")?.innerText);
      console.log(message || "Aucun message de succès trouvé");
    EOF
    

dev-browser --headless <<'EOF'
      const page = await browser.getPage("main");
      await page.setViewportSize({ width: 390, height: 844 });
      await page.goto("https://tonsite.fr/tarifs");
      await page.screenshot({ path: "tarifs-mobile.png", fullPage: true });
      console.log("Mobile capturé");
    EOF
    

Mes 3 commandes préférées · prêtes à copier

Tu n'as pas besoin de retenir ces commandes. Tu peux les copier, les coller dans ton terminal en remplaçant l'URL, et c'est parti. Ou mieux : tu les montres à Claude une fois en disant « voilà mon style de commande, garde-le », et il les réutilisera tout seul ensuite.

Commande 01 · Screenshot d'une page entière

Le pain quotidien. Capturer un site complet, du haut en bas, en taille desktop par défaut.

dev-browser --headless <<'EOF'
      const page = await browser.getPage("main");
      await page.goto("https://jerwis.fr");
      await new Promise(r => setTimeout(r, 2000));
      await page.screenshot({ path: "capture.png", fullPage: true });
      console.log("Screenshot enregistré : capture.png");
    EOF
    

Le fichier capture.png apparaît dans le dossier où tu as lancé la commande. Tu changes l'URL, tu relances, tu as une nouvelle capture.

Commande 02 · Vérifier qu'une page contient un mot ou un chiffre

Génial pour valider qu'une modification est bien en ligne sans ouvrir de navigateur. Réponse en 1 ligne dans ton terminal.

dev-browser --headless <<'EOF'
      const page = await browser.getPage("main");
      await page.goto("https://jerwis.fr/articles");
      const texte = await page.evaluate(() => document.body.innerText);
      console.log(texte.includes("dev-browser") ? "OK trouvé" : "ABSENT");
    EOF
    

Tu remplaces "dev-browser" par n'importe quel mot, prix, nom. Pratique pour vérifier qu'un changement de prix est bien rendu, qu'un nouvel article apparaît dans la liste, qu'une promo est bien visible.

Commande 03 · Soumettre un formulaire et capturer le résultat

Le test d'inscription newsletter, de contact, de commande. Remplir, soumettre, vérifier le message de confirmation.

dev-browser --headless <<'EOF'
      const page = await browser.getPage("main");
      await page.goto("https://jerwis.fr");
      await page.fill("input[type=email]", "test@example.com");
      await page.click("button[type=submit]");
      await new Promise(r => setTimeout(r, 3000));
      await page.screenshot({ path: "form-result.png", fullPage: true });
      console.log("Formulaire soumis, capture enregistrée");
    EOF
    

Tu adaptes le sélecteur du champ (input[type=email]) et du bouton (button[type=submit]) selon ta page. Si tu ne sais pas, tu demandes à Claude : « regarde le HTML de cette page et dis-moi quels sélecteurs utiliser pour le formulaire newsletter ». Il les trouve, il adapte la commande.

5 usages bonus · que je teste actuellement

Au-delà des 5 cas vraiment quotidiens, voilà ce que j'expérimente depuis quelques semaines. Pas tous au point, mais déjà utilisables si tu veux pousser.

Installation · 3 minutes chrono

Pré-requis

• Mac ou Linux (Windows Subsystem for Linux fonctionne aussi)
• Node.js déjà installé (vérifie avec node --version · si ça affiche un chiffre, c'est bon)
• Claude Code Max (ou au moins Claude Code gratuit)

Étape 1 · Installer

Ouvre ton terminal. Colle la commande que Claude te donnera quand tu lui demanderas « installe dev-browser pour moi ». Ça se fait généralement avec npm install -g @anthropic-ai/dev-browser (ou l'équivalent selon la version du moment · demande à Claude la commande exacte actuelle).

Étape 2 · Tester

Toujours dans ton terminal, tape :

dev-browser --help
    

Si tu vois une liste d'options qui défile (quelque chose dans le genre de la capture ci-dessous), c'est installé. Sinon, relance ton terminal ou demande à Claude de t'aider à débugger.

Étape 3 · Premier usage

Ouvre Claude Code dans un dossier, n'importe lequel, et dis-lui :

« Utilise dev-browser pour aller sur jerwis.fr et me donner le titre de la page »

Claude va écrire un petit script, le lancer, et te renvoyer « Suis l'IA. Sans être dev. Sans y passer tes soirées. » (mon H1 actuel). Si ça marche, tu es équipé. Sinon, Claude t'aidera à corriger.

Les 3 limites que j'ai rencontrées

Limite 1 · Les sites qui détectent les bots

Certains sites (X/Twitter, LinkedIn connecté, Reddit parfois) détectent les navigateurs automatisés et bloquent. Dev-browser peut se connecter à ton Chrome existant avec le flag --connect (un flag = une option qu'on passe à la commande), mais c'est plus technique. Pour le grand public, j'accepte simplement que 10 % des sites refusent · je passe à autre chose.

Limite 2 · Les pages très lourdes en JavaScript

Certaines pages mettent 5-10 secondes à se charger complètement. Par défaut, dev-browser attend 2 secondes. Si Claude ne trouve pas un élément, c'est souvent un souci de timing. La solution : demande à Claude d'ajouter await new Promise(r => setTimeout(r, 5000)). Il saura.

Limite 3 · Pas une solution si tu veux scraper à grande échelle

Dev-browser est fait pour les tâches ponctuelles · vérifier une page, tester un flux, récupérer une donnée précise. Si tu veux scraper 10 000 pages pour un projet massif, il faut d'autres outils (Apify, Bright Data, ou du code custom — fait sur mesure). Pour tout le reste, dev-browser suffit.

Ma règle perso : tant que je reste sous 50 pages d'un coup, dev-browser fait le boulot sans broncher. Au-delà, je passe sur un outil dédié ou je découpe en plusieurs lots. 95 % de mes usages tiennent largement dans cette limite.

FAQ dev-browser.

Pour aller plus loin

Si tu veux creuser :

1. Claude Code · le setup complet — à installer avant dev-browser, évidemment
2. Les workflow tips Claude Code — la suite logique pour structurer tes sessions et combiner dev-browser avec d'autres réflexes
3. Les loops Claude Code, expliqués — ce que tu déclenches en boucle quand dev-browser fait son travail (veille, monitoring)
4. Ma page Outils — les 6 outils que j'utilise en complément de Claude Code tous les jours

Si tu installes dev-browser cette semaine et que tu l'utilises pour un vrai cas, réponds à ma newsletter et raconte-moi. Ça m'aide à savoir ce qui marche pour les autres. Je lis tout, je réponds, je peux me tromper sur tes besoins — tes retours me recadrent.