[Intum Dev](https://intum.dev.md) / [Narzędzia AI](https://intum.dev/narzedzia-ai.md)

# [Chrome DevTools MCP — debugowanie przeglądarki przez AI](https://intum.dev/narzedzia-ai/chrome-devtools-mcp-debugowanie-przegladarki-przez-ai.md)

## 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?

1. Włączasz remote debugging w Chrome: `chrome://inspect/#remote-debugging`
2. Konfigurujesz serwer MCP w swoim narzędziu AI (Claude Code, Gemini CLI itp.)
3. Agent wysyła zapytania do Chrome przez protokół CDP (Chrome DevTools Protocol)
4. Chrome pokazuje użytkownikowi prompt z pytaniem o zgodę + banner "Chrome browser is controlled by automated software"
5. 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
1. Otwórz `chrome://inspect/#remote-debugging` i włącz remote debugging
2. Dodaj konfigurację MCP do swojego narzędzia:

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/chrome-devtools-mcp", "--autoConnect"]
    }
  }
}
```

3. 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

## Źródła

- [Chrome DevTools MCP — oficjalny blog Chrome](https://developer.chrome.com/blog/chrome-devtools-mcp-debug-your-browser-session?hl=pl)
- [Dyskusja na Hacker News](https://news.ycombinator.com/item?id=47390817)