Inspector
Inspector · Programmation
Inspector est un éditeur visuel front-end pour les développeurs qui créent des applications React, Next.js ou Vite avec des agents de code IA. Il se connecte à l'agent que vous utilisez déjà, donc au lieu de décrire une modification de texte et d'attendre que l'agent devine quel fichier toucher, vous pointez simplement l'élément à l'écran. Modifier un texte, ajuster une mise en page ou remplacer un composant passe par une interface visuelle qui écrit vos changements directement dans le code local de votre machine. Pas de copier-coller, pas de recherche de fichiers à la main.
À propos de Inspector
Qu'est-ce qu'Inspector
Inspector est un éditeur visuel front-end conçu pour l'ère du code assisté par IA. Les projets React, Next.js et Vite sont de plus en plus écrits par des agents comme Claude Code, Cursor ou Codex, et le goulot d'étranglement s'est déplacé, car le plus dur n'est plus de produire un composant. C'est de dire à l'agent exactement quel élément modifier et où cet élément se trouve. Inspector boucle ce cycle. Il pose une couche visuelle au-dessus de votre application en cours d'exécution. Vous pouvez désormais modifier React avec l'IA en cliquant sur un titre ou en faisant glisser une carte, et cela devient une modification précise sur vos fichiers sources locaux.
L'outil repose sur une idée simple. Vos mains appartiennent à l'interface, pas à l'arborescence de fichiers. Vous modifiez le texte en place. Vous déplacez des éléments. Et vous relancez l'agent sur la modification sans quitter la page que vous regardez. Il travaille directement sur votre code local, donc rien n'atteint un serveur distant avant que vous décidiez de publier.
Les principales limites méritent d'être dites tôt. Inspector cible uniquement les projets React, Next.js et Vite. Une équipe Vue ou Svelte n'en tirera pas grand-chose. Il suppose aussi que vous utilisez déjà un agent de code avec son propre abonnement. Inspector se connecte à cet agent et ne le remplace pas. Pas encore d'agent ? Configurez-le d'abord.
Pour démarrer
- Installez Inspector et ouvrez votre projet pour qu'il détecte le framework et le serveur de développement.
- Connectez l'agent de code que vous utilisez déjà, que ce soit Claude Code, Cursor ou Codex.
- Lancez votre serveur de développement et ouvrez l'application dans la vue Inspector.
- Cliquez sur n'importe quel élément pour modifier son texte, ou faites-le glisser pour changer sa position et sa mise en page.
- Examinez le diff qu'Inspector génère et laissez l'agent valider la modification dans votre code.
Informations sur le produit
Aperçu des tarifs, des plateformes compatibles et des performances de Inspector.
Idéal pour
Les utilisateurs, tâches et cas d'usage où cet outil convient le mieux.
Utilisateurs
- Développeurs front-end dans des équipes React ou Next.js
- Développeurs qui paient déjà Claude Code, Cursor ou Codex
- Créateurs indépendants qui livrent des interfaces vite
Tâches
- Réécrire le texte d'interface sur toute une page
- Ajuster la mise en page et les espacements
- Itérer sur la structure d'un composant
Cas d'usage
- Peaufiner une landing page la veille d'une démo
- Relire la production de l'agent sur un vrai projet
- Prendre en main un code échafaudé par un agent
Fonctionnalités clés
Édition visuelle des textes et des éléments
Inspector vous laisse sélectionner un élément sur la page et le modifier sur place. Modifiez un titre. Corrigez le libellé d'un bouton. Déplacez une carte ailleurs. L'outil rattache chaque action à la source. L'objectif, c'est la vitesse sur ces détails qui exigeaient autrefois un aller-retour complet de prompt et d'attente avec votre agent.
Connexions indépendantes de l'agent
Inspector fonctionne avec Claude Code, Cursor et Codex plutôt que de vous enfermer chez un seul fournisseur. Il se branche à l'agent que vous payez déjà. Vous conservez donc votre abonnement et votre flux de travail actuels. Comme outil front-end pour Claude Code, éditeur visuel Cursor ou compagnon de Codex, il s'adapte à ce que vous utilisez. Cette souplesse compte dans les équipes où différents développeurs utilisent différents agents sur le même dépôt.
Modifications directes du code local
Chaque changement arrive dans vos fichiers locaux, pas dans un bac à sable hébergé de l'éditeur. La structure de votre projet, ses dépendances et son historique de versions restent intacts. Ils ne bougent pas. La couche visuelle se pose au-dessus de votre vraie application et ne la remplace jamais par une réplique en ligne limitée.
Prise en charge de React, Next.js et Vite
L'outil est réglé pour la pile React moderne. Il gère les interfaces à base de composants, reconnaît les conventions du framework et suit la structure que ces outils de build génèrent dans un projet type. Si votre application tourne sur l'un de ces frameworks, Inspector comprend ce qu'il regarde dès le départ.
Relecture du diff avant validation
Inspector vous montre ce qu'il s'apprête à changer pour que vous puissiez approuver ou refuser. Vous voyez les modifications de source produites par l'agent. Ensuite, vous décidez si elles correspondent à votre intention. Cette étape de relecture évite qu'un flux visuel rapide introduise discrètement des changements que vous n'avez pas demandés.
Aperçu intégré du serveur de développement
Vous travaillez sur votre serveur de développement en direct dans l'outil, donc ce que vous modifiez est exactement ce que le navigateur affichera devant vous. Pas de captures d'écran périmées et pas de suppositions sur le rendu d'un changement. L'aperçu et le code restent synchronisés pendant que vous itérez.
Avantages et inconvénients
Avantages
- Accélère les petits ajustements de texte et de mise en page qui demanderaient sinon un prompt complet à l'agent.
- Fonctionne avec l'agent que vous utilisez déjà au lieu d'imposer un nouvel abonnement.
- Modifie votre vrai projet local, donc vos outils et l'historique git restent intacts.
- La couche visuelle facilite le repérage et la correction de ce que l'agent a raté.
- Centré sur React, Next.js et Vite, donc il comprend les conventions de cette pile.
Inconvénients
- Ne prend en charge que React, Next.js et Vite, donc les équipes Vue, Svelte ou Angular n'en tirent rien.
- Il se connecte à un agent de code mais n'en inclut aucun, donc vous devez d'abord avoir Claude Code, Cursor ou Codex en marche.
- La prise en charge des plateformes se limite à macOS, ce qui laisse de côté pour l'instant les développeurs Windows et Linux.
- Il ne conçoit pas à partir de zéro ; il modifie des interfaces que votre agent a déjà générées.
Questions fréquentes
C'est un éditeur visuel front-end qui se connecte à votre agent de code IA. Vous pointez un élément dans votre application en cours d'exécution, vous changez le texte ou la position comme vous le souhaitez, et Inspector transforme cela en modifications sur votre code local React, Next.js ou Vite. Il remplace l'étape de description dans un prompt par un clic direct.
Contenus associés
Découvrez des outils, des compétences et des articles liés à Inspector.
Alternatives à Inspector
Base Code
Base44 (Wix) · Programmation · ProductivitéBase Code est un environnement de développement cloud partagé signé Base44. Votre équipe décrit des modifications sur un dépôt GitHub dans le chat, les vérifie en aperçu et les renvoie sous forme de pull requests.
Google EmbeddingGemma 2
Google DeepMind · Rédaction · Image · ProgrammationGoogle EmbeddingGemma 2 est un modèle ouvert de 740 millions de paramètres qui transforme texte, code, images, audio et images vidéo en vecteurs d'un même espace de 768 dimensions, sur un téléphone ou un ordinateur portable.
GitGlow
GitGlow · Programmation · ProductivitéGitGlow est un client Git de bureau qui place votre code et les modifications de vos agents IA dans une même revue, pour savoir ce qui quitte votre machine avant de livrer.