Průvodce MCP serverem
Chrome DevTools MCP
Oficiální server od týmu Chrome DevTools, kterým pustíte AI do prohlížeče. Přečte si konzoli, podívá se na síťové požadavky a změří rychlost stránky.
Autor: Jindřich Fáborský · 17 let v marketingu · 2 000+ hodin vibe codingu · 180+ projektů
Chrome DevTools MCP
Ladění a výkon webu
Rychlá odpověď
Co je Chrome DevTools MCP?
Chrome DevTools MCP je MCP server od týmu, který dělá vývojářské nástroje v Chromu. Otevře prohlížeč a pustí do něj AI, takže se na stránku podívá stejně jako vývojář s otevřenou konzolí.
Praktický rozdíl: bez něj agent kód napíše a věří, že funguje. S ním si to ověří a chybu si najde sám. Je zdarma a stačí mít na počítači Chrome.
K čemu ho použijete
Na co se ho reálně zeptáte
Konkrétní dotazy, které místo klikání v rozhraní napíšete rovnou v Claude Code. Server si data sám vytáhne a odpoví.
Proč se mi ta stránka tak dlouho načítá?
Změří skutečné načtení, najde konkrétní úzké hrdlo (třeba skript, který blokuje vykreslení) a umí k tomu přidat i data od reálných návštěvníků.
Sbírají mi Pixel a GTM opravdu ta data, co mají?
Vypíše požadavky, které stránka opravdu odešle, takže ověříte, jestli měřicí kód skutečně vystřelil, bez hrabání v Network panelu.
Nefunguje mi formulář, zjisti proč.
Formulář sám vyplní a odešle, přitom čte konzoli i síťové požadavky, takže najde chybu v JavaScriptu nebo spadlý požadavek.
Projdi objednávku a řekni, jestli celá funguje.
Naklikává se uživatelskou cestou jako tester a k výsledku doloží screenshoty. Hodí se po každé změně na webu.
Jak ta landing page vypadá na pomalém mobilu?
Nasimuluje pomalejší telefon i síť a pošle screenshot, takže nepotřebujete mít po ruce zařízení.
Rozsah nástrojů
Kolik si z něj pustíte do kontextu
Dokumentace vypisuje 52 nástrojů, po připojení jich dostanete 29 a jedním přepínačem můžete mít jen 3. U tohohle serveru je to nejpraktičtější páka, kterou máte. Čísla tokenů níž jsme naměřili sami.
29 nástrojů
~6 100 tokenů
Z běžného okna 200 000 tokenů si vezme přibližně 3 %, a to ještě než cokoli zavoláte.
Co umí: Klikání a vyplňování formulářů, konzole, síťové požadavky, měření výkonu, Lighthouse audit, emulace mobilu a pomalé sítě.
Komu se vyplatí: Tohle dostanete, když server připojíte bez dalšího nastavování. Na běžné ladění a měření webu to pokrývá všechno.
claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latestPočty tokenů jsou naše měření, ne údaj Googlu: spustili jsme server ve verzi 1.6.0, stáhli reálná schémata nástrojů a přepočetli je heuristikou, že token je přibližně čtyři znaky (27. 7. 2026). Dokumentace vypisuje 52 nástrojů, ale část z nich potřebuje novější Chrome a zvláštní přepínače, takže se jich s příkazem výš sejde 44. Přesnou spotřebu si u sebe zobrazíte příkazem /context.
Na běžné ladění a měření webu vám výchozí nastavení stačí. Kromě --slim jdou navíc vypnout jednotlivé skupiny nástrojů, třeba --no-category-emulation, když nepotřebujete simulovat mobil. Vyplatí se to promyslet jednou při připojení a pak na to nemyslet.
Instalace
Jak ho připojit do Claude Code
Stav k červenci 2026. Podmínky a příkazy se u MCP mění po měsících, čerstvý detail je vždy v oficiální dokumentaci.
claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest- 1Potřebujete Node.js v aktuální LTS verzi a nainstalovaný Chrome v aktuální verzi. Žádný API klíč ani registrace, server běží celý u vás na počítači.
- 2Při prvním použití se otevře skutečné okno Chromu, ne prohlížeč na pozadí. Server si k tomu zakládá vlastní profil, takže se nehrabe ve vašem běžném Chromu s přihlášenými účty. To je dobře, viz sekci o rizicích níž.
- 3Nechcete, aby vám ukrojil z kontextu? Přidejte na konec příkazu
--slima dostanete jen tři nástroje místo dvaceti devíti. Kolik co stojí, proklikáte si výš.
Oficiální návod: Chrome DevTools MCP na GitHubu
Claude Code skill
Potřebujete k němu ještě skill?
MCP server dá agentovi ruce (sáhne na data). Skill mu dá návod, jak s nimi zacházet. U některých serverů se to vyplatí, u jiných je to zbytečnost.
Tým Chrome DevTools vydává server i jako plugin do Claude Code, který s sebou přinese i skilly. Přidáte ho přes /plugin marketplace add ChromeDevTools/chrome-devtools-mcp a pak /plugin install chrome-devtools-mcp@chrome-devtools-plugins.
Vyplatí se to, protože samotné popisy nástrojů agentovi neřeknou postup. Rozdíl mezi „udělej screenshot“ a „změř výkon, najdi nejtěžší nález a ověř opravu novým měřením“ je přesně to, co skill dodá.
Nevíte, co je skill? Vysvětlujeme ho v samostatném průvodci →
Buďme féroví
Na co si u tohoto MCP dát pozor
Ať to není jen samá chvála. Kde má server hranice a kdy sáhnout radši po API.
Napojení na váš běžný prohlížeč je riziko
Ve výchozím stavu si server zakládá vlastní profil, takže do vašich přihlášených účtů nevidí. Umí se ale připojit i na Chrome, který vám běží, a pak vidí všechny otevřené panely. Pro běžnou práci nechte výchozí nastavení.
Statistiky odcházejí Googlu, dokud je nevypnete
Posílají se ve výchozím stavu, vypnete je přepínačem --no-usage-statistics. Nástroje na měření výkonu navíc umí poslat adresu měřené stránky do CrUX, veřejné databáze Googlu. Skryté to není, ale je dobré o tom vědět.
Výstupy jsou velké
Snímek stránky, výpis požadavků i celé měření výkonu jsou objemné odpovědi. Projekt s tím počítá a vrací spíš souhrny, ale tokeny to stejně spotřebuje. U screenshotů se vyplatí omezit rozlišení.
Není to debugger a překrývá se s Playwrightem
Breakpointy tady nenajdete, ladí se přes konzoli, požadavky a měření. Playwright MCP od Microsoftu umí i jiné prohlížeče a míří na testovací scénáře. Zjednodušeně: tenhle je silnější v pozorování, Playwright v řízení testů.
Chcete řídit svou práci z jednoho místa?
MCP servery, skilly a celý vibe coding vás v kurzu AI First naučím používat naživo, na reálných projektech.
22 hodin videí, 1 800+ absolventů a roční licence s aktualizacemi zdarma.
FAQ
Časté otázky: Chrome DevTools MCP
Co je Chrome DevTools MCP?+
Oficiální MCP server od týmu Chrome DevTools ve Googlu. Pustí AI do skutečného Chromu, takže si může přečíst konzoli, prohlédnout síťové požadavky, změřit rychlost stránky, klikat a vyplňovat formuláře. Je zdarma pod licencí Apache 2.0 a běží lokálně u vás.
Je Chrome DevTools MCP zdarma?+
Ano, je to open source pod licencí Apache 2.0 a nic nestojí. Nepotřebujete API klíč ani registraci. Jediný nepřímý náklad jsou tokeny, které si nástroje a jejich výstupy vezmou z vašeho předplatného u AI, ne od Googlu.
Vidí Chrome DevTools MCP do mého přihlášeného prohlížeče?+
Ve výchozím nastavení ne. Server si spouští Chrome ve vlastním profilu, oddělený od toho, kde máte přihlášené účty. Umí se ale připojit i na už běžící prohlížeč, a v tom případě vidí obsah všech otevřených panelů. Tuhle volbu zapínejte s rozmyslem.
Kolik nástrojů Chrome DevTools MCP nabízí?+
Dokumentace jich vypisuje 52 v deseti kategoriích, ale po běžném připojení jich agent dostane 29. Zbytek je schovaný za přepínači, protože jde o experimentální nebo hodně specifické věci. S přepínačem --slim si naopak vystačíte jen se třemi.
Umí Chrome DevTools MCP Lighthouse audit?+
Ano, jeden z nástrojů spouští skutečný Lighthouse a vrátí zjištění k přístupnosti, SEO a best practices. Rychlost ale měří zvlášť, přes vlastní nástroje na výkon. Proti komunitnímu Lighthouse MCP je tenhle server oficiální a umí víc věcí, jen nemá audit rozsekaný na tolik jednotlivých metrik.
Je lepší Chrome DevTools MCP, nebo Playwright MCP?+
Na jinou práci. Chrome DevTools MCP je silnější v pozorování a měření: konzole, síť, výkon, připojení na živý prohlížeč. Playwright MCP umí i Firefox a Safari a míří na testovací scénáře, které pak pustíte automaticky. V komunitě se pořád přetahují o to, kdo z nich šetří víc tokenů.