SkillProof tested Claude skills

Browser Testing with DevTools

Pilote des tests en navigateur réel via Chrome DevTools MCP pour détecter les problèmes de DOM et de console.

par addyosmani · addyosmani/agent-skills

Fonctionne avec configuration ★ 8.0/10

Browser Testing with DevTools — Pilote des tests en navigateur réel via Chrome DevTools MCP pour détecter les problèmes de DOM et de console.

Ce que fait

Teste dans de vrais navigateurs via Chrome DevTools MCP. À utiliser pour construire ou déboguer tout ce qui tourne dans un navigateur. À utiliser pour inspecter le DOM, capturer les erreurs console, analyser les requêtes réseau, profiler les performances, ou vérifier un rendu visuel avec de vraies données d'exécution. Nécessite que le serveur MCP chrome-devtools soit configuré.

Rapport de test

Installation propre en un seul fichier — git clone + cp tel quel a fonctionné sans correction et le frontmatter est valide en strict — mais le skill est inerte sans un serveur MCP chrome-devtools configuré séparément et un Chrome en cours d'exécution, une dépendance externe forte que la doc annonce honnêtement d'emblée. Dans une tâche A/B de débogage en navigateur réel (reproduire une ReferenceError, corriger, revérifier), le bras avec skill comme la baseline sans skill ont trouvé et corrigé le bug avec vérification en direct ; l'avantage du skill tenait à la rigueur du processus — son workflow REPRODUCE→INSPECT→DIAGNOSE→FIX→VERIFY plus des captures d'écran avant/après comme preuve — plutôt qu'à un meilleur diagnostic. Documentation bien écrite et honnête, avec des consignes de sécurité inhabituellement solides (isolation de profil, contenu de navigateur non fiable).

Testé le: 2026-07-11 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/addyosmani/agent-skills
cd agent-skills
mkdir -p ~/.claude/skills
cp -r skills/browser-testing-with-devtools ~/.claude/skills/browser-testing-with-devtools

Commandes et exemples de prompts

  • /browser-testing-with-devtoolsPilote des tests en navigateur réel via Chrome DevTools MCP pour détecter les problèmes de DOM et de console.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

  • Test this page in a real browser and check the console
  • Inspect network requests while debugging the login flow
  • Profile page performance and report console errors

Rapport complet →