Opublikowano: 22 czerwca 2026 r.
P2ER, agencja rozwiązań cyfrowych, używa Narzędzi deweloperskich w Chrome dla agentów, aby mieć pewność, że do ostatecznej weryfikacji przez ludzi trafia tylko sprawdzone i działające oprogramowanie. Dzięki przekształceniu przepływu pracy w infrastrukturę agentów agencja P2ER umożliwiła agentom AI przeprowadzanie empirycznej weryfikacji interfejsu, co zwiększyło częstotliwość wdrażania z raz w tygodniu do kilku razy dziennie.
Wyzwanie: zwiększenie jakości w istniejących aplikacjach
P2ER tworzy zaawansowane rozwiązania cyfrowe dla globalnych marek, w tym producentów samochodów, zegarków i firm z branży hotelarskiej. Głównym wyzwaniem, podobnie jak w przypadku wielu innych firm, była praca w złożonych, istniejących aplikacjach. Zespół, który zaczął stosować kodowanie z wykorzystaniem agentów, musiał pokonać 3 główne przeszkody:
- Niestabilne testowanie interfejsu. Standardowe zestawy testów miały problemy z danymi dynamicznymi, takimi jak zmieniające się ceny hoteli czy oferty sezonowe w niektórych projektach P2ER. Dane pozorowane często ukrywały wady integracji, które tester-człowiek od razu by wykrył.
- Problemy z niezawodnością agentów. Bez wyraźnych instrukcji agenci AI czasami twierdzili, że zadanie zostało wykonane, nie sprawdzając tego.
- Utrata kontekstu. Szerokie zadania i przekroczenie limitu czasu modelu powodowały, że agenci tracili orientację w celach sesji. Utrudniało to programistom śledzenie i kontynuowanie pracy rozpoczętej przez agenta.
Rozwiązanie: budowanie infrastruktury dla rzemiosła
P2ER stworzyła infrastrukturę, w której AI jest traktowana jako „partner do sparingu”, który może też zajmować się powtarzalnymi aspektami programowania. Dzięki temu zespół może zwiększyć jakość pracy, skupiając się na architekturze i kreatywnym rozwiązywaniu problemów.
Wymuszanie weryfikacji empirycznej za pomocą Narzędzi deweloperskich dla agentów na serwerze MCP
Aby zapewnić niezawodność, P2ER wprowadziła regułę obowiązkowej weryfikacji empirycznej.
Ten wymóg inżynieryjny, skodyfikowany w pliku AGENTS.md projektu, brzmi następująco:
All claims regarding service availability and component rendering
MUST be empirically verified (log output, dev compiler, browser/devtools inspection)
before asserting to the user.
Zamiast polegać na słowie agenta, zespół używa Narzędzi deweloperskich w Chrome dla agentów, aby zapewnić agentom bezpieczne środowisko do wizualnego i interaktywnego poruszania się po aplikacji.
Ci „agenci testowi” wykonują kilka kluczowych zadań, które są pomijane przez standardowe testy statyczne:
- Testowanie danych dynamicznych: nawet w środowisku testowym agenci testują na podstawie rzeczywistych, zmieniających się danych (np. zmieniających się cen hoteli w różnych sezonach), aby korzystać z aplikacji dokładnie tak jak użytkownik. Umożliwiają to narzędzia interakcji Narzędzi deweloperskich dla agentów, takie jak
new_page,navigate_page,fill,clickihover, wywoływane w ich umiejętnościgithub-issue-test, co pozwala agentowi na dynamiczne uwierzytelnianie i symulowanie realistycznej ścieżki kliknięć użytkownika. - Audyty wizualne: agenci identyfikują rozbieżności wizualne między układami Figma a rzeczywistą implementacją. Dzięki użyciu narzędzia
take_screenshotz Narzędzi deweloperskich dla agentów ich umiejętnośćfigma-validaterobi zrzuty ekranu w wysokiej rozdzielczości renderów Storybook na żywo, aby porównać je z eksportami Figma. - Sprawdzanie użyteczności: agenci wykrywają brakujące tłumaczenia lub błędy użyteczności, które często są pomijane przez skrypty automatyczne. Dzięki bezpośredniej interakcji z drzewem dostępności i sprawdzaniu zrzutów ekranu pobranych za pomocą narzędzi
take_snapshotitake_screenshotagenci aktywnie skanują interfejs pod kątem anomalii, takich jak ciągi MISSING_MESSAGE, zgodnie z wyraźnymi instrukcjami w zautomatyzowanych przepływach pracy weryfikacji.
Dzielenie i utrwalanie podzadań
Aby zapobiec przekroczeniu limitu czasu sesji i utracie kontekstu, P2ER ściśle dzieli pracę na podzadania za pomocą podagentów. Następnie instruuje agentów, aby działali jako koordynatorzy, w ten sposób:
Rather than executing everything in the main thread, you must decompose large
or complex objectives into modular subtasks that can be delegated
to specialized subagents.
Aby informować właścicieli produktów o tym procesie, zespół zintegrował niestandardową umiejętność agentów, która umożliwia im śledzenie pracy w problemach na GitHubie. Dzięki temu każde zadanie podagenta i jego wyniki są utrwalane i dokumentowane jako podproblem za pomocą interfejsu API GitHuba, co tworzy jasną ścieżkę audytu i trwały kontekst, który mogą wykorzystać inni programiści.
Izolowanie środowisk na potrzeby równoległego wykonywania
Aby zwiększyć skalę procesu programowania i umożliwić równoległe uruchamianie kodu przez wielu agentów, P2ER wymaga od agentów izolowanych środowisk dla każdego zadania. Zapobiega to konfliktom stanu i problemom z siecią podczas weryfikacji interfejsu.
Konfiguracja techniczna tej izolacji obejmuje:
- Izolowane drzewa robocze Git: aby zapobiec kolizjom plików i zanieczyszczeniu przestrzeni roboczej, gdy wielu agentów działa równolegle, zadania są wykonywane w izolowanych drzewach roboczych Git. Każdy agent otrzymuje dedykowaną przestrzeń w systemie plików, w której kopiowane są zmienne środowiskowe, a zależności są łączone symbolicznie, co zapewnia, że zmiany w plikach nigdy się nie nadpisują.
- Unikalne środowiska: każdy agent i zadanie uruchamia swój serwer programistyczny Next.js na unikalnym izolowanym porcie. Zgodnie z regułami projektu serwery
są uruchamiane dynamicznie za pomocą polecenia
npx next dev -p <custom_port> --turbopack, aby zapewnić równoległe wykonywanie bez konfliktów sieciowych. - Klonowanie bazy danych: aby zapobiec kolizjom danych podczas równoległego testowania, P2ER programowo duplikuje główną bazę danych do schematu specyficznego dla zadania podczas uruchamiania agenta. Gdy agent zakończy weryfikację i zadanie zostanie zatwierdzone, automatyczny proces czyszczenia usuwa izolowaną bazę danych. Ten cykl życia zapewnia, że każdy agent działa w czystej przestrzeni roboczej i nie pozostawia żadnych nieużywanych danych.
- Testowanie ukierunkowane: wszystkie testy przeglądarki za pomocą Narzędzi deweloperskich w Chrome dla agentów muszą być kierowane na dokładny port niestandardowy przypisany do konkretnej instancji agenta.
Wymóg testowania zabrania kodowania na stałe portów domyślnych, co wymaga używania adresów URL docelowych testów, takich jak
http://localhost:<custom_port>.
Wpływ: 10-krotny wzrost szybkości programowania przy zachowaniu jakości
Przejście na kodowanie z wykorzystaniem agentów z wysokim poziomem zaufania zmieniło wyniki P2ER. Te zmiany były pierwotnie konieczne, aby zapewnić niezawodne działanie agenta, ale przyniosły też korzyści w całym cyklu życia programowania:
- 10-krotnie szybsze cykle pracy: większość problemów jest teraz zamykana w ciągu 1 dnia, w porównaniu z poprzednią średnią wynoszącą 1–3 dni. Częstotliwość wdrażania wzrosła z raz w tygodniu do kilku razy dziennie.
- Strategiczne skupienie zespołów ds. kontroli jakości: ponieważ agenci wykrywają teraz podstawowe regresje i "łatwe do wykrycia problemy", zespół testujący może skupić się na bardziej szczegółowych, złożonych scenariuszach testowych.
- Solidne implementacje dla interesariuszy: implementacje są teraz bardziej odporne, ponieważ testowanie wykracza poza standardową „ścieżkę sukcesu” programisty.
- Jaśniejsza komunikacja i możliwość śledzenia: dzięki wymuszeniu reguły „problem zgłoszony przez człowieka – podproblem implementacji” interesariusze otrzymują jasne instrukcje dotyczące wprowadzonych ulepszeń logicznych zamiast czytać zgłoszenia zawierające szczegóły techniczne implementacji i sposoby ich testowania.
Przykładem wpływu na szybkość programowania jest to, że P2ER zbudowała nową platformę w 6 miesięcy, co przy użyciu dotychczasowych metod zajęłoby wiele lat. Człowiek pozostaje ostatecznym strażnikiem jakości, sprawdzając żądania scalenia, które zostały już zweryfikowane przez agentów.
Informacje techniczne dla zespołów
Podczas tworzenia tego przepływu pracy P2ER zidentyfikowała kilka strategii, które pomogły jej przejść od eksperymentowania do dojrzałego modelu programowania wspomaganego przez agentów.
Te strategie mogą pomóc innym zespołom w udoskonaleniu własnych implementacji z wykorzystaniem agentów:
Optymalizowanie wykorzystania tokenów za pomocą wstrzykiwania skryptów i grupowania w interfejsie wiersza poleceń
Podczas długich sesji programowania serwery MCP mogą zużywać dużo tokenów, jeśli agenci polegają wyłącznie na nawigacji krok po kroku (np. robienie zrzutu ekranu, znajdowanie identyfikatora, wypełnianie pola i czekanie). Aby zminimalizować ten narzut, P2ER stosuje 2-etapowe podejście:
- Wstrzykiwanie skryptów w tekście: w przypadku ukierunkowanych interakcji, takich jak uwierzytelnianie za pomocą złożonych formularzy React, agenci używają narzędzia
evaluate_script, aby wstrzykiwać czysty JavaScript bezpośrednio do przeglądarki. Omija to wbudowane zastępowanie ustawień i wykonuje wiele działań jednocześnie, co pozwala zaoszczędzić wiele tur rozmowy. - Grupowanie skryptów w interfejsie wiersza poleceń: gdy agenci napotkają „problem” lub bardzo długi, powtarzalny przepływ w przeglądarce, przełączają się na grupowanie w interfejsie wiersza poleceń. Zamiast wydawać tokeny na powtarzające się, pojedyncze narzędzia MCP lub pisać od zera niestandardowe skrypty automatyzacji, P2ER prosi interfejs wiersza poleceń Narzędzi deweloperskich w Chrome o utrwalanie i grupowanie działań w przeglądarce. Umożliwia to agentom programowe wykonywanie całych wieloetapowych przepływów pracy za jednym razem, co znacznie zmniejsza narzut związany z ciągłą komunikacją między modelem a narzędziem.
Automatyzowanie śledzenia skuteczności za pomocą analizy śladów
Zamiast polegać wyłącznie na percepcji człowieka, P2ER stworzyła
review-performance umiejętność, która używa Narzędzi deweloperskich dla agentów do przeprowadzania automatycznych audytów Lighthouse
i śledzenia skuteczności.
Agenci używają narzędzi performance_start_trace i performance_analyze_insight, aby rejestrować i analizować Core Web Vitals (LCP, INP, CLS) oraz identyfikować wąskie gardła w wątku głównym lub przesunięcia układu. Aby uzupełnić strażnika jakości, agenci mogą uruchomić pełny audyt lighthouse_audit, aby chronić się przed regresjami w zakresie dostępności (a11y), SEO i ogólnych sprawdzonych metod internetowych, co zapewnia, że do żądania scalenia przesyłany jest tylko kod wysokiej jakości.
Ulepszanie weryfikacji za pomocą Narzędzi deweloperskich w Chrome dla agentów
Oprócz niestandardowych umiejętności P2ER używa podstawowych funkcji serwera MCP Narzędzi deweloperskich w Chrome dla agentów do przeprowadzania weryfikacji funkcjonalnej. Obejmuje to używanie serwera do emulowania różnych urządzeń i testowania responsywności, aby mieć pewność, że interfejs użytkownika działa na różnych rozmiarach ekranów i urządzeniach.
Dzięki użyciu serwera MCP do poruszania się po aplikacji agenci mogą identyfikować rozbieżności wizualne między układami a rzeczywistą implementacją, wykrywając błędy, które często są pomijane przez testy statyczne.
Zasoby
Aby dokładniej poznać przypadek użycia P2ER, zapoznaj się ze wszystkimi wymienionymi umiejętnościami w ich powiązanym repozytorium GitHub.
Aby zacząć i dowiedzieć się więcej o implementowaniu podobnych przepływów pracy za pomocą Narzędzi deweloperskich dla agentów, zapoznaj się z tymi materiałami: