/ Annuaire / Playground / dev-browser
← Tous les serveurs ↗ GitHub
● Communauté SawyerHood ⚡ Instantané

dev-browser

par SawyerHood · SawyerHood/dev-browser

Une skill Claude qui lance un navigateur avec devtools que votre agent peut piloter — navigation, clic, inspection, capture d'écran.

dev-browser donne à votre agent Claude un navigateur headless orienté développement via des prompts de skill. Il encapsule un navigateur basé sur CDP avec des affordances adaptées aux agents : sélecteurs stables, capture d'écran à chaque action et snapshots DOM prêts à découper. Idéal quand vous avez besoin d'un navigateur sans vouloir configurer playwright de bout en bout.

▶ Voir la démo 📦 Installer 💡 Cas d'usage

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

prêt

Installation

Dépôt de l’auteur · Documentation officielle des Skills Claude

Cas d'usage

Usages concrets : dev-browser

Faire de la recherche web rapide sans configurer un MCP

👤 Devs qui ne veulent pas Playwright dans leur config MCP ⏱ ~15 min beginner

Quand l'utiliser : Vous voulez que votre session Claude Code navigue quelque chose une seule fois sans vous engager dans un serveur de navigateur persistant.

Déroulement
  1. Démarrer
    Utilise dev-browser. Ouvre https://vercel.com/docs/functions. Liste les sections de la barre latérale.✓ Copié
    → Titres extraits avec URLs d'ancres
  2. Approfondir
    Navigue vers « Runtime » — lis la page et résume les trois options de runtime en un paragraphe chacune.✓ Copié
    → Trois paragraphes avec citations de fragments d'URL
  3. Capturer
    Capture d'écran de la section tarification pour mes notes.✓ Copié
    → Capture sauvegardée localement

Résultat : Recherche effectuée avec un navigateur quand vous en avez eu besoin, sans infrastructure permanente.

Pièges
  • Binaire Chromium manquant — Exécutez npx playwright install chromium une seule fois
Combiner avec : filesystem

Vérifier rapidement un flux de connexion sur un environnement de staging

👤 Devs soucieux de la qualité avant déploiement ⏱ ~5 min beginner

Quand l'utiliser : Avant de déployer, vous voulez cliquer une fois sur le chemin heureux critique.

Déroulement
  1. Ouvrir
    Utilise dev-browser. Ouvre https://staging.myapp.com, prends une capture d'écran.✓ Copié
    → Capture de la page d'accueil
  2. Se connecter
    Clique sur « Sign in », entre [email protected] / Test1234, soumet.✓ Copié
    → Tableau de bord post-connexion capturé
  3. Confirmer
    La chaîne « Welcome, qa » est-elle visible sur la page ?✓ Copié
    → Oui/non + capture d'écran

Résultat : Un smoke test de 60 secondes avant de cliquer sur Déployer.

Pièges
  • CAPTCHA sur la connexion — Ajoutez un contournement réservé aux tests en staging ; dev-browser ne brise pas les captchas

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

dev-browser-skill + filesystem

Sauvegarder les captures aux côtés des notes

Après chaque étape, capture dans /notes/web-research/.✓ Copié
dev-browser-skill + chrome-devtools

Quand vous avez besoin de profondeur au niveau devtools, escaladez vers chrome-devtools MCP

dev-browser m'a donné la page — utilise maintenant chrome-devtools pour vérifier la cascade réseau.✓ Copié

Outils

Ce que ce MCP expose

OutilEntréesQuand appelerCoût
open_url url Naviguer 0
click selector|text Interagir 0
type selector, text Saisir du texte 0
snapshot none S'ancrer dans l'état actuel 0

Coût et limites

Coût d'exécution

Quota d'API
N/A
Tokens par appel
Snapshots DOM limités en taille ; captures en base64
Monétaire
Gratuit
Astuce
Évitez les snapshots quand ce n'est pas nécessaire — la capture seule suffit souvent

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Aucun
Sortie de données : Directement vers les sites que vous visitez

Dépannage

Erreurs courantes et correctifs

Error: Executable doesn't exist at chromium path

npx playwright install chromium — la skill suppose les binaires de Playwright

Sélecteur introuvable

Exécutez snapshot d'abord ; choisissez le sélecteur depuis le vrai DOM, pas deviné

La page bloque l'automatisation

Le site a détecté le mode headless — essayez d'exécuter avec headless=false dans la config de la skill

Alternatives

dev-browser vs autres

AlternativeQuand l'utiliserCompromis
playwright MCPVous voulez un navigateur persistant enregistré dans le MCPPlus de configuration ; la skill est plus légère
mcp-chromeVous avez besoin de votre vrai Chrome connectéPas un navigateur de test headless

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills