Claude в Chrome стал мощным инструментом для отладки веб-приложений

Раньше разработчику, который обнаружил визуальную или функциональную проблему, приходилось выбирать один из нескольких вариантов. Можно было попросить Claude проанализировать исходный код и попытаться определить причину неполадки. Другой вариант — сделать скриншот проблемного участка, отправить его Claude и отдельно объяснить, что именно работает неправильно.

При регулярной проверке интерфейса можно было настроить автоматизацию с помощью Playwright. Такой сценарий открывал приложение, создавал скриншоты и проверял различные состояния интерфейса. Однако подобный процесс требовал дополнительной настройки и не всегда был удобным.

Claude в Chrome позволяет объединить эти этапы. ИИ может открыть тот же интерфейс, который видит разработчик, проанализировать происходящее непосредственно в браузере, найти проблему, внести необходимые изменения в код, а затем снова проверить приложение.

Claude теперь может видеть проблему непосредственно в браузере

Раньше типичный процесс выглядел следующим образом: Claude Code создавал приложение, разработчик запускал его в Chrome, а Claude в основном анализировал происходящее на основе исходного кода.

Если на странице что-то выглядело неправильно, проблему приходилось отдельно описывать или передавать скриншот.

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

С Claude в Chrome достаточно попросить ИИ самостоятельно проверить приложение. Он может посмотреть на интерфейс и определить, что именно необходимо исправить.

Возможности не ограничиваются визуальными проблемами. Claude способен анализировать ошибки консоли, сетевую активность и состояние DOM, перемещаться по приложению, нажимать кнопки, заполнять формы, переходить между экранами и отслеживать результат каждого действия.

Отладка пользовательских сценариев

Например, в приложении может не работать процесс авторизации: пользователь вводит данные и нажимает кнопку входа, но ничего не происходит.

Раньше Claude анализировал бы код аутентификации и пытался определить потенциальную причину проблемы. Теперь он может самостоятельно открыть приложение, заполнить форму и нажать кнопку входа.

После этого ИИ способен проверить появившиеся ошибки в консоли, выяснить, завершился ли неудачей запрос к API, посмотреть, что произошло в браузере, связать обнаруженную проблему с исходным кодом, внести исправление, перезагрузить приложение и повторно протестировать весь сценарий.

Claude в Chrome подходит и для проверки дизайна

Инструмент полезен не только при поиске программных ошибок. Его можно использовать для воспроизведения и проверки дизайна.

Например, если необходимо создать лендинг, похожий на сайты конкурентов, Claude может самостоятельно изучить их веб-сайты. Можно попросить его проанализировать сразу несколько конкурирующих ресурсов и реализовать в новом проекте наиболее удачные решения каждого из них.

После создания страницы Claude может снова открыть результат в браузере и визуально проверить его. При необходимости процесс можно повторять до тех пор, пока интерфейс не будет соответствовать требуемому результату.

При этом есть существенное ограничение: Claude в Chrome расходует значительную часть доступного лимита использования. Поэтому многократная проверка одного проекта может быстро привести к исчерпанию доступного лимита.

Claude в Chrome при этом не заменяет такие инструменты, как Playwright. Для детерминированного регрессионного тестирования, когда одни и те же проверки должны автоматически выполняться после каждого изменения кода, Playwright по-прежнему остается подходящим решением.

Работа с уже авторизованными приложениями

Одной из наиболее полезных возможностей Claude в Chrome становится работа с приложениями, в которых пользователь уже авторизован.

Многие программы, которые требуется тестировать, представляют собой панели управления, административные интерфейсы, внутренние инструменты, тестовые окружения и CRM-системы, недоступные из публичного интернета.

Обычно для подключения ИИ к таким системам требуется предоставить доступ через API, настроить отдельную интеграцию, решить вопрос с авторизацией браузерной автоматизации или работать с сессиями, cookie, единой системой входа и многофакторной аутентификацией.

Claude в Chrome позволяет обойти значительную часть этих сложностей, поскольку работает внутри существующей браузерной сессии. Если пользователь уже вошел в нужное приложение, Claude может взаимодействовать с открытой страницей в рамках той же авторизованной сессии.

Anthropic отдельно указывает среди сценариев использования внутренние инструменты, устаревшие порталы, административные консоли и другие системы, для которых отсутствует API.

Таким образом, пользователь может самостоятельно открыть приложение, пройти обычную авторизацию, а затем попросить Claude воспроизвести обнаруженную проблему.

Аналогичная возможность есть у ChatGPT

Claude в Chrome не является единственным решением такого типа. ChatGPT также предлагает аналогичную возможность через расширение для браузера.

Принцип работы похож: ИИ получает возможность взаимодействовать с веб-страницами непосредственно в браузере. При этом автор материала отмечает, что ChatGPT предоставляет более высокие лимиты использования по сравнению с Claude.