Retour à Apprendre
Outils · 08

Un navigateur
piloté
par ton IA.

Dev-browser, c'est le chaînon manquant entre Claude et le web. Tu demandes à ton IA de regarder une page, de remplir un formulaire, de prendre un screenshot, de comparer deux sites. Pas de clic humain. Juste un petit script que Claude écrit pour toi. Je l'utilise tous les jours pour scraper, tester mes pages, vérifier des sources. Voici comment ça marche, comment l'installer, et pourquoi c'est devenu indispensable.

11 min de lecture Niveau Débutant Outils Claude Code · dev-browser
En 30 secondes

Ce que tu repars avec

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.

Dev-browser règle ce problème. C'est un navigateur sans fenêtre 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, tu récupères ce qui t'intéresse.

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.

Mon avis en 5 secondes

Si tu utilises Claude Code tous les jours et que tu touches à du web (un site, des sources à vérifier, un scraping ponctuel), dev-browser doit être installé chez toi. Il rend ton IA vraiment utile pour les tâches qui touchent à Internet. Trois minutes d'install, retour sur investissement en dix minutes.

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).
  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 concrètement

Tu tapes dans ton terminal quelque chose comme ceci :

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
    

Un navigateur s'ouvre en arrière-plan, charge ma page, récupère le titre, l'affiche dans ton terminal. Fin. Pas de fenêtre qui apparaît sur ton écran.

Ce que tu ne fais pas toi-même : écrire ce script. Tu dis à Claude « va sur jerwis.fr et dis-moi le titre ». Claude comprend, écrit le script dev-browser, l'exécute, te renvoie le résultat dans la conversation.

La règle d'or que j'applique

Tu ne tapes jamais un script dev-browser toi-même. Tu demandes ce que tu veux en français à Claude. Claude fait le script. Tu restes à 100 % dans ton rôle d'entrepreneur qui demande, jamais de développeur qui code.

4 cas où dev-browser change ma journée

Cas 01 · Vérifier qu'un déploiement a marché

Sans ouvrir Chrome, sans copier-coller

Je commit une modification de mon site, je push, Vercel déploie. Avant dev-browser, je devais ouvrir Chrome, aller sur jerwis.fr, chercher l'élément qui a changé. Maintenant, je dis à Claude : « vérifie que la page /lexique.html affiche bien 8 entrées et pas 7 ». Il lance dev-browser, compte, me répond en 5 secondes.

Gain mesuré : je gagne 30 secondes par déploiement. Sur une journée où je push 10 fois, 5 minutes. Pas révolutionnaire à l'unité, énorme au cumul.

Cas 02 · Scraper une source pour un article

Récupérer un tableau, une date, une citation

J'écris un article, j'ai besoin d'un chiffre précis qui figure sur le site d'une étude. Claude n'a pas ce chiffre dans son entraînement. Je lui dis : « va sur cette URL, trouve le chiffre de latence moyenne de GPT-5, cite-le-moi ». Il lance dev-browser, extrait, me renvoie le chiffre + la source.

Pareil pour les citations. Dernière fois, j'avais besoin d'une phrase exacte de Simon Willison dans un billet. Claude a scrapé son site, trouvé le paragraphe, copié au mot près. 10 secondes.

Cas 03 · Tester un formulaire en local

Avant de déployer, je valide que le flux marche

Mon site a un formulaire d'inscription newsletter. Je le modifie, je lance mon serveur local sur localhost:8088. Je dis à Claude : « remplis le formulaire avec test@example.com, clique submit, dis-moi si le message de succès s'affiche bien ». Il lance dev-browser, fait le test, rapporte.

Pourquoi c'est génial : avant, je testais à la main, j'oubliais parfois des cas, je créais des emails de test dans ma base par accident. Maintenant Claude teste méthodiquement, capture les bugs, ne pollue rien.

Cas 04 · Prendre un screenshot pour valider un design

Claude voit ma page comme je la verrais

Je retouche une section. Je demande : « prends un screenshot de la section Freebies de ma home, regarde si les 4 cartes sont alignées ». Claude lance dev-browser, capture l'image, me la montre dans la conversation. Je vois immédiatement si un élément déborde ou si un espacement est raté.

J'utilise ça à chaque grosse refonte UI. Claude voit la page, me décrit ce qu'il voit, je valide ou je corrige sans ouvrir de navigateur.

Installation · 3 minutes chrono

Pré-requis

É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, 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.

Le piège classique que j'ai eu

La première fois que j'ai lancé dev-browser, une fenêtre Chrome s'est ouverte sur mon écran et m'a fait sursauter. C'est parce que j'avais oublié le flag --headless. Sans ce flag, le navigateur apparaît vraiment. Demande toujours à Claude d'ajouter --headless par défaut. Tu ne verras plus rien, comme il se doit.

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, 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). Pour tout le reste, dev-browser suffit.

Ma check-list avant chaque usage

(1) Le flag --headless est bien là. (2) Je demande à Claude en français, pas en code. (3) Je valide le résultat qu'il me renvoie avant de le croire sur parole. → Ces 3 réflexes couvrent 95 % de mon usage.

Pour aller plus loin

Si tu veux creuser :

  1. Claude Code · le setup complet — à installer avant dev-browser, évidemment
  2. Les 6 plugins Claude Code à installer — la suite logique, avec context7 qui complémente bien dev-browser pour les docs officielles
  3. 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.

— Et maintenant ?

Tu veux les prochains ?

Chaque fois que je publie un nouveau tuto Claude Code / IA, je l'envoie dans ma newsletter AI Playbook. Si tu ne veux pas manquer le prochain, laisse-moi ton email sur la home.

Voir les newsletters →