Narzędzia deweloperskie w Chrome dla agentów to zestaw narzędzi, które udostępniają funkcje narzędzi deweloperskich w Chrome w Twoich procesach kodowania z wykorzystaniem AI. Instalując Narzędzia deweloperskie w Chrome dla agentów, uzyskasz dostęp do:
- Serwer MCP: łączy agenta AI z aktywną instancją przeglądarki za pomocą protokołu Model Context Protocol 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 dostępności 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 identyfikować potencjalne ulepszenia. Oprócz tworzenia stron internetowych Narzędzia deweloperskie dla agentów umożliwiają agentowi przeglądanie aktywnej sieci, a nie tylko pobieranie 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 przeglądarki Chrome na żywo.
Użyj pakietu chrome-devtools-mcp, aby sterować aktywną przeglądarką Chrome i sprawdzać ją z poziomu agenta 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 osobistych, których nie chcesz przekazywać agentom.
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 mają już zintegrowane narzędzia.
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ą podagenta 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 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 eksperta 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 Chrome dla agentów.
Aby dodać Narzędzia deweloperskie w Chrome dla agentów do agenta wiersza 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ę 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
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 w Narzędziach 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 związanych z Narzędziami deweloperskimi 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ć więcej szczegółów:
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.