====== 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á desítky 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.

==== Wrapper pro mcpc s čištěním profilu ====

Při praktickém použití přes ''mcpc'' se ukázalo, že samotné spuštění Chromia bez explicitního ''--user-data-dir'' vytváří náhodné profily v ''/tmp/org.chromium.Chromium.scoped_dir.*''. V testu měl aktuální profil zhruba 81 MB a obsahoval mimo jiné ''Cache'', ''Cookies'', ''History'', ''Login Data'', ''Local Storage'' a ''Sessions''. Staré adresáře po předchozích spuštěních zůstávaly v ''/tmp''.

Proto je vhodnější použít wrapper, který:

  * zkontroluje, zda Chromium už běží na CDP portu ''9222'';
  * pokud neběží, spustí ho s fixním profilem ''/tmp/chromium-cdp-profile'';
  * při čerstvém startu smaže uživatelská data z ''Default/'' profilu — cache, cookies, historii, sessions, local storage atd.;
  * uklidí staré orphan adresáře ''/tmp/org.chromium.Chromium.*'';
  * nakonec spustí ''chrome-devtools-mcp'' s ''--browser-url'' na ''http%%://%%127.0.0.1:9222''.

Soubor například ''/home/aiwork/tools/chrome-devtools-wrapper/start-chrome-devtools.sh'':

<code bash>
#!/bin/sh
# Zajistí běžící Chromium s CDP portem 9222 a spustí chrome-devtools-mcp.
# Použije fixní user-data-dir; při každém čerstvém startu smaže uživatelská data
# (Cache, Cookies, History, Sessions atp.) ale zachová component updates.

CDP_PORT=9222
CDP_URL="http://127.0.0.1:${CDP_PORT}"
USER_DATA_DIR="/tmp/chromium-cdp-profile"

# Zkontroluj, zda Chromium na CDP portu již naslouchá
if ! wget -q --spider "${CDP_URL}/json/version" 2>/dev/null; then
    # Čerstvý start — vyčisti user-specific data z profilu Default/,
    # aby se mezi restarty Chromia nehromadily cookies, cache, history atp.
    # Component data (CertificateRevocation, FileTypePolicies…) necháme — šetří bandwidth.
    for subdir in Cache Code\ Cache Cookies Cookies-journal History History-journal \
                  "Login Data" "Login Data-journal" Sessions "Session Storage" \
                  "Local Storage" "Web Data" "Web Data-journal" Favicons "Top Sites" \
                  "Shared Dictionary" SharedStorage DIPS "Network Action Predictor" \
                  BrowsingTopicsSiteData; do
        rm -rf "${USER_DATA_DIR}/Default/${subdir}" 2>/dev/null
    done

    # Ukliď staré orphan scoped_dir adresáře z předchozích spuštění
    find /tmp -maxdepth 1 -name 'org.chromium.Chromium.*' -type d \
        -not -name 'chromium-cdp-profile' 2>/dev/null | xargs rm -rf 2>/dev/null

    mkdir -p "${USER_DATA_DIR}"

    chromium \
        --headless \
        --no-sandbox \
        --disable-setuid-sandbox \
        --disable-dev-shm-usage \
        --remote-debugging-port=${CDP_PORT} \
        --remote-debugging-address=127.0.0.1 \
        --user-data-dir="${USER_DATA_DIR}" \
        --disable-extensions \
        --no-first-run \
        --no-default-browser-check \
        >/tmp/chromium-cdp.log 2>&1 &

    # Čekej max 15 s na start
    i=0
    while [ $i -lt 30 ]; do
        if wget -q --spider "${CDP_URL}/json/version" 2>/dev/null; then
            break
        fi
        sleep 0.5
        i=$((i + 1))
    done

    if ! wget -q --spider "${CDP_URL}/json/version" 2>/dev/null; then
        echo "ERROR: Chromium se nepodařilo spustit na portu ${CDP_PORT}" >&2
        exit 1
    fi
fi

exec npx -y chrome-devtools-mcp@latest --browser-url "${CDP_URL}"
</code>

Nastavení spustitelnosti:

<code bash>
chmod +x /home/aiwork/tools/chrome-devtools-wrapper/start-chrome-devtools.sh
</code>

Příklad entry v ''mcpc'' hub configu:

<code json>
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "/home/aiwork/tools/chrome-devtools-wrapper/start-chrome-devtools.sh"
    }
  }
}
</code>

Použití přes ''mcpc'':

<code bash>
HUB=/home/aiwork/.config/mcpc/mcp.json
mcpc connect $HUB:chrome-devtools @cdp
mcpc @cdp tools-list
</code>

==== Ověření funkčnosti a profilu ====

V testovaném prostředí server přes ''mcpc'' naběhl jako ''chrome_devtools'' v0.25.0 a nabídl 29 nástrojů včetně ''lighthouse_audit'', ''performance_start_trace'', ''performance_stop_trace'', ''take_memory_snapshot'', ''take_screenshot'' a ''take_snapshot''.

Základní test načtení stránky a DOM snapshotu:

<code bash>
mcpc @cdp tools-call new_page url:="https://example.com"
mcpc @cdp tools-call take_snapshot
</code>

Ověření, že Chromium běží s fixním profilem:

<code bash>
ps aux | grep chromium | grep "user-data-dir" | grep -v grep | grep -o "user-data-dir=[^ ]*"
</code>

Očekávaný výsledek:

<code>
user-data-dir=/tmp/chromium-cdp-profile
</code>

Po opravě wrapperem se stránky načítaly správně, screenshot a DOM snapshot fungovaly. Profil byl fixní v ''/tmp/chromium-cdp-profile'' a měl po startu přibližně 4,4 MB. Adresář typu ''/tmp/org.chromium.Chromium.*'' může vzniknout i potom, ale jde jen o lock adresář aktuálně běžící instance se soubory ''SingletonCookie'' a ''SingletonSocket''. Wrapper ho při příštím startu uklidí.

===== 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]]). Při použití ''--isolated'' vytváří izolovaný browser context, takže cookies, local storage a cache se po zavření session zahodí.
  * **Chrome DevTools MCP** → debugging výkonu, Lighthouse audity, analýza paměti a sítě, source-mapped chyby. Na Alpine/ARM64 je praktické spouštět ho přes wrapper s externím Chromiem a ''--browser-url''.

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]]