Встроенный браузер Codex: как проверять интерфейс не по файлам, а глазами
Интерфейс часто ломается не там, где его ищут. В файле все выглядит правильно, компонент собран, текст на месте, стили написаны. А на экране кнопка уехала, заголовок налез на карточку, мобильная версия развалилась, форма не нажимается. Если Codex работает только по файлам, он может исправлять не ту проблему.
В официальной документации OpenAI по in-app browser сказано, что встроенный браузер дает человеку и Codex общий вид на отрендеренные web-страницы. Его предлагают использовать для локальных dev servers, file-backed previews и публичных страниц. Это важно: Codex может не только читать код, но и смотреть на результат как на страницу.
Для владельца проекта это означает простую вещь: не надо объяснять баг словами, если его можно показать.
Почему "посмотри файлы" недостаточно
Файлы показывают намерение. Страница показывает результат. Между ними всегда есть расстояние: данные, состояние, браузер, размер экрана, загрузка шрифтов, кэш, адаптивность, ошибки сборки.
Плохая постановка:
Проверь, почему страница выглядит странно.
Codex начнет искать по проекту, угадывать компонент, читать CSS и строить гипотезы.
Хорошая постановка:
Открой http://localhost:3000/pricing во встроенном браузере. Проверь desktop и mobile. На карточке второго тарифа заголовок налезает на цену. Сначала опиши, что видишь, потом найди вероятную причину в файлах. Не меняй другие блоки.
Так Codex получает не абстрактную жалобу, а видимую задачу.
Где встроенный браузер Codex особенно полезен
Встроенный браузер нужен не для "погуляй по интернету". Он полезен там, где результат виден:
| Сценарий | Что смотрит Codex | Что проверяет человек |
|---|---|---|
| Локальная страница | layout, адаптивность, ошибки интерфейса | похоже ли на нужный экран |
| Preview файла | PDF/HTML/лендинг/страница документа | читается ли результат |
| Публичная страница | конкретный URL, карточка, форма, навигация | воспроизводится ли проблема |
| Комментарий на экране | область или элемент с багом | правильно ли Codex понял место |
В документации также есть важное ограничение: встроенный браузер Codex не подходит для всех authenticated или signed-in сценариев. Если нужна пользовательская сессия Chrome, это уже другой контур и другие границы доступа. И это правильно: не всякий браузерный доступ должен становиться обычной привычкой.
Как ставить задачу через видимую страницу
Минимальный шаблон:
Открой [URL]. Проверь [что именно]. Если проблема видна, опиши ее в одном абзаце, потом найди вероятный источник в проекте. Не исправляй соседние блоки. После правки снова открой страницу и покажи, что изменилось.
В этом шаблоне есть три слоя: наблюдение, правка, повторная проверка. Без первого Codex может чинить невидимую проблему. Без третьего - сказать "готово", но не увидеть, что экран все еще сломан.
Комментарии на странице лучше длинных объяснений
Документация Codex описывает browser comments: когда баг виден только на отрендеренной странице, можно включить annotation mode, выбрать элемент или область и оставить комментарий. Это сильный прием для не-программиста.
Вместо "там где-то справа что-то некрасиво" можно отметить конкретную область и написать:
На мобильной ширине этот блок перекрывает кнопку. Исправить только этот экран. Не менять текст и порядок карточек.
Такой комментарий похож на правку в макете. Codex видит место, человек не обязан знать имя компонента, а задача становится проверяемой.
Рабочая карточка видимой проверки
Перед тем как просить Codex чинить интерфейс, заполните карточку:
| Поле | Что указать |
|---|---|
| URL | локальный или публичный адрес |
| Экран | desktop, mobile, конкретная ширина |
| Видимый симптом | что именно не так |
| Запрет | какие блоки не трогать |
| Проверка после правки | что должно измениться на странице |
| Решение человека | принять визуальный результат или вернуть |
Эта карточка дисциплинирует даже простую правку. Codex перестает "улучшать интерфейс вообще" и начинает исправлять конкретный видимый дефект.
Где остается человек
Codex может открыть страницу, воспроизвести баг, найти файл, исправить стиль, снова проверить экран и показать результат. Но человек решает, что визуально приемлемо, где можно отступить от макета, а где нужен дизайнер или владелец продукта.
Встроенный браузер не делает Codex дизайнером. Он делает работу менее слепой. Агент видит страницу, человек видит ту же страницу, а спор "что именно сломано" превращается в конкретную отметку на экране.