Preview-Umgebungen: jeder Branch unter eigener Adresse

Wenn parallele Agents in verschiedenen Worktrees arbeiten, musst du nicht jeden Dev-Server von Hand starten und freie Ports suchen, um ihre Ergebnisse zu sehen. Der Tab „Preview“ startet den Server des Projekts und jedes Worktrees auf einem eigenen Port und gibt jedem eine nach seinem Branch benannte Adresse.

Kostenlos herunterladen

Eine Adresse pro Branch

Jede Umgebung öffnet sich unter http://<branch>.agentvera.localhost:<port>; der lokale Proxy reicht WebSockets durch. Der Startbefehl wird aus dem Skript dev, start, serve oder preview in der package.json ermittelt, mit einem Port-Flag für Vite, Astro, Nuxt, SvelteKit, Remix, Next und Angular. Auch Djangos runserver wird erkannt; sonst liefert ein eingebauter statischer Server die index.html aus. Du kannst auch einen eigenen Befehl mit einem {port}-Platzhalter schreiben.

Start, Neustart, Stopp und Logs.
Im AgentVera-Browser oder deinem System-Browser öffnen oder die Adresse kopieren.
Ist Vercel verbunden, erscheint die Vercel-Preview-URL des Branches auch auf der Umgebungskarte.

Visueller Vergleich

Ganzseiten-Screenshots der von dir gewählten Seiten entstehen in den Größen Mobile (375×812), Tablet (768×1024) und Desktop (1440×900); bis zu 6 Größen sind einstellbar. Du legst eine Baseline fest, spätere Aufnahmen werden Pixel für Pixel damit verglichen und geänderte Pixel rot markiert. Die Standard-Änderungsschwelle liegt bei 0,1 % der Pixel.

Einen Agent testen lassen

Der Button „Test with agent“ öffnet einen Claude-Agent in diesem Worktree mit dem AgentVera-Browser. Er öffnet jede Seite, ändert die Größe auf jeden Breakpoint, sucht nach Überlauf, kaputtem Layout, unlesbarem Text, Konsolenfehlern und toten Links oder Buttons, behebt, was er kann, und berichtet zurück.

So nutzt du es

1
Öffne den Tab „Preview“ auf der Details-Seite eines Projekts; das Projekt und seine Worktrees werden aufgelistet.
2
Starte eine Umgebung und öffne ihre Adresse.
3
Speichere Baseline-Aufnahmen und vergleiche nach einer Änderung mit der Baseline.

Fragen

Mit welchen Projekten funktioniert es?

Mit Projekten, die ein Skript dev, start, serve oder preview in der package.json haben, mit Django-Projekten und statischen Seiten. Für alles andere kannst du einen eigenen Startbefehl schreiben.

Von welchen Seiten werden Screenshots gemacht?

Von den Seiten, die du in den Preview-Einstellungen angibst; standardmäßig nur die Startseite (/).

Welcher Agent führt den Test aus?

Ein Claude-Code-Agent mit dem AgentVera-Browser, geöffnet in diesem Worktree.

Hol deine Agenten an einen Schreibtisch.

Starte mit dem kostenlosen Tarif. Lade die App herunter, füge einen Projektordner hinzu und öffne deinen ersten Agenten.

Kostenlos herunterladen Preise

Beiträge zu diesem Thema

Blog