Narzędzia deweloperskie w Chrome dla agentów to zestaw narzędzi, które udostępniają możliwości Narzędzi deweloperskich w Chrome w Twoich procesach kodowania z wykorzystaniem AI. Instalując Narzędzia deweloperskie w Chrome dla agentów, uzyskujesz dostęp do tych funkcji:
- Serwer MCP: łączy agenta AI z aktywną instancją przeglądarki za pomocą protokołu Model Context o otwartym kodzie źródłowym.
- Interfejs wiersza poleceń Narzędzi deweloperskich w Chrome: interfejs do bezpośredniego korzystania z przeglądarki z poziomu terminala.
- Umiejętności agenta: instrukcje dla ekspertów, które uczą agenta, jak koordynować działanie wielu narzędzi w przypadku złożonych zadań, takich jak debugowanie ułatwień dostępu lub wydajności.
W kontekście tworzenia stron internetowych narzędzia deweloperskie w Chrome dla agentów integrują funkcje debugowania z Twoim agentem AI.
Na przykład agent może używać narzędzi do rejestrowania i oceniania śladów wydajności, aby analizować wydajność witryny i określać potencjalne ulepszenia. Narzędzia deweloperskie dla agentów umożliwiają nie tylko tworzenie stron internetowych, ale też przeglądanie na żywo stron internetowych zamiast pobierania statycznego kodu HTML.
Konfiguracja
Z tego przewodnika dowiesz się, jak skonfigurować Narzędzia deweloperskie w Chrome dla agentów, aby umożliwić agentowi kodującemu kontrolowanie i sprawdzanie aktywnej przeglądarki Chrome.
Użyj pakietu chrome-devtools-mcp, aby sterować aktywną przeglądarką Chrome i sprawdzać ją z poziomu agenta do kodowania (np. Gemini, Claude, Cursor lub Copilot). Pamiętaj, że narzędzia deweloperskie w Chrome dla agentów udostępniają pełny zestaw narzędzi, a interfejs CLI obsługuje tylko ukierunkowany podzbiór narzędzi do automatyzacji opartej na powłoce.
Obsługiwane środowiska IDE i modele
Narzędzia deweloperskie w Chrome dla agentów obsługują każde narzędzie lub IDE, które obsługuje protokół MCP. Obejmuje to m.in. Antigravity, interfejs wiersza poleceń Gemini, Claude Code, Cursor i Copilot.
Bezpieczeństwo
Ponieważ agent będzie mógł wyświetlać strony, do których ma dostęp, i wchodzić z nimi w interakcję, może skutecznie działać w Twoim imieniu, jeśli połączysz go z przeglądarką z aktywną, uwierzytelnioną sesją. Nie udostępniaj informacji poufnych ani danych osobowych, których nie chcesz przekazywać pracownikom obsługi klienta.
Wymagania wstępne
Zanim zainstalujesz Narzędzia deweloperskie w Chrome dla agentów, upewnij się, że Twoje środowisko spełnia te wymagania:
Aby skonfigurować Narzędzia deweloperskie w Chrome dla agentów, wybierz metodę pasującą do preferowanego środowiska kodowania. Niektóre agenty wymagają ręcznej instalacji, a inne są już zintegrowane z narzędziami.
Antigravity
Narzędzia deweloperskie w Chrome dla agentów są wstępnie dołączone do Antigravity 2.0. Możesz zacząć z niej korzystać od razu za pomocą podagenta przeglądarki. Spróbuj użyć polecenia po ukośniku, np.:
/browser Navigate to the Google homepage
Aby uzyskać dostęp do specjalistycznych umiejętności agenta, zalecamy zainstalowanie wtyczki Narzędzia deweloperskie na etapie Tworzenie z Google podczas początkowej konfiguracji lub w ustawieniach aplikacji. Więcej informacji znajdziesz w dokumentacji podrzędnego agenta przeglądarki Antigravity.
Instalowanie za pomocą interfejsu wiersza poleceń
Aby skonfigurować Narzędzia deweloperskie w Chrome dla agentów, możesz użyć pliku konfiguracyjnego JSON lub polecenia interfejsu CLI, aby zainstalować serwer bezpośrednio, jeśli Twój agent to obsługuje. Niektórzy agenci oferują też oficjalne rozszerzenia lub wtyczki, które obejmują umiejętności agenta i instrukcje eksperckie pomagające agentowi korzystać z funkcji Narzędzi deweloperskich.
Jeśli Twojego agenta nie ma na tej liście, informacje o tym, jak go zainstalować, znajdziesz w repozytorium GitHub Narzędzi deweloperskich w Chrome dla agentów.
Aby dodać Narzędzia deweloperskie w Chrome dla agentów do agenta w wierszu poleceń, użyj wbudowanych poleceń interfejsu wiersza poleceń dla konkretnego agenta:
Interfejs wiersza poleceń Gemini
Zainstaluj dodatek do interfejsu wiersza poleceń Gemini, który zawiera pakiet MCP i powiązane z nim umiejętności. Użyj w tym celu tego polecenia:
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Zainstaluj tylko pakiet MCP za pomocą tego polecenia:
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
Aby zainstalować Narzędzia deweloperskie w Chrome dla agentów jako wtyczkę do kodu Claude, użyj tych poleceń w kodzie Claude. Dodaj rejestr platformy handlowej:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Zainstaluj wtyczkę z rejestru Marketplace:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Więcej informacji znajdziesz na oficjalnej stronie wtyczki Claude do Narzędzi deweloperskich w Chrome.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Instalowanie za pomocą konfiguracji JSON
W przypadku innych agentów, którzy obsługują klucz konfiguracji mcpServers, ręcznie dodaj ten wpis i pamiętaj, aby zainstalować Narzędzia deweloperskie dla agentów za pomocą npm i
chrome-devtools-mcp.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Instalowanie w innych agentach
Aby skonfigurować agenta, którego nie ma na liście, zapoznaj się z repozytorium GitHub MCP Narzędzi deweloperskich w Chrome.
Testowanie konfiguracji
Wpisz w agencie ten prompt, aby sprawdzić, czy wszystko działa:
Check the performance of https://developers.chrome.com
Agent powinien otworzyć okno przeglądarki i zarejestrować ślad wydajności.
Rozwiązywanie problemów z konfiguracją
Jeśli agent nie może uruchomić narzędzi, ale ma dostęp do umiejętności Narzędzi deweloperskich w Chrome, może spróbować automatycznie rozwiązać problem. Jeśli tak nie jest, możesz wyraźnie poprosić agenta:
Use the Chrome DevTools troubleshooting skill to fix my setup.
Możesz też podać bardziej szczegółowe informacje:
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
Dalsze kroki
Aby dostosować konfigurację, zapoznaj się z sekcją Konfiguracja.