chrome-devtools-mcp — τα Chrome DevTools στα χέρια του coding agent

Ρεπο: github.com/ChromeDevTools/chrome-devtools-mcp · Άδεια: Apache-2.0 · Τελευταίο npm release: v1.10.1 Συντηρείται από την ομάδα Chrome DevTools (Google) — επίσημο εργαλείο, όχι community wrapper.

Τι κάνει

Είναι MCP server που δίνει στον coding agent τον έλεγχο ζωντανού Chrome: ανοίγει και περιηγείται σελίδες, γεμίζει φόρμες, κάνει κλικ και πληκτρολόγηση, και — το σημαντικό — τραβάει τα δεδομένα που βλέπει ένας άνθρωπος στο DevTools. Καταγραφή performance trace με insights για Core Web Vitals, ανάλυση network requests, console μηνύματα με source-mapped stack traces, screenshots, heap snapshots, Lighthouse audit. Η αυτοματοποίηση στηρίζεται στο puppeteer (README).

Το tool reference απαριθμεί 59 εργαλεία σε 11 κατηγορίες — input, navigation, emulation, performance, network, debugging, memory, extensions, και μερικές πίσω από flags (WebMCP, PWA, third-party). Δίπλα στον MCP server υπάρχει και CLI για χρήση χωρίς MCP.

Γιατί αξίζει

Πρώτον, είναι επίσημο. Το ανέβασε η ίδια η ομάδα του DevTools — το λανσάρισμα το ανακοίνωσε το Chrome for Developers blog στις 23 Σεπτεμβρίου 2025 — οπότε δεν κυνηγάς κάθε αλλαγή του Chrome μέσω ενός τρίτου που μπορεί να τα παρατήσει.

Δεύτερον, το μοντέλο πρόσβασης. Δεν δίνει screenshots για να «κουτσοδεί» το μοντέλο· δίνει δομημένα δεδομένα μέσα από το πρωτόκολλο του DevTools. Ο agent διαβάζει metrics και insights, όχι pixels.

Τρίτον — και αυτό είναι η είδηση — το εργαλείο λέει πόσο κοστίζει. Το default surface είναι βαρύ σε tokens, οπότε υπάρχει --slim mode που εκθέτει μόνο 3 εργαλεία (navigation, εκτέλεση script, screenshots). Κατά προεπιλογή στέλνει usage statistics στη Google (opt-out με --no-usage-statistics) και trace URLs στο CrUX API (opt-out με --no-performance-crux) — το επιβεβαίωσα και στα δύο flags τρέχοντας --help (δείτε παρακάτω). Επίσημα υποστηρίζει μόνο Chrome και Chrome for Testing.

Εγκατάσταση

MCP, στο config του client:

{ “mcpServers”: { “chrome-devtools”: { “command”: “npx”, “args”: [“-y”, “chrome-devtools-mcp@latest”] } } }

Για ελαφριές sessions, slim mode:

“args”: [“-y”, “chrome-devtools-mcp@latest”, “–slim”, “–headless”]

Το @latest κρατά τον client στην τελευταία έκδοση. Πλήρης κατάλογος παραμέτρων στο docs/configuration.md.

Χρήση σε κάθε LLM

Claude Code

CLI, μόνο MCP:

claude mcp add chrome-devtools –scope user npx chrome-devtools-mcp@latest

Ή ως plugin, που φέρνει μαζί MCP και skills:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp /plugin install chrome-devtools-mcp@chrome-devtools-plugins

Μετά κάνε restart το Claude Code και τσέκαρε με /skills. Αν το είχες στήσει παλιότερα, βγάλε πρώτα την παλιά εγγραφή για να μη διπλώσει. (client configurations)

Codex CLI

codex mcp add chrome-devtools — npx chrome-devtools-mcp@latest

Σε Windows 11 η τεκμηρίωση ζητά διαφορετικό στήσιμο, γιατί το npx δεν βρίσκει σωστά το Chrome: πέρασε command = "cmd", args = ["/c","npx","-y","chrome-devtools-mcp@latest"], όρισε env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" } και ανέβασε το startup_timeout_ms στα 20.000. Λεπτομέρειες στο ίδιο client-configurations αρχείο.

Cursor

Settings → MCP → New MCP Server, με το JSON config παραπάνω. Υπάρχει και κουμπί εγκατάστασης (deeplink) στο repo.

Windsurf

Υποστηρίζεται και είναι τεκμηριωμένο, σε αντίθεση με αρκετά εργαλεία της κατηγορίας: το client-configurations αρχείο παραπέμπει στον οδηγό MCP του Cascade (docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json) με το ίδιο standard JSON. Δεν το έτρεξα σε Windsurf — η διαδρομή είναι από την τεκμηρίωση.

Δοκιμή και ετυμηγορία

Το έτρεξα. Σε Node v26.7.0 και npm 11.19.0:

npx -y chrome-devtools-mcp@latest –version

Επέστρεψε 1.10.1, exit code 0. Το --help τύπωσε ολόκληρη τη λίστα παραμέτρων, και εκεί επιβεβαίωσα τα defaults: usageStatistics true, performanceCrux true, οι κατηγορίες input/navigation/performance/network/debugging/memory ενεργές, το --slim και το --headless διαθέσιμα, το --experimentalVision (coordinate clicks) κλειστό. Είδα και ένα αθώο warning του Node (“localStorage is not available because –localstorage-file was not provided”) — δεν εμποδίζει τίποτα, αλλά υπάρχει.

Τι δεν δοκίμασα: δεν σύνδεσα τον server σε πραγματικό client, δεν άνοιξα σελίδα, δεν τράβηξα trace ή screenshot. Ό,τι γράφω για τη ροή μέσα στον client είναι από την τεκμηρίωση.

Πού σπάει ή λείπει: θέλει Chrome (ή Chrome for Testing) — άλλοι Chromium-based browsers μπορεί να δουλέψουν, χωρίς εγγύηση. Το default surface είναι ακριβό σε context· το --slim και τα flags περιορισμού μεγέθους screenshots (--screenshotMaxWidth/Height) δεν είναι προαιρετικά λουξ, είναι ο τρόπος να μη σου φάει το παράθυρο. Και θέλει συνείδηση του telemetry: δύο ξεχωριστά opt-out, όχι ένα.

Ετυμηγορία: αξίζει, με τη σωστή τοποθέτηση. Είναι ο καθαρός τρόπος να δει και να επαληθεύσει ο agent μια σελίδα, όταν η εργασία αφορά rendering, δίκτυο ή απόδοση. Δεν είναι για κάθε edit — είναι για τη στιγμή που το «δούλεψε στο τερματικό» δεν αρκεί και θέλεις να το δεις να τρέχει. Άνοιξέ το στενά: slim mode, τα σωστά flags, και τελείωσες.

Στοιχεία / Facts

Source: https://github.com/ChromeDevTools/chrome-devtools-mcp License: Apache-2.0 (GitHub API, https://api.github.com/repos/ChromeDevTools/chrome-devtools-mcp) Stars/forks: 53.075 / 5.771, τελευταίο push 2026-10-07 (GitHub API, ίδια κλήση) Δημιουργήθηκε: 2025-09-11 · Ανοιχτά issues: 205 · Γλώσσα: TypeScript npm version που δοκιμάστηκε: 1.10.1

Score: 8/10

Δοκιμασμένα βήματα / Tested steps: 1. npx -y chrome-devtools-mcp@latest –version (TESTED — 1.10.1, exit 0, Node 26.7.0) 2. npx -y chrome-devtools-mcp@latest –help (TESTED — πλήρης λίστα παραμέτρων) 3. Σύνδεση σε client / πραγματικό Chrome trace (NOT tested — από την τεκμηρίωση)

Supported clients (από client-configurations.md): Antigravity, Amp, Bob, Claude Code, Cline, Codex, Command Code, Copilot CLI, Copilot/VS Code, Cursor, Devin CLI, Factory, FLUJO, Gemini CLI, Gemini Code Assist, Grok Build, JetBrains (AI Assistant/Junie), Kiro, Katalon, Mistral Vibe, OpenCode, Qoder, Visual Studio, Warp, Windsurf.

Πηγές

1. https://github.com/ChromeDevTools/chrome-devtools-mcp 2. https://developer.chrome.com/blog/chrome-devtools-mcp 3. https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md 4. https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/client-configurations.md 5. https://www.npmjs.com/package/chrome-devtools-mcp 6. https://api.github.com/repos/ChromeDevTools/chrome-devtools-mcp

—