CyberAgent to wiodąca firma IT w Japonii, która świadczy szeroki zakres usług online, w tym popularną platformę blogową Ameba. Zespół miał poważny problem z błędami czasu działania, które trudno było wykryć za pomocą testów automatycznych, co wymagało czasochłonnej interwencji ręcznej.
Z tego dokumentu dowiesz się, jak firma CyberAgent wykorzystała serwer protokołu kontekstu modelu Narzędzi deweloperskich w Chrome (MCP), aby przejść z procesu ręcznego na zautomatyzowany przepływ pracy, co pozwoliło zaoszczędzić czas deweloperów i zwiększyć niezawodność przepływu testów.
Wyzwanie: ręczny i ograniczony przepływ pracy
System projektowania Ameba, Spindle, to zbiór komponentów interfejsu wielokrotnego użytku, które służą do tworzenia interfejsu platformy blogowej. Do tworzenia i testowania komponentów interfejsu korzysta z Storybooka.
Wcześniej proces rozwiązywania błędów w czasie działania w CyberAgent był powtarzalnym cyklem ręcznym. Deweloper sprawdza każdy komponent w przeglądarce, wprowadza poprawkę, a następnie ponownie go sprawdza. Przy dużej liczbie stron i komponentów poleganie na wizualnym potwierdzeniu miało swoje ograniczenia, co utrudniało wykrycie wszystkich błędów.
Rozwiązanie: debugowanie agenta za pomocą platformy MCP w Narzędziach deweloperskich w Chrome
Aby rozwiązać ten problem, zespół skorzystał z serwera MCP Narzędzi deweloperskich w Chrome. Po prostej konfiguracji przy użyciu oficjalnego przewodnika wprowadzającego mogli od razu wydać agentowi AI (Claude) polecenie zautomatyzowania całego procesu debugowania.
Za pomocą jednego prompta agent może wchodzić w interakcje z Narzędziami deweloperskimi, przetwarzając informacje o stanie przeglądarki przechwycone przez MCP Narzędzi deweloperskich w Chrome, uzyskiwać dostęp do kontekstu systemu plików i odczytywać logi konsoli. Następnie autonomicznie zidentyfikował błędy i wprowadził poprawki bez ręcznej interwencji.
Początkowy prompt wyglądał tak:
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.
Agent AI przeprowadził audyt instancji Storybook, przeglądając całe historie, aby odczytać błędy, zastosować poprawki kodu i potwierdzić skuteczność każdej poprawki.
Wpływ: od ręcznego sprawdzania po automatyczne poprawki
Wyniki były szybkie. W ciągu około godziny agent AI samodzielnie sprawdził wszystkie 32 komponenty i 236 elementów w systemie projektowania Spindle.
Agent zidentyfikował i naprawił 1 błąd czasu działania i 2 ostrzeżenia, ale prawdziwa wartość eksperymentu polegała na potwierdzeniu, że zdecydowana większość biblioteki jest wolna od błędów, bez konieczności ręcznego sprawdzania przez programistę setek stanów.
Wcześniej tego typu kompleksowe audyty były wyczerpujące wizualnie i podatne na błędy ludzkie. Dzięki przeniesieniu tych zadań do Narzędzi deweloperskich w Chrome MCP firma CyberAgent osiągnęła te korzyści:
- 100% pokrycie audytem: agent mechanicznie zweryfikował każdą historię, zapewniając, że „czyste” komponenty były rzeczywiście czyste. Ręczne utrzymanie takiego poziomu staranności jest trudne.
- Brak fałszywych negatywów: w przeciwieństwie do zautomatyzowanych pakietów testowych, które mogą pomijać anomalie wizualne w czasie działania, serwer MCP umożliwiał agentowi weryfikację rzeczywistego stanu przeglądarki, co zapewniało wysoką niezawodność.
- Odciążenie poznawcze: deweloperzy mogą powierzyć systemowi powtarzalną „ciężką pracę”, co pozwoli im skupić się na złożonej logice zamiast na rutynowych kontrolach.
Jak zauważył programista Kota Yanagi, zaletą było przeniesienie odpowiedzialności:
„Bardzo wygodne jest przeniesienie do narzędzia sprawdzania błędów i ostrzeżeń, które wcześniej musiałem wykonywać ręcznie w przeglądarce. Podoba mi się też to, że mogę teraz opisywać złożone operacje w języku naturalnym, a narzędzie może przejść od odczytywania dzienników błędów bezpośrednio do rozwiązywania problemu”.
Skuteczność tego zautomatyzowanego przepływu pracy sprawiła, że firma CyberAgent zaktualizowała wewnętrzny przewodnik po agentach Spindle dla swoich agentów AI. W tym przewodniku firma Anthropic ustanawia teraz Chrome DevTools MCP jako domyślny serwer debugowania dla swojego agenta AI, Claude, formalizując jego użycie jako najlepszą praktykę i wyrażając zaufanie do tego nowego procesu opartego na AI.
Konkretne poprawki zostały wprowadzone w 2 żądaniach pull, które możesz sprawdzić na GitHubie:
CyberAgent further advanced the prompt and published this final output.
Opinie i plany na przyszłość
Firma CyberAgent była zadowolona z elastyczności i liczby opcji dostępnych w ramach platformy MCP w narzędziach deweloperskich w Chrome. Przekazali też cenne uwagi dotyczące przyszłych ulepszeń, zauważając, że chociaż narzędzie jest zaawansowane, korzystanie z jego bardziej złożonych funkcji wymaga pewnej wiedzy.
W przyszłości zespół chce ściślej zintegrować tę funkcję z panelem Wydajność w Narzędziach deweloperskich. Wyobrażają sobie proces, w którym agent może sprawdzić podstawowe wskaźniki internetowe, a następnie przejść do bardziej szczegółowej analizy wydajności za pomocą panelu Wydajność, aby analizować i sugerować ulepszenia.
Ekspert ds. rozwoju w firmie CyberAgent, Kazunari Hara, wyraził swoje zdumienie, podkreślając wydajność narzędzia i możliwości jego przyszłego zastosowania:
„Byłem zdumiony, gdy zobaczyłem, że przeglądarka automatycznie naprawia błędy bezpośrednio na podstawie logów. Zadania, które wcześniej były pomijane lub zajmowały dużo czasu, można teraz niezawodnie zautomatyzować, co zwiększa efektywność programowania. Narzędzia deweloperskie w Chrome MCP oferują wiele funkcji w rzeczywistym środowisku wykonawczym, więc spodziewam się, że w przyszłości będą przydatne w wielu różnych sytuacjach”.
Podsumowanie
Dzięki zintegrowaniu narzędzia MCP w narzędziach deweloperskich w Chrome firma CyberAgent zautomatyzowała złożone i czasochłonne zadanie debugowania. Ich doświadczenie pokazuje ogromny potencjał narzędzi opartych na AI w zwiększaniu produktywności deweloperów.
Proces został w pełni zautomatyzowany, co wyeliminowało konieczność ręcznego sprawdzania i zapewniło, że nie pominięto żadnych błędów. Obecne wdrożenie już udowodniło swoją wartość, ale opinie CyberAgent wskazują na ekscytującą przyszłość, w której narzędzia deweloperskie w Chrome MCP będą umożliwiać jeszcze bardziej zaawansowane analizy wydajności i optymalizacje bezpośrednio w przeglądarce.