Environnements de prévisualisation : chaque branche à sa propre adresse
Quand des agents en parallèle travaillent dans différents worktrees, inutile de lancer chaque serveur de dev à la main et de chercher des ports libres pour voir leurs résultats. L’onglet Preview démarre le serveur du projet et de chaque worktree sur son propre port et donne à chacun une adresse portant le nom de sa branche.
Une adresse par branche
Chaque environnement s’ouvre à http://<branch>.agentvera.localhost:<port> ; le proxy local laisse passer les WebSockets. La commande de démarrage est déduite du script dev, start, serve ou preview de package.json, avec un indicateur de port ajouté pour Vite, Astro, Nuxt, SvelteKit, Remix, Next et Angular. Le runserver de Django est aussi détecté ; sinon, un serveur statique intégré sert index.html. Vous pouvez aussi écrire votre propre commande avec un marqueur {port}.
- Démarrer, redémarrer, arrêter et consulter les logs.
- Ouvrir dans le navigateur AgentVera ou celui du système, ou copier l’adresse.
- Avec Vercel connecté, l’URL de preview Vercel de la branche s’affiche aussi sur la carte de l’environnement.
Comparaison visuelle
Des captures pleine page des pages choisies sont prises en Mobile (375×812), Tablet (768×1024) et Desktop (1440×900) ; jusqu’à 6 tailles peuvent être définies. Vous définissez une référence, les captures suivantes sont comparées pixel par pixel et les pixels modifiés sont marqués en rouge. Le seuil de changement par défaut est de 0,1 % des pixels.
Faire tester par un agent
Le bouton de test par agent ouvre un agent Claude dans ce worktree avec le navigateur AgentVera. Il ouvre chaque page, redimensionne à chaque point de rupture, cherche débordements, mises en page cassées, textes illisibles, erreurs de console et liens ou boutons morts, corrige ce qu’il peut et fait son rapport.
Comment l’utiliser
- 1
Ouvrez l’onglet Preview de la page Details d’un projet ; le projet et ses worktrees sont listés.
- 2
Démarrez un environnement et ouvrez son adresse.
- 3
Enregistrez des captures de référence, puis comparez-les à la référence après un changement.
Questions
Avec quels projets ça fonctionne ?
Les projets avec un script dev, start, serve ou preview dans package.json, les projets Django et les sites statiques. Pour le reste, vous pouvez écrire votre propre commande de démarrage.
Quelles pages sont capturées ?
Les pages que vous listez dans les paramètres de preview ; par défaut, seulement la page d’accueil (/).
Quel agent exécute le test ?
Un agent Claude Code avec le navigateur AgentVera, ouvert dans ce worktree.
Fonctionnalités liées
Termes liés:Git worktreeTest de régression visuelle
Toutes les fonctionnalitésVoir les 18 agents de code pris en charge
Réunissez vos agents sur un seul bureau.
Commencez avec le forfait gratuit. Téléchargez l’application, ajoutez un dossier de projet et ouvrez votre premier agent.
Articles sur ce sujet
Blog- 28 octobre 2026Meilleurs outils de vibe coding (2026) : 13 comparésLes meilleurs outils de vibe coding en 2026 : créateurs d’apps comme Lovable, Bolt.new, v0 et Replit, éditeurs IA comme Cursor, agents comme Claude Code et Codex.
- 22 octobre 2026Vibe coding sans risque : une méthode pratiqueFaire du vibe coding sans perdre le contrôle : idée, spec, petites étapes, tests, commits git, revue et déploiement, plus choix d’outil, bons prompts et limites.
- 11 octobre 2026Créer un tableau de bord de données avec l’IACréer un tableau de bord de données avec l’IA : transformez Excel, CSV ou SQL en dashboard avec pandas et Streamlit, en lecture seule, chiffres vérifiés et partage sûr.