Inspecteur d'Éléments Web

Ce qu'il fait

Cette application MCP fournit une superposition visuelle interactive pour tout site web, permettant aux utilisateurs de cliquer sur des éléments du DOM pour capturer leurs spécifications techniques précises. Elle transforme le processus d'analyse web en comblant le fossé entre un navigateur visuel et un LLM, envoyant les données brutes des éléments (balises, styles, attributs) directement dans le contexte du chat.

Caractéristiques clés

• Inspection Visuelle : Interface de clic-pour-inspecter qui met en évidence les éléments en temps réel.
• Métadonnées Approfondies : Capture l'intégralité des styles CSS, les positions calculées, les noms de balises et les attributs.
• Compatibilité Universelle : Fonctionne sur les serveurs de développement locaux et les sites de production publics.
• Intégration Directe : Fonctionnalité "Envoyer à Claude" en un seul clic pour partager les données d'élément pour le débogage ou l'analyse.
• Historique de Session : Maintient un journal des éléments inspectés pour une analyse par lots.

Installation

• Claude Desktop : Ajoutez les éléments suivants à votre fichier claude_desktop_config.json :

{
  "mcpServers": {
    "element-inspector": {
      "command": "node",
      "args": [
        "/path/to/element-inspector-mcp/dist/index.js",
        "--stdio"
      ]
    }
  }
}

Hôtes supportés

• Claude