Usprawnianie przepływu pracy związanego z kodowaniem AI za pomocą Narzędzi deweloperskich w Chrome dla agentów 1.0

Opublikowano: 19 maja 2026 r.

Narzędzia AI do kodowania są niezwykle skuteczne w pisaniu kodu, ale często nie są połączone z jego wykonywaniem. Może wygenerować złożoną aplikację internetową, ale nie może obserwować jej działania ani sprawdzać jej wyników w przeglądarce na żywo.

Narzędzia deweloperskie w Chrome dla agentów zapewniają agentowi kodującemu widoczność potrzebną do weryfikowania, debugowania i optymalizowania kodu w czasie rzeczywistym. Kilka miesięcy temu pokazaliśmy je po raz pierwszy, a teraz z przyjemnością ogłaszamy, że Narzędzia deweloperskie w Chrome dla agentów są już dostępne w stabilnej wersji 1.0.

Łączenie agenta z przeglądarką

Narzędzia deweloperskie w Chrome dla agentów umożliwiają agentowi korzystanie z Twojej witryny tak jak prawdziwy użytkownik. Ta stabilna wersja zawiera kilka sposobów interakcji z Chrome dla Ciebie i Twojego agenta:

  • Serwer protokołu kontekstu modelu (MCP): serwer, który łączy duże modele językowe (LLM) z funkcjami debugowania w Narzędziach deweloperskich.
  • Interfejs wiersza poleceń (CLI): alternatywa oszczędzająca tokeny, która umożliwia agentom grupowanie działań w skryptach.
  • Umiejętności agenta: instrukcje dla ekspertów, które uczą agenta, jak i kiedy używać konkretnych narzędzi do zadań takich jak debugowanie ułatwień dostępu lub wydajności.

Automatyczne debugowanie, emulowanie i sprawdzanie

W wersji 1.0 agent kodowania może teraz wykonywać zaawansowane zadania debugowania, które wcześniej były wykonywane ręcznie.

Automatyzacja audytów jakości

Twój agent może teraz przeprowadzać audyty Lighthouse, aby ocenić jakość witryny. Może wykrywać problemy z dostępnością, SEO, sprawdzonymi metodami i przeglądaniem autonomicznym. To jak posiadanie narzędzia do sprawdzania kodu, które rozumie środowisko wykonawcze. Używany jako kontrola jakości, zamienia agenta kodującego w eksperta, który wychwytuje krytyczne blokery, zanim trafią one do wersji produkcyjnej.

Emulowanie wrażeń użytkowników w rzeczywistym świecie

Twój agent może używać Narzędzi deweloperskich dla agentów, aby sprawdzać, jak witryna wygląda i działa na różnych urządzeniach lub w różnych lokalizacjach za pomocą narzędzi do emulacji. Może zmieniać rozmiar okien, symulować geolokalizację oraz ograniczać szybkość sieci i procesora, aby odzwierciedlać rzeczywiste warunki. Dzięki temu agent może testować zachowania specyficzne dla urządzeń mobilnych, takie jak menu typu hamburger, bez konieczności ręcznej zmiany rozmiaru przeglądarki.

Tworzenie i debugowanie rozszerzeń do Chrome

Możesz też pozwolić agentowi nie tylko pomagać w tworzeniu rozszerzeń do Chrome, ale też je debugować. Agent może bezpośrednio instalować, ponownie wczytywać i wywoływać działania rozszerzeń. Pomaga to zautomatyzować częsty cykl „zapisz i odśwież” podczas programowania. Może też analizować skrypty działające w tle i strony rozszerzeń, aby pomóc Ci w naprawianiu błędów w bardziej złożonych konfiguracjach przeglądarki.

Debugowanie i testowanie narzędzi WebMCP

Wprowadzamy też szczegółową widoczność w WebMCP (Web Model Context Protocol) w ramach testów origin trial, aby pomóc Ci we wdrożeniu tego nowego interfejsu API.

Zamiast polegać na sygnałach, aby wywnioskować plan poruszania się po DOM, agent może bezpośrednio wchodzić w interakcje ze strukturalnymi narzędziami, które udostępniasz za pomocą WebMCP. Ułatwia to tworzenie, testowanie i debugowanie tych narzędzi: Twój agent może wyświetlać, wywoływać programowo i sprawdzać ich poprawność w czasie rzeczywistym. Ułatwia to dodawanie obsługi WebMCP do witryny i jej testowanie.

Wykrywanie i debugowanie wycieków pamięci

Dodaliśmy też specjalne narzędzia do analizy pamięci. Agent może teraz robić zrzuty sterty, aby wykrywać wycieki pamięci, np. odłączone węzły DOM. Dzięki specjalistycznym umiejętnościom debugowania wycieków pamięci agent pełni rolę eksperta ds. wydajności, który pomaga utrzymać aplikację w dobrej kondycji i zapewnić jej szybkie działanie.

Przekazywanie sesji za pomocą łączenia automatycznego

Możesz udostępnić agentowi bieżący kontekst przeglądarki zamiast otwierać własną instancję przeglądarki w piaskownicy (w ten sposób narzędzia deweloperskie dla agentów zwykle zapewniają agentom dostęp do przeglądarki). Jest to idealne rozwiązanie do debugowania elementów, które wymagają logowania, np. uwierzytelnionego panelu, w którym chcesz, aby agent AI przejął techniczną analizę bez konieczności ponownego uwierzytelniania wszystkiego.

Udostępnianie stanu wewnętrznego za pomocą narzędzi deweloperskich innych firm

Narzędzia deweloperskie innych firm umożliwiają aplikacji internetowej udostępnianie stanu wewnętrznego i szczegółów komponentów bezpośrednio agentom AI. Udostępniając dostęp do danych, które są zwykle ukryte przed standardową analizą, narzędzia te zapewniają agentom kontekst potrzebny do zrozumienia złożonej logiki. Dzięki temu sugestie dotyczące debugowania będą dokładniejsze, ponieważ będą oparte na tym, jak aplikacja faktycznie działa w przeglądarce.

Rozpocznij

Stabilną wersję możesz zainstalować za pomocą npm lub skonfigurować ją bezpośrednio w wybranym przez siebie agencie:

Antigravity

Narzędzia deweloperskie w Chrome dla agentów są wstępnie dołączone do Antigravity 2.0. Możesz od razu zacząć z niej korzystać za pomocą subagenta przeglądarki. Spróbuj użyć polecenia po ukośniku, na przykład:

/browser Navigate to the Google homepage

Aby uzyskać dostęp do specjalistycznych umiejętności agenta, zalecamy zainstalowanie wtyczki DevTools podczas kroku Tworzenie z Google w procesie konfiguracji początkowej lub w ustawieniach aplikacji. Więcej informacji znajdziesz w dokumentacji podrzędnego agenta przeglądarki Antigravity.

Interfejs wiersza poleceń Gemini

Aby zainstalować pakiet MCP i umiejętności jako rozszerzenie, użyj tego polecenia:

$ gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

Claude Code

Aby zainstalować Narzędzia deweloperskie w Chrome dla agentów jako wtyczkę Claude Code, użyj w Claude Code tych poleceń z ukośnikiem. Dodaj rejestr platformy handlowej:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

Zainstaluj wtyczkę z rejestru Marketplace:

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Bardziej szczegółowe przewodniki i przykładowe prompty znajdziesz w naszej dokumentacji Narzędzi deweloperskich w Chrome dla agentów. Możesz też zapoznać się z kodem źródłowym na GitHubie.