Domscribe
Domscribe · Programmation
Domscribe est un outil de débogage frontend open source qui donne aux agents de codage IA des yeux sur votre frontend en cours d'exécution. Voyez-le comme un outil de développement open source conçu pour une seule mission : combler l'écart entre ce que dit votre code et ce que le navigateur affiche réellement. Il relie le navigateur au code source dans les deux sens : vous cliquez sur un élément du DOM et décrivez un changement, ou votre agent interroge un fichier source pour voir l'instantané du DOM en direct, les props du composant et son état. En interne, il repose sur une correspondance DOM vers code source construite au moment de la compilation, si bien que chaque élément renvoie au fichier et à la ligne exacts. Il fonctionne avec n'importe quel agent compatible MCP et n'importe quel bundler, sort sous licence MIT et retire toute l'instrumentation des builds de production. Pas de palier payant. Pas de limite de sièges.
À propos de Domscribe
Qu'est-ce que Domscribe
Domscribe est un pont du pixel au code pour le travail frontend assisté par IA. Les agents de codage savent lire vos fichiers source, mais ils ne voient pas ce qui s'affiche réellement dans le navigateur, et c'est pourquoi ils devinent la mise en page, les styles et la structure des composants. Domscribe comble cet écart en construisant un lien bidirectionnel entre le DOM et votre arborescence de code source.
L'outil injecte des attributs déterministes data-ds au moment de la compilation via une analyse de l'AST. Il consigne chaque correspondance dans un manifeste. À l'exécution, il capture les props, l'état et les instantanés du DOM en direct. Votre agent pose alors une question simple : qu'affiche cette ligne ? Il obtient une vraie réponse plutôt qu'une capture d'écran à interpréter.
La principale limite tient au périmètre. Domscribe couvre aujourd'hui React, Vue, Next.js et Nuxt, avec des adaptateurs personnalisés pour d'autres configurations, si bien que les rouages propres aux frameworks non pris en charge ne se mappent pas proprement. Il suppose aussi que votre agent parle MCP, ce qui exclut les outils qui n'acceptent que des prompts en texte brut.
Pour commencer
- Installez le paquet et lancez
npx domscribe inità la racine de votre projet. - Ajoutez le plugin du bundler pour votre outil de build (Vite 5-7, Webpack 5 ou Turbopack) afin que les fichiers source reçoivent des identifiants
data-dsstables. - Pointez votre agent compatible MCP, comme Claude Code, GitHub Copilot, Cursor ou Gemini, vers le point de terminaison MCP de Domscribe.
- Démarrez votre serveur de développement, ouvrez l'app et cliquez sur n'importe quel élément pour déposer une demande de changement en langage naturel.
- Laissez l'agent interroger l'emplacement dans le code source, faire la modification et confirmer le résultat sur le DOM en direct.
Informations sur le produit
Aperçu des tarifs, des plateformes compatibles et des performances de Domscribe.
Idéal pour
Les utilisateurs, tâches et cas d'usage où cet outil convient le mieux.
Utilisateurs
- Développeurs frontend
- Ingénieurs full-stack qui travaillent avec des agents IA
- Équipes qui utilisent déjà Claude Code ou Cursor
Tâches
- Corriger les bugs de mise en page et de style
- Ajuster les props et les styles d'un composant
- Vérifier ce qu'affiche une ligne du code source
Cas d'usage
- Itération rapide d'interface pendant le développement d'une fonctionnalité
- Déboguer un rendu piloté par l'état
- Prise en main d'une base de code inconnue
Fonctionnalités clés
Identifiants stables au moment de la compilation
Domscribe analyse chaque fichier source pendant la build et injecte des attributs déterministes data-ds avec xxhash64, puis consigne chaque correspondance dans un manifeste. Ces identifiants restent stables entre le hot module replacement et le fast refresh, ce qui veut dire qu'ils survivent au cycle modifier, enregistrer, recharger qui définit presque tout le travail frontend. Ils ne cassent pas dès que vous éditez un fichier. Pas d'heuristiques à l'exécution. Pas de devinettes sur l'élément à qui appartient quoi.
Lien bidirectionnel DOM vers code source
L'outil fonctionne dans les deux sens. Cliquez sur un élément du DOM et décrivez le changement voulu, et Domscribe le résout vers l'emplacement exact du code que votre agent doit éditer. Ou demandez à l'agent d'interroger un fichier et une ligne du code source pour voir ce qui s'affiche là, maintenant. Le sens que vous utilisez dépend de la tâche. Aucun des deux côtés n'a à deviner ce que fait l'autre.
Capture profonde à l'exécution
Au-delà du HTML brut, Domscribe extrait les props, l'état et les métadonnées des composants en direct via le parcours du fiber de React et l'inspection du VNode de Vue. Votre agent obtient tout le contexte du composant derrière un élément affiché, pas seulement le balisage. Cela compte. Cela veut dire que l'agent peut raisonner sur la raison pour laquelle quelque chose apparaît tel qu'il apparaît.
Prise en charge MCP avec une couche REST
Les annotations vivent sous forme de fichiers JSON dans un dossier .domscribe/annotations/ à l'intérieur de votre dépôt, exposées via des API REST que le serveur MCP encapsule pour l'accès de l'agent. Domscribe fournit 12 outils et 4 prompts via MCP, et fonctionne avec Claude Code, GitHub Copilot, Cursor, Gemini, Kiro et tout autre client MCP. Tout reste local, sans dépendance externe.
Masquage des données personnelles
Les e-mails, jetons et motifs sensibles sont nettoyés automatiquement avant que la moindre donnée ne quitte le navigateur. C'est une vraie protection. Pour les équipes qui travaillent sur des apps manipulant de vraies données utilisateur, c'est la différence entre un outil que vous pouvez lancer sur un environnement de staging et un outil que vous ne pouvez pas.
Aucun impact en production
Chaque attribut data-ds, script de superposition et connexion de relais est retiré des builds de production, et la CI le fait respecter. Votre bundle livré reste propre, donc vous ne sacrifiez ni la taille du bundle ni l'exposition de l'instrumentation aux utilisateurs finaux.
Avantages et inconvénients
Avantages
- Gratuit et open source sous licence MIT, sans palier payant ni limite de sièges.
- Relie les éléments du DOM à des emplacements exacts du code source, donc les agents cessent d'éditer le mauvais fichier.
- Capture les props et l'état en direct, ce qui donne aux agents un contexte que les captures d'écran ne peuvent pas fournir.
- Agnostique vis-à-vis du framework dans sa liste prise en charge et compatible avec tout agent basé sur MCP.
- Le masquage des données personnelles et le nettoyage en production gardent les données sensibles et la taille du bundle sous contrôle.
Inconvénients
- Exige un framework pris en charge (React, Vue, Next.js, Nuxt) ou un adaptateur personnalisé ; les stacks non prises en charge ne se mappent pas proprement.
- Utile uniquement avec des agents compatibles MCP, donc les outils à prompt en texte brut ne peuvent pas l'utiliser.
- La configuration touche à votre config de bundler et au serveur de développement, ce qui ajoute une étape avant qu'il ne fasse quoi que ce soit.
Questions fréquentes
Il construit un pont entre votre frontend en cours d'exécution et votre agent de codage IA. L'agent peut soit répondre à un clic sur un élément du DOM, soit interroger une ligne du code source pour voir le DOM, les props et l'état en direct, puis faire une modification avec tout le contexte.
Contenus associés
Découvrez des outils, des compétences et des articles liés à Domscribe.
Alternatives à Domscribe
Forefront
Forefront · ProgrammationForefront est une plateforme web pour construire avec de l'IA open source. Elle vous laisse affiner les principaux modèles de langage open source sur vos propres données, évaluer leurs performances et les exécuter via une API ou les exporter pour les héberger vous-même. Les développeurs qui veulent le confort d'une plateforme fermée mais tiennent à rester propriétaires de leurs modèles et de leurs données sont le public visé ici.
Startkit
StartKit.AI · ProgrammationStartkit est un boilerplate pour créer des produits SaaS d'IA et des wrappers d'IA. Voyez-le comme un boilerplate de startup IA avec les parties ennuyeuses déjà branchées : authentification, paiements Stripe et Lemon Squeezy, limites d'usage, e-mail transactionnel et un kit de démarrage d'API IA qui parle à OpenAI, Anthropic, Groq ou Llama. Vous clonez le dépôt, fixez votre prix et attaquez la partie du produit pour laquelle les gens paient vraiment. Il repose sur Next.js au-dessus de React et Tailwind, donc une bonne partie du code boilerplate vous semble déjà familière.
Testim
Tricentis · ProgrammationTestim est une plateforme d'automatisation des tests dopée à l'IA, qui sert à créer et exécuter des tests de bout en bout sur des applications web, mobiles et Salesforce. Elle s'appuie sur l'apprentissage automatique pour garder les tests stables quand une interface change, alors les équipes passent moins de temps à réparer des sélecteurs cassés. Pas mal pour un outil de tests automatisés que vous pouvez utiliser dès aujourd'hui. Vous créez des tests en enregistrant des actions dans un navigateur, puis vous ajoutez du JavaScript quand vous avez besoin de plus de contrôle. C'est un choix solide pour une équipe QA bien occupée.