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 użyciem AI. Po zainstalowaniu Narzędzi deweloperskich w Chrome dla agentów uzyskasz dostęp do tych funkcji:
- 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 interakcji z przeglądarką bezpośrednio z 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ą możliwości debugowania z agentem AI.
Agent może na przykład używać tych narzędzi do rejestrowania i oceniania śladów wydajności w celu analizowania wydajności witryny i identyfikowania potencjalnych ulepszeń. Oprócz tworzenia stron internetowych Narzędzia deweloperskie dla agentów umożliwiają też agentowi przeglądanie aktywnej sieci zamiast tylko pobierania statycznego kodu HTML.
Konfiguracja
Z tego przewodnika dowiesz się, jak skonfigurować Narzędzia deweloperskie w Chrome dla agentów, aby pomóc agentowi kodowania kontrolować i sprawdzać aktywną przeglądarkę Chrome.
Użyj pakietu chrome-devtools-mcp, aby kontrolować i sprawdzać aktywną przeglądarkę Chrome za pomocą agenta kodowania (np. Gemini, Claude, Cursor lub Copilot). Pamiętaj, że Narzędzia deweloperskie w Chrome dla agentów udostępniają pełny pakiet narzędzi, ale interfejs wiersza poleceń obsługuje tylko wybrany podzbiór 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 środowisko 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 interakcje, 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 udostępniać 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ę, która pasuje do Twojego 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 nich korzystać za pomocą sub-agenta 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ędzi deweloperskich podczas kroku Tworzenie z Google w ramach konfiguracji początkowej lub w ustawieniach aplikacji. Więcej informacji znajdziesz w dokumentacji podagenta przeglądarki Antigravity Browser Subagent.
Instalacja 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 wiersza poleceń, 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, czyli instrukcje dla ekspertów, które pomagają agentowi korzystać z funkcji Narzędzi deweloperskich.
Jeśli Twojego agenta nie ma na tej liście, informacje o jego instalacji znajdziesz w repozytorium GitHub Narzędzi deweloperskich w 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 umiejętności, za pomocą 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 tych poleceń z ukośnikiem w Claude Code. Dodaj rejestr Marketplace:
/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 Narzędzi deweloperskich w Chrome dla Claude.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Instalacja za pomocą konfiguracji JSON
W przypadku innych agentów, którzy obsługują klucz konfiguracji mcpServers, ręcznie dodaj
ten wpis i zainstaluj Narzędzia deweloperskie dla agentów za pomocą polecenia npm i
chrome-devtools-mcp.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Instalacja w innych agentach
Aby skonfigurować agenta, którego nie ma na liście, zapoznaj się z repozytorium GitHub Narzędzi deweloperskich w Chrome MCP.
Testowanie konfiguracji
Aby sprawdzić, czy wszystko działa, wpisz w agencie ten prompt:
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 i ma dostęp do umiejętności Narzędzi deweloperskich w Chrome, może spróbować automatycznie rozwiązać problem. Jeśli tak się nie stanie, możesz wyraźnie poprosić agenta:
Use the Chrome DevTools troubleshooting skill to fix my setup.
Możesz też być bardziej konkretny:
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.
Konfiguracja zaawansowana
Oto inne sposoby, w jakie agent może uzyskać dostęp do przeglądarki.
Konfigurowanie trybu bez interfejsu graficznego
Jeśli chcesz wykonywać zadania w tle bez widocznego okna przeglądarki, możesz uruchomić Chrome w trybie bez interfejsu graficznego. Dodaj do argumentów serwera flagę --headless:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
Łączenie z istniejącą sesją przeglądarki
Domyślnie Narzędzia deweloperskie dla agentów uruchamiają nową instancję Chrome. Możesz jednak połączyć agenta z istniejącą sesją przeglądarki za pomocą flagi --autoConnect. Jest to szczególnie przydatne, jeśli agent musi zbadać problem, który jest ograniczony przez logowanie lub sesję, którą już rozpoczęto.
Istnieją 2 sposoby łączenia się z istniejącą sesją:
Używanie automatycznego połączenia (Chrome 144+)
Gdy serwer MCP Narzędzi deweloperskich w Chrome jest skonfigurowany z opcją --autoConnect, serwer MCP połączy się z aktywną instancją Chrome i poprosi o sesję debugowania zdalnego.
- W uruchomionej przeglądarce Chrome otwórz
chrome://inspect/#remote-debugging, aby włączyć debugowanie zdalne. Zaktualizuj konfigurację MCP, aby uwzględnić flagę
--autoConnect:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }Wyślij prompta do agenta. Chrome wyświetli okno z prośbą o zgodę użytkownika na sesję debugowania zdalnego. Kliknij Zezwól.
Ręczne łączenie za pomocą portu debugowania zdalnego
Jeśli nie możesz użyć --autoConnect (np. jeśli agent działa w środowisku piaskownicy), możesz ręcznie uruchomić Chrome z portem debugowania.
Oto przykład (w macOS):
Uruchom przeglądarkę Chrome z włączonym portem debugowania zdalnego. Ze względów bezpieczeństwa musisz też określić niestandardowy katalog danych użytkownika.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableSkonfiguruj agenta, aby łączył się za pomocą parametru
--browser-url:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }