CyberAgent, ведущая японская IT-компания, предоставляет широкий спектр онлайн-сервисов, включая популярную блог-платформу Ameba. Команда столкнулась с серьёзной проблемой: ошибки выполнения, которые было сложно обнаружить с помощью автоматизированного тестирования, требовали длительного ручного вмешательства.
В этом документе рассматривается, как CyberAgent использовал сервер Chrome DevTools Model Context Protocol (MCP) для перехода от ручного процесса к автоматизированному, что позволило сэкономить время разработчика и повысить надежность потока тестирования.
Задача: ручной и ограниченный рабочий процесс
Spindle, дизайн-система Ameba, представляет собой набор повторно используемых UI-компонентов, используемых для создания интерфейса блог-платформы. Для разработки и тестирования UI-компонентов используется Storybook.
Раньше рабочий процесс CyberAgent по устранению ошибок времени выполнения представлял собой повторяющийся ручной цикл. Разработчик проверял каждый компонент в браузере, применял исправление и затем проверял снова. При большом количестве страниц и компонентов такая зависимость от визуального подтверждения имела свои ограничения, что затрудняло выявление каждой ошибки.
Решение: отладка агента с использованием Chrome DevTools MCP
Чтобы решить эту проблему, команда обратилась к серверу Chrome DevTools MCP. После простой настройки с использованием официального руководства по вводу в эксплуатацию они смогли сразу же дать команду ИИ-агенту (Клоду) автоматизировать весь процесс отладки.
По одному запросу агент мог взаимодействовать с DevTools, обрабатывая информацию о состоянии браузера, собранную Chrome DevTools MCP; получать доступ к контексту файловой системы и читать журналы консоли. Затем он автономно выявлял ошибки и реализовывал исправления без ручного вмешательства.
Первоначальная подсказка, которую они использовали, была следующей:
Currently, spindle-ui's Storybook is running, but runtime errors may be occurring.
Please use chrome-dev-tools-mcp to confirm the operation of the Story in the following steps:
Identify all target Stories. Confirm each and every one, no matter how many there are.
Confirm that the Story is displayed correctly using dev-tools-mcp.
Fix all errors.
Click and move through each Story from the top in the browser opened with mcp to confirm.
Агент ИИ приступил к проверке экземпляра Storybook, просматривая целые истории для выявления ошибок, внесения исправлений кода и подтверждения успешности каждого исправления.
Влияние: от ручных проверок до автоматизированных исправлений
Результаты не заставили себя ждать. Примерно за час ИИ-агент автономно проверил все 32 компонента и 236 историй в системе проектирования Spindle.
Хотя агент выявил и исправил одну ошибку времени выполнения и два предупреждения, истинная ценность эксперимента заключалась в уверенности в обратном: подтверждении того, что подавляющее большинство библиотеки не содержало ошибок, и разработчику не пришлось вручную прокручивать сотни состояний.
Раньше этот тип комплексного аудита был визуально утомителен и подвержен человеческому контролю. Передав эту работу Chrome DevTools MCP, CyberAgent добился следующего:
- 100% охват аудитом : агент механически проверил каждую отдельную историю, убедившись, что «чистые» компоненты действительно являются чистыми, — уровень осмотрительности, который трудно поддерживать вручную.
- Ноль ложноотрицательных результатов : в отличие от автоматизированных тестовых наборов, которые могут пропустить визуальные аномалии во время выполнения, сервер MCP позволяет агенту проверять фактическое состояние браузера, обеспечивая высокую надежность.
- Когнитивная разгрузка : разработчики могут доверить системе выполнение повторяющейся «черновой работы», что позволит им сосредоточиться на сложной логике, а не на рутинных проверках.
Как отметил веб-разработчик Кота Янаги, преимуществом стало смещение ответственности:
«Очень удобно было разгрузить систему от проверки ошибок и предупреждений во время выполнения, которую раньше приходилось делать вручную в браузере. Мне также нравится, что теперь я могу описывать сложные операции на естественном языке и инструмент может сразу перейти от чтения журналов ошибок к устранению проблемы».
Успех этого автоматизированного рабочего процесса даже побудил компанию CyberAgent обновить своё внутреннее руководство по Spindle Agents для своих ИИ-агентов. В этом руководстве Chrome DevTools MCP теперь используется в качестве сервера отладки по умолчанию для ИИ-агента Claude, что официально подтверждает его использование в качестве передовой практики и демонстрирует уверенность компании в этом новом процессе на базе ИИ.
Конкретные исправления были реализованы в двух запросах на включение изменений, с которыми вы можете ознакомиться на GitHub:
CyberAgent продвинулся дальше и опубликовал этот окончательный вывод .
Отзывы и планы на будущее
CyberAgent остался доволен гибкостью и количеством доступных функций Chrome DevTools MCP. Они также предоставили ценные отзывы для будущих улучшений, отметив, что, несмотря на всю мощь инструмента, использование его расширенных функций требует определённого уровня знаний пользователя.
В перспективе команда заинтересована в более глубокой интеграции с панелью DevTools Performance. Они представляют себе рабочий процесс, в котором агент может проверить основные веб-показатели, а затем перейти к более глубокому анализу производительности, используя панель Performance, чтобы проанализировать результаты и предложить улучшения.
Эксперт-разработчик CyberAgent Казунари Хара поделился своим удивлением, подчеркнув эффективность инструмента и потенциал для будущих применений:
«Я был поражён, когда увидел, что браузер автоматически исправляет ошибки прямо из журналов. Задачи, которые раньше пропускались или выполнялись слишком долго, теперь можно надёжно автоматизировать, что повышает эффективность разработки. Поскольку Chrome DevTools MCP предлагает так много функций в реальной среде выполнения, я ожидаю, что он будет полезен во многих различных ситуациях в будущем».
Заключение
Интегрировав Chrome DevTools MCP в свой рабочий процесс, компания CyberAgent успешно автоматизировала сложную и трудоёмкую задачу отладки. Их опыт демонстрирует огромный потенциал инструментов на базе ИИ для повышения производительности труда разработчиков.
Процесс был полностью автоматизирован, что исключило необходимость ручных проверок и гарантировало отсутствие пропущенных ошибок. Текущая реализация уже доказала свою эффективность, но отзывы CyberAgent указывают на захватывающее будущее, в котором Chrome DevTools MCP позволит выполнять ещё более сложные задачи анализа производительности и оптимизации непосредственно в браузере.