Inspector

Inspector : L'Éditeur Visuel Ultime pour Votre Codebase et Vos Agents de Codage

Dans le monde du développement moderne, la barrière entre la conception visuelle et l'écriture du code s'amincit. Inspector se présente comme la solution définitive pour les développeurs et designers souhaitant éditer leur front-end de manière visuelle tout en conservant une synchronisation parfaite avec leur code source. En connectant votre agent de codage à un navigateur intelligent, Inspector transforme votre manière de concevoir et de déployer vos applications.

Qu'est-ce que Inspector ?

Inspector est bien plus qu'un simple outil de développement ; c'est une couche visuelle pour votre codebase. Il s'agit d'une application (disponible pour MacOS) qui combine les fonctionnalités d'un navigateur et celles d'un IDE (Environnement de Développement Intégré). Avec Inspector, votre navigateur devient votre IDE.

Le concept est simple mais puissant : nous avons connecté votre agent de codage à un navigateur et y avons intégré un éditeur visuel. Cela vous permet de cliquer sur n'importe quel élément de votre application, d'obtenir le contexte nécessaire et de livrer vos modifications plus rapidement avec votre agent de codage préféré. Que vous travailliez sur un projet local ou que vous importiez du code provenant d'outils de « vibe-coding » comme Lovable, Figma Make ou Bolt, Inspector agit comme le pont entre la vision visuelle et la réalité technique.

Les Fonctionnalités de Inspector

Inspector regorge de fonctionnalités conçues pour accélérer le workflow des équipes techniques et créatives :

• Éditeur Visuel Intégré : Déplacez des éléments visuellement, modifiez du texte ou laissez un commentaire pour effectuer des changements profonds.
• Connexion aux Agents de Codage : Connectez en toute transparence vos comptes Claude Code, Codex ou Cursor directement dans Inspector.
• Entièrement Local : La sécurité est une priorité. Inspector se connecte à n'importe quelle codebase locale. Toutes vos données sont stockées localement sur votre appareil.
• Lien Direct avec le Code : Cliquez pour ajouter du contexte visuel. Inspector lie chaque élément visuel à sa ligne de code exacte dans votre projet.
• Édition de Texte Intuitive : Double-cliquez sur n'importe quel texte de la page pour le modifier et enregistrer instantanément les changements dans votre codebase.
• Captures d'Écran Intelligentes : Prenez des captures d'écran qui s'adaptent et se « clipsent » automatiquement à n'importe quel élément de votre page.
• Synchronisation GitHub : Publiez vos modifications sans quitter l'outil. Inspector se connecte à GitHub pour vous permettre de créer des branches, de commiter vos changements et de publier une Pull Request (PR) directement.

Comment Utiliser Inspector

L'utilisation de Inspector a été pensée pour être la plus fluide possible, sans configuration complexe :

1. Téléchargement : Téléchargez Inspector pour MacOS (compatible avec les puces Silicon et Intel).
2. Configuration : Lancez l'application. Aucune installation fastidieuse n'est requise.
3. Sélection de la Codebase : Sélectionnez votre codebase locale ou commencez à partir d'un template.
4. Connexion de l'Agent : Connectez votre compte Claude, Codex ou Cursor.
5. Édition Visuelle : Naviguez dans votre application, sélectionnez des éléments, déplacez-les ou modifiez le texte.
6. Application des Changements : Appuyez sur « Apply » pour que Inspector modifie directement le code source.
7. Publication : Utilisez l'intégration GitHub pour créer une branche et soumettre votre PR.

Cas d'Utilisation (Use Cases)

Pour les Développeurs Front-End

Les développeurs utilisent Inspector pour obtenir un contexte visuel immédiat. Au lieu de chercher manuellement quel fichier correspond à quel bouton, ils cliquent sur l'élément dans Inspector pour accéder instantanément à la ligne de code. L'intégration avec les agents de codage comme Cursor permet de générer des modifications complexes simplement en manipulant l'interface visuelle.

Pour les Designers

Inspector permet aux designers de pousser des modifications directement dans les bases de code de production. Grâce à l'éditeur visuel, un designer peut ajuster les marges, changer les couleurs ou modifier le contenu textuel sans avoir à manipuler directement des fichiers de code complexes, tout en garantissant que les changements respectent la structure du projet.

Migration de Projets de « Vibe-Coding »

Si vous avez généré un projet avec des outils comme Lovable, Bolt ou Figma Make, vous pouvez télécharger le code de ces projets et ouvrir le dossier dans Inspector. Cela vous permet de continuer à travailler sur votre projet de manière professionnelle et structurée.

FAQ (Foire Aux Questions)

Une configuration est-elle requise ?

Non ! Il vous suffit de télécharger Inspector, de sélectionner votre codebase ou de démarrer depuis un template pour commencer.

S'agit-il d'un navigateur ou d'un IDE ?

Avec Inspector, notre navigateur est votre IDE. Vous pouvez sélectionner des éléments, les déplacer visuellement, appuyer sur « appliquer », et Inspector éditera le code directement dans votre codebase.

Est-ce que Windows est supporté ?

Pas encore ! Pour l'instant, Inspector est disponible pour MacOS. Vous pouvez rejoindre notre liste d'attente pour la version Windows sur notre site.

Qu'en est-il de la confidentialité des données ?

Toutes vos données sont stockées localement. Nous ne nous entraînons pas sur votre code propriétaire et tous vos historiques de chat sont conservés sur votre appareil.

Est-ce que cela fonctionne avec tous les frameworks front-end ?

Inspector fonctionne de manière optimale avec les applications React et peut lier les éléments visuels directement au code React. Cependant, vous pouvez utiliser Inspector avec n'importe quel framework front-end, bien que le moteur de contexte visuel soit plus performant avec React.

Comment puis-je publier mes modifications ?

Inspector se connecte à GitHub. Vous pouvez ainsi créer une branche, commiter vos changements et publier une Pull Request (PR) directement depuis l'interface de l'application.