Browser Testing with DevTools
Donner à votre agent des yeux dans le navigateur via Chrome DevTools MCP — DOM, console, réseau, performance, données réelles d'exécution
- Quoi
- Donner à votre agent des yeux dans le navigateur via Chrome DevTools MCP — DOM, console, réseau, performance, données réelles d'exécution
- Coût
- Gratuit
- Prérequis
- le serveur MCP chrome-devtools configuré (ajouter à .mcp.json ou aux réglages de Claude Code : npx -y chrome-devtools-mcp@latest --isolated)
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — un skill de vérification navigateur issu de la collection de workflows d'ingénierie d'Addy Osmani : utiliser Chrome DevTools MCP pour donner à votre agent des yeux dans le navigateur, comblant le fossé entre l'analyse statique du code et l'exécution réelle. L'agent peut inspecter le DOM, lire les logs de console, analyser les requêtes réseau, profiler la performance (Core Web Vitals, temps de peinture, décalages de mise en page), et vérifier qu'un correctif fonctionne vraiment avec des données réelles d'exécution — au lieu de deviner. Il se combine au TDD pour les changements navigateur et interdit explicitement l'exfiltration de données de page. Distinct des skills addyosmani déjà publiés — aucun ne couvre la vérification navigateur en direct. Crédit : @addyosmani. Bémols honnêtes : nécessite le serveur MCP chrome-devtools configuré (npx chrome-devtools-mcp) ; le profil isolé est effacé à la fermeture, donc pas de sessions persistantes entre les sessions — prévoyez en conséquence. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Prérequis : le serveur MCP chrome-devtools configuré (ajouter à .mcp.json ou aux réglages de Claude Code : npx -y chrome-devtools-mcp@latest --isolated) Installe-moi « Tests navigateur avec DevTools ». Donner à votre agent des yeux dans le navigateur via Chrome DevTools MCP — DOM, console, réseau, performance, données réelles d'exécution Dépôt : https://github.com/addyosmani/agent-skills/blob/main/skills/browser-testing-with-devtools/SKILL.md 1. Récupère le fichier SKILL.md du skill addyosmani-browser-testing-with-devtools depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « addyosmani-browser-testing-with-devtools ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (ex. tout compte, clé API ou outil CLI mentionné dans les prérequis ci-dessus). GitHub est optionnel : si j'ai un compte GitHub ou le CLI gh, tu peux l'utiliser ; sinon, l'accès public suffit. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Ne me demande jamais de coller des secrets dans le chat ; les identifiants passent par le coffre sécurisé ou des variables d'environnement. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.