Chrome DevTools MCP: i DevTools di Chrome nelle mani degli agenti AI

Cos'è Chrome DevTools MCP

chrome-devtools-mcp è il server MCP (Model Context Protocol) ufficiale sviluppato dal team di Chrome DevTools di Google. Il suo scopo è semplice da spiegare ma potente nelle conseguenze: dare a un assistente di coding basato su AI — Claude Code, Cursor, Copilot, Gemini CLI, Codex e decine di altri client MCP — l'accesso diretto a un'istanza reale del browser Chrome, con tutta la potenza diagnostica dei Chrome DevTools.

In pratica, invece di limitarsi a leggere e scrivere codice "alla cieca", l'agente può aprire una pagina web, cliccare, compilare form, leggere gli errori della console JavaScript, ispezionare le richieste di rete, registrare tracce di performance e scattare screenshot. Il browser smette di essere una scatola nera e diventa uno strumento di lavoro dell'agente stesso.

Il progetto è open-source con licenza Apache 2.0, pubblicato su GitHub sotto l'organizzazione ufficiale ChromeDevTools, e distribuito come pacchetto npm (chrome-devtools-mcp). È scritto in TypeScript e si appoggia a Puppeteer e al Chrome DevTools Protocol (CDP), il protocollo di basso livello con cui gli stessi DevTools comunicano con il browser.

A cosa serve

Per capire il valore pratico, pensiamo a uno scenario quotidiano per chi sviluppa siti, e-commerce, gestionali web o SaaS: l'agente AI modifica un componente frontend, ma non ha modo di verificare se la pagina si rompe davvero. Senza strumenti di ispezione, l'agente può solo ragionare sul codice sorgente — non vede l'errore 500 su una chiamata API, non vede il TypeError in console, non vede che il bottone è coperto da un altro elemento.

Con chrome-devtools-mcp il ciclo cambia radicalmente:

• Debug autonomo: l'agente apre la pagina, legge i messaggi di console con stack trace mappati sui sorgenti (grazie alle source map), individua la riga che genera l'errore e propone la correzione verificandola subito nel browser.
• Analisi di rete: può elencare le richieste HTTP effettuate dalla pagina, ispezionare payload e risposte, e capire perché una chiamata al backend fallisce o è lenta.
• Analisi delle performance: registra una traccia di performance come farebbe un tecnico con il pannello Performance dei DevTools, estrae insight azionabili (LCP, CLS, colli di bottiglia di rendering) e li spiega in linguaggio naturale. Opzionalmente incrocia i dati di laboratorio con i dati reali degli utenti tramite l'API CrUX (Chrome User Experience Report).
• Automazione affidabile: clic, compilazione di form, navigazione multi-pagina, attese intelligenti sul risultato delle azioni. Utile per test end-to-end, verifica di flussi di checkout, scraping controllato e QA.
• Verifica visiva: screenshot e snapshot accessibili del DOM permettono all'agente di "vedere" lo stato reale dell'interfaccia, anche su viewport ridimensionati per simulare il mobile.

Per un'agenzia web o una PMI che mantiene siti per clienti, questo significa poter chiedere all'assistente: «controlla le performance della home page del cliente e dimmi cosa rallenta il caricamento» — e ottenere un'analisi reale, non una risposta teorica.

Come funziona

L'architettura è quella standard di un server MCP. Il server gira come processo locale avviato dal client AI e comunica via stdio secondo il protocollo MCP. Quando l'agente invoca un tool, il server pilota Chrome attraverso il Chrome DevTools Protocol, usando Puppeteer come libreria di automazione.

Installazione

Servono solo Node.js LTS e una versione recente di Chrome. La configurazione tipica in un client MCP è poche righe di JSON:

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

Con Claude Code basta il comando claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest; per Cursor, VS Code, Gemini CLI, Codex, Windsurf e altri esistono procedure equivalenti documentate nel repository. Il browser non parte finché un tool non lo richiede; al primo utilizzo il server avvia un'istanza di Chrome con un profilo dedicato.

I tool disponibili

Il server espone decine di tool organizzati per categoria:

• Automazione input: click, fill, fill_form, hover, press_key, type_text, upload_file, gestione dei dialoghi.
• Navigazione: new_page, navigate_page, list_pages, select_page, wait_for.
• Debugging: list_console_messages, evaluate_script, take_screenshot, take_snapshot, lighthouse_audit.
• Rete: list_network_requests, get_network_request.
• Performance: performance_start_trace, performance_stop_trace, performance_analyze_insight.
• Emulazione: ridimensionamento del viewport ed emulazione di condizioni di rete e dispositivo.

Esiste anche una modalità --slim che espone solo tre tool essenziali (navigazione, esecuzione script, screenshot), utile per compiti base con minor consumo di contesto. Per sessioni concorrenti, il routing per pageId permette a più agenti di lavorare su tab diversi senza conflitti.

Collegamento a un Chrome già avviato

Due modalità alternative meritano una menzione. Con --browser-url=http://127.0.0.1:9222 il server si collega a un Chrome avviato manualmente con la porta di debug remota aperta: utile quando l'agente deve operare su una sessione autenticata o quando gira in un ambiente sandboxato. Da Chrome 144 in poi, l'opzione --autoConnect permette la connessione automatica all'istanza locale, previa autorizzazione dell'utente tramite finestra di conferma.

Perché conta

Chrome DevTools MCP segna uno spostamento di paradigma nel rapporto tra agenti AI e sviluppo web. Fino a ieri gli assistenti di coding erano "ciechi": ottimi a scrivere codice, incapaci di osservarne gli effetti. Con questo strumento — mantenuto dal team che costruisce il browser più usato al mondo — il ciclo scrivi-verifica-correggi si chiude in autonomia dentro il browser reale.

Tre ragioni concrete per cui è rilevante per founder, PMI e agenzie italiane:

1. Standard di fatto, supporto ufficiale: non è un progetto amatoriale, ma un server MCP mantenuto da Google e già integrato nei principali client AI. Questo riduce il rischio di abbandono tipico di tanti progetti open-source.
2. Qualità misurabile: audit Lighthouse, tracce di performance e dati CrUX trasformano il "sito lento" in numeri e cause precise. Per chi vende siti o gestisce e-commerce, la velocità è conversione: averla analizzabile da un agente è un vantaggio operativo.
3. Costo zero e sovranità del dato locale: il server gira sulla propria macchina. Attenzione però alla privacy: la raccolta di statistiche d'uso di Google è attiva di default e si disattiva con --no-usage-statistics; i dati di performance possono essere inviati all'API CrUX, disattivabile con --no-performance-crux. E va ricordato che il server espone il contenuto del browser al client MCP: non usarlo su sessioni con dati sensibili che non si vogliono condividere con il modello.

Limiti da conoscere

Il supporto ufficiale copre solo Google Chrome e Chrome for Testing: altri browser Chromium potrebbero funzionare ma senza garanzie. Alcune funzionalità (memoria/heap snapshot, screencast, PWA, estensioni) sono sperimentali o richiedono configurazioni particolari. Infine, come ogni strumento di automazione browser, va usato con coscienza: un agente che può cliccare e compilare form va supervisionato, specialmente su ambienti di produzione.

Dove trovarlo

• Repository GitHub: github.com/ChromeDevTools/chrome-devtools-mcp
• Pacchetto npm: chrome-devtools-mcp
• Documentazione ufficiale: blog Chrome for Developers (developer.chrome.com/blog/chrome-devtools-mcp) e guide nel repository (tool reference, troubleshooting, design principles)

Per iniziare bastano due minuti: si aggiunge la configurazione JSON al proprio client MCP e si prova con il prompt suggerito dagli autori — «Check the performance of https://developers.chrome.com». Da lì in poi, il browser diventa parte della cassetta degli attrezzi dell'agente.