Co to jest Chrome DevTools MCP?
Chrome DevTools MCP to serwer Model Context Protocol (MCP) od Google, który pozwala agentom AI (np. Claude, Gemini CLI) bezpośrednio łączyć się z aktywną sesją przeglądarki Chrome. Dzięki temu agent może czytać dane z DevTools — elementy DOM, requesty sieciowe, logi konsoli, trace’y wydajności — i debugować problemy bez ręcznego kopiowania informacji.
Dostępne od Chrome M144+.
Jak to działa?
- Włączasz remote debugging w Chrome:
chrome://inspect/#remote-debugging - Konfigurujesz serwer MCP w swoim narzędziu AI (Claude Code, Gemini CLI itp.)
- Agent wysyła zapytania do Chrome przez protokół CDP (Chrome DevTools Protocol)
- Chrome pokazuje użytkownikowi prompt z pytaniem o zgodę + banner “Chrome browser is controlled by automated software”
- Agent ma dostęp do danych z paneli DevTools — Elements, Network, Console, Performance
Use cases
1. Debugowanie z kontekstem sesji
Agent widzi dokładnie to co Ty w przeglądarce — zalogowaną sesję, stan aplikacji, requesty sieciowe. Nie musisz kopiować błędów z konsoli ani opisywać co widzisz na ekranie.
Przykład: “Dlaczego ten formularz nie wysyła danych?” — agent sprawdza elementy DOM, network requests i logi konsoli, żeby znaleźć problem.
2. Analiza requestów sieciowych
Agent może przeglądać requesty z panelu Network — nagłówki, payloady, response body, status code. Przydatne do debugowania API.
Uwaga: Analiza requestów jest bardzo token-intensywna. Przy dużej ilości requestów lepiej filtrować ręcznie.
3. Reverse engineering stron i aplikacji
Agent analizuje strukturę strony, style CSS, JavaScript — przydatne do zrozumienia jak działa zewnętrzna aplikacja lub widget.
4. Automatyzacja przeglądarki
W połączeniu z Playwright lub innymi narzędziami — agent może nawigować po stronie, wypełniać formularze, klikać przyciski.
Konfiguracja
Wymagania
- Chrome M144+ (wersja 144 lub nowsza)
- Narzędzie AI z obsługą MCP (Claude Code, Gemini CLI, VS Code + Copilot)
Krok po kroku
- Otwórz
chrome://inspect/#remote-debuggingi włącz remote debugging - Dodaj konfigurację MCP do swojego narzędzia:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "@anthropic-ai/chrome-devtools-mcp", "--autoConnect"]
}
}
}
- Uruchom agenta — powinien automatycznie połączyć się z Chrome
Ograniczenia i ryzyka
- Duże zużycie tokenów — szczególnie przy analizie network requests. Warto używać tańszych modeli (np. Haiku) do podsumowań stron
- Bezpieczeństwo — agent ma dostęp do sesji przeglądarki, w tym zalogowanych kont. Używaj osobnego profilu Chrome dla agenta
- Prompt injection — złośliwa strona może próbować manipulować agentem przez treść strony. Zachowaj ostrożność
- Ograniczone panele — nie wszystkie panele DevTools są jeszcze dostępne (Google planuje rozszerzać)
Alternatywy
| Narzędzie | Opis | Kiedy użyć |
|---|---|---|
| Playwright MCP | Automatyzacja przeglądarki przez Microsoft Playwright | Gdy potrzebujesz pełnej automatyzacji (klikanie, nawigacja, screenshoty) |
| Playwright CLI | CLI do Playwright bez MCP | Prostsze scenariusze, mniejsze zużycie tokenów |
| agent-browser (Vercel) | Przeglądarka zoptymalizowana dla agentów AI | Lekka alternatywa do prostego scrapingu |
| chrome-cli + remote debug port | Bezpośrednie połączenie z Chrome przez CLI | Gdy nie chcesz MCP, a potrzebujesz tylko CDP |
| Firefox DevTools MCP | Odpowiednik dla Firefoksa | Gdy pracujesz z Firefoksem |
Kiedy używać Chrome DevTools MCP vs Playwright?
- DevTools MCP — gdy debugujesz istniejącą sesję, analizujesz problemy w zalogowanej aplikacji, potrzebujesz danych z DevTools (network, console, performance)
- Playwright — gdy automatyzujesz przepływ użytkownika, robisz testy E2E, potrzebujesz screenshotów i interakcji z DOM