Chrome DevTools MCP [Wiki]

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
====== Chrome DevTools MCP ======

//Vytvořeno: **5.5.2026** | Aktualizováno: **~~LASTMOD~~**//

[[https://github.com/ChromeDevTools/chrome-devtools-mcp|Chrome DevTools MCP]] (''chrome-devtools-mcp'') je MCP server vyvíjený přímo týmem Chrome DevTools v Googlu. Umožňuje AI agentům ovládat Chrome prohlížeč a přistupovat k nástrojům vývojářské konzole — výkonnostní analýza, ladění paměti, Lighthouse audity nebo inspekce síťových požadavků.

Ve srovnání s [[ai:mcp:servery:playwright-mcp-alpine-arm64|Playwright MCP]] jde o komplementární nástroj zaměřený na **debugging a DevTools**, ne na web automation a testování.

===== Vztah k Playwright MCP =====

Oba nástroje ovládají Chrome prohlížeč přes CDP (Chrome DevTools Protocol), ale na jiných vrstvách a s jiným zaměřením:

^ ^ Playwright MCP ^ Chrome DevTools MCP ^
| **Automation layer** | Playwright | Puppeteer |
| **Prohlížeče** | Chromium, Firefox, WebKit | Chrome only |
| **Zaměření** | Web automation, testování | Developer tooling, debugging |
| **Vyvíjí** | Microsoft | Google (Chrome DevTools tým) |

Playwright MCP je vhodný pro navigaci, vyplňování formulářů, scraping a screenshoty. Chrome DevTools MCP to vše také umí, ale hlavní přínos je jinde — v nástrojích, které Playwright přímo neposkytuje.

===== Co Chrome DevTools MCP přidává =====

Chrome DevTools MCP má přes 40 nástrojů rozdělených do kategorií.

==== Performance tracing ====

Nahraje DevTools performance trace a vrátí konkrétní actionable insights — ekvivalent záložky **Performance** v DevTools. Playwright toto neumí.

  * ''performance_start_trace'' — spustí nahrávání
  * ''performance_stop_trace'' — zastaví a vrátí analýzu

==== Lighthouse audity ====

Spustí Lighthouse audit přímo z MCP bez potřeby CLI nebo pluginu. Výsledek obsahuje skóre výkonu, přístupnosti, SEO a best practices.

==== Memory analýza ====

Heap snapshot a analýza memory leaks — odpovídá záložce **Memory** v DevTools.

==== Source-mapped stack traces ====

Konzolové chyby vrátí s původními soubory a řádky, ne bundlovaným ''dist/''. Klíčový rozdíl pro debugging produkčního kódu — Playwright konzolové chyby vrátí bez tohoto kontextu.

==== Network inspection ====

Detailní přehled síťových požadavků včetně hlaviček, těla a timingů.

==== Extensions management ====

Instalace a odinstalace Chrome extensions za běhu — pro testování extension nebo specifických prostředí.

==== Základní automation ====

Standardní automation nástroje (klikání, vyplňování, navigace, screenshoty) jsou k dispozici stejně jako u Playwright MCP.

===== Instalace =====

Vyžaduje Node.js v20.19+ a Chrome stable nebo novější.

Základní konfigurace pro Claude Code (''~/.claude.json''):

<code json>
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}
</code>

Slim mode — jen 3 základní nástroje, vhodné pro jednoduché úkoly:

<code json>
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}
</code>

===== Alpine Linux / ARM64 =====

Chrome DevTools MCP interně používá Puppeteer, který si stejně jako Playwright stáhne bundlovaný Chrome kompilovaný pro glibc. Na Alpine Linux (musl libc) a ARM64 to selže ze stejného důvodu jako u Playwright.

==== Řešení přes --browser-url ====

Chrome DevTools MCP podporuje připojení k externě spuštěnému Chromiu přes CDP port. „Externě" neznamená jiný stroj — oba procesy běží na stejném ARM64 stroji, Chromium jen poběží jako samostatný proces a chrome-devtools-mcp se k němu připojí přes ''localhost''.

**Krok 1:** Spusť systémový Chromium z apk s CDP portem:

<code bash>
chromium --headless --no-sandbox --disable-setuid-sandbox \
         --disable-dev-shm-usage \
         --remote-debugging-port=9222
</code>

**Krok 2:** Nakonfiguruj chrome-devtools-mcp s ''--browser-url'':

<code json>
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--browser-url", "http://127.0.0.1:9222"]
    }
  }
}
</code>

V tomto módu se Puppeteer nepokusí spustit vlastní browser — jen se připojí přes CDP na port, kde Chromium už běží. Systémový Chromium z Alpine apk je kompilovaný pro musl a ARM64, takže žádné glibc problémy.

Oproti Playwright wrapperu (který používá ''--executable-path'' a wrapper skript) je přístup přes ''--browser-url'' čistší — chrome-devtools-mcp nezasahuje do spouštění Chromia vůbec.

> **Poznámka:** Jestli ''--browser-url'' mód plně podporuje všechny nástroje (zejména performance tracing a memory snapshots), nebylo zatím ověřeno v praxi na Alpine/ARM64. Základní automation a debugging by fungovat měly.

===== Kdy použít co =====

  * **Playwright MCP** → navigace, klikání, vyplňování formulářů, screenshoty, scraping. Funkční na Alpine/ARM64 (viz [[ai:mcp:servery:playwright-mcp-alpine-arm64|postup pro Alpine/ARM64]]).
  * **Chrome DevTools MCP** → debugging výkonu, Lighthouse audity, analýza paměti a sítě, source-mapped chyby. Zajímavé pro vývoj frontendu nebo debug produkčního kódu.

Nástroje se překrývají jen v základní automatizaci. Ve zbytku jsou komplementární — dává smysl mít oba nastavené současně.

===== Zdroje =====

  * [[https://github.com/ChromeDevTools/chrome-devtools-mcp|chrome-devtools-mcp – GitHub]]
  * [[ai:mcp:servery:playwright-mcp-alpine-arm64|Playwright MCP v Dockeru na Alpine Linux / ARM64]]