Окружения предпросмотра: каждая ветка на своём адресе

Когда параллельные агенты работают в разных worktree, не нужно вручную запускать каждый dev-сервер и искать свободные порты, чтобы увидеть результат. Вкладка Preview запускает сервер проекта и каждого worktree на собственном порту и даёт каждому адрес по имени его ветки.

Один адрес на ветку

Каждое окружение открывается по адресу http://<branch>.agentvera.localhost:<port>; локальный прокси пропускает WebSocket. Команда запуска определяется по скрипту dev, start, serve или preview в package.json, с добавлением флага порта для Vite, Astro, Nuxt, SvelteKit, Remix, Next и Angular. Распознаётся и runserver Django; в остальных случаях index.html отдаёт встроенный статический сервер. Можно также написать свою команду с заполнителем {port}.

  • Запуск, перезапуск, остановка и логи.
  • Открытие в браузере AgentVera или системном браузере либо копирование адреса.
  • При подключённом Vercel URL предпросмотра ветки в Vercel тоже показывается на карточке окружения.

Визуальное сравнение

Скриншоты выбранных страниц целиком снимаются в размерах Mobile (375×812), Tablet (768×1024) и Desktop (1440×900); можно задать до 6 размеров. Вы задаёте эталон, последующие снимки сравниваются с ним попиксельно, а изменившиеся пиксели отмечаются красным. Порог изменений по умолчанию 0,1% пикселей.

Пусть агент протестирует

Кнопка проверки агентом открывает агента Claude в этом worktree с браузером AgentVera. Он открывает каждую страницу, меняет размер под каждую точку останова, ищет переполнение, поломанную вёрстку, нечитаемый текст, ошибки консоли и мёртвые ссылки или кнопки, исправляет, что может, и сообщает о результате.

Как пользоваться

  1. 1

    Откройте вкладку Preview на странице Details проекта; проект и его worktree перечислены в списке.

  2. 2

    Запустите окружение и откройте его адрес.

  3. 3

    Сохраните эталонные снимки, а после изменения сравните с ними.

Вопросы

С какими проектами это работает?

С проектами, у которых в package.json есть скрипт dev, start, serve или preview, с проектами Django и статическими сайтами. Для всего остального можно написать свою команду запуска.

Какие страницы снимаются?

Страницы, перечисленные в настройках предпросмотра; по умолчанию только главная (/).

Какой агент проводит тест?

Агент Claude Code с браузером AgentVera, открытый в этом worktree.

Связанные возможности

Связанные термины:Git worktreeВизуальное регрессионное тестирование

Все возможностиПосмотреть 18 поддерживаемых агентов для кода

Соберите своих агентов за одним столом.

Начните с бесплатного тарифа. Скачайте приложение, добавьте папку проекта и откройте первого агента.