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

Τι κάνει

Δίνει στον coding agent έναν ζωντανό Chrome. Ο agent ανοίγει σελίδες, γεμίζει φόρμες, κάνει κλικ, πληκτρολογεί.

Και το πιο χρήσιμο: βλέπει ό,τι βλέπει ένας άνθρωπος στο DevTools.

Δηλαδή performance trace με Core Web Vitals. Network requests. Console μηνύματα με stack traces. Screenshots. Heap snapshots. Lighthouse audit.

Το tool reference μετρά 59 εργαλεία σε 11 κατηγορίες. Υπάρχει και CLI, αν θέλεις να το τρέξεις χωρίς MCP.

Για ποιον είναι

Για τη στιγμή που το «δούλεψε στο τερματικό» δεν φτάνει. Όταν το θέμα είναι rendering, δίκτυο ή ταχύτητα.

Γιατί αξίζει

Πρώτο: είναι επίσημο. Το έβγαλε η ομάδα του Chrome DevTools. Το ανακοίνωσε στο blog της στις 23 Σεπτεμβρίου 2025. Δεν περιμένεις τρίτον να ενημερώσει το εργαλείο.

Δεύτερο: ο τρόπος που βλέπει τη σελίδα. Δεν στέλνει screenshots στο μοντέλο για να μαντέψει. Στέλνει δομημένα δεδομένα από το πρωτόκολλο του DevTools. Metrics, όχι pixels.

Τρίτο: σου λέει το κόστος. Το default surface βαραίνει τα tokens. Γι’ αυτό υπάρχει το –slim, που αφήνει μόνο 3 εργαλεία. Και στέλνει telemetry στη Google, με δύο ξεχωριστά opt-out.

Εγκατάσταση

Βάλε αυτό στο config του client:

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

Το @latest σε κρατά στην τελευταία έκδοση.

Αν θέλεις ελαφριά sessions:

"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]

Μόνο 3 εργαλεία, χωρίς παράθυρο.

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

Claude Code

Από το terminal:

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

Προσθέτει τον server για όλα σου τα projects.

Ή ως plugin, που κουβαλά μαζί MCP και skills:

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

Μετά κάνε restart το Claude Code. Τσέκαρε με /skills.

Codex CLI

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

Προσθέτει τον server στο Codex.

Σε Windows 11 θέλει διαφορετικό στήσιμο. Το npx δεν βρίσκει σωστά το Chrome. Βάλε command = “cmd” και ανέβασε το startup_timeout_ms στις 20.000.

Cursor

Settings → MCP → New MCP Server. Εκεί βάζεις το JSON config από πάνω. Υπάρχει και κουμπί εγκατάστασης στο repo.

Πού κερδίζει, πού χάνει

Κερδίζει στην επαλήθευση. Ο agent βλέπει τη σελίδα με τα μάτια του, δεν τη φαντάζεται.

Χάνει στο βάρος. Θέλει Chrome. Το default surface τρώει context. Τα flags μεγέθους δεν είναι πολυτέλεια, είναι ανάγκη. Και το telemetry θέλει προσοχή: δύο opt-out, όχι ένα.

Δοκιμή

Έτρεξα:

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

Γύρισε 1.10.1, exit code 0, σε Node 26.

npx -y chrome-devtools-mcp@latest --help

Έβγαλε όλες τις παραμέτρους. Εκεί είδα τα defaults: usageStatistics true, performanceCrux true, το –slim και το –headless διαθέσιμα.

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

Ετυμηγορία

Αξίζει, αν το βάλεις στη σωστή θέση. Είναι ο καθαρός τρόπος να δει και να τσεκάρει ο agent μια σελίδα. Δεν είναι για κάθε edit. Άνοιξέ το στενά: slim mode και τα σωστά flags.

Βαθμολογία: 8/10.

Πηγές: https://github.com/ChromeDevTools/chrome-devtools-mcp · https://developer.chrome.com/blog/chrome-devtools-mcp · https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md · https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/client-configurations.md · https://www.npmjs.com/package/chrome-devtools-mcp · https://api.github.com/repos/ChromeDevTools/chrome-devtools-mcp