Chrome DevTools MCP: automazione e debug del browser con l’AI

Per approfondire la tua comprensione degli agenti AI e di come strumenti come Chrome DevTools MCP si inseriscono nel quadro generale, esplora il corso di DataCamp Introduction to AI Agents o il percorso di competenze AI Agent Fundamentals.

Chrome DevTools MCP è un server ufficiale Model Context Protocol del team di Chrome DevTools che consente agli assistenti di coding AI di controllare Chrome tramite linguaggio naturale. Invece di scrivere script, dici al tuo assistente AI cosa vuoi ("vai a questa pagina e controlla gli errori della console" oppure "compila questo modulo e fai uno screenshot"), e lui gestisce i dettagli tecnici. 

Il server ti dà accesso a potenti strumenti di automazione e debug del browser. È basato su Puppeteer, quindi è affidabile e gira interamente sulla tua macchina. Non devi scrivere una sola riga di codice Puppeteer.

In questo tutorial imparerai a usare questo server MCP con assistenti di coding AI come Claude, Cursor e Cline. Copriremo installazione e configurazione, poi passeremo alle funzionalità principali: automazione del browser, debug e ispezione. Per tutto l’articolo useremo Conduit (demo.realworld.io), una piattaforma di blogging in stile Medium, per mostrare esempi reali.

Se sei nuovo al Model Context Protocol, ti consiglio questa guida completa a MCP per approfondire come MCP connette i modelli AI a strumenti esterni. Puoi anche consultare il nostro tutorial su Claude per Chrome e la nostra guida ai migliori browser AI. Per un approccio diverso alle automazioni AI nel browser, leggi il tutorial su ChatGPT Atlas.

TL;DR

• Chrome DevTools MCP è un server MCP ufficiale che consente agli assistenti di coding AI di controllare Chrome con il linguaggio naturale

• Espone 26 strumenti in 6 categorie: automazione input, navigazione, debugging, rete, prestazioni ed emulazione

• Installa con claude mcp add chrome-devtools npx chrome-devtools-mcp@latest per Claude Code (gli altri client hanno una configurazione simile)

• Automatizza attività del browser come navigazione, compilazione di moduli e acquisizione di screenshot senza scrivere script Puppeteer

• Fai debug delle web app ispezionando errori della console, richieste di rete ed eseguendo JavaScript—tutto tramite conversazione

• Costruisci front-end in modo iterativo lasciando che l’AI faccia screenshot per verificare il proprio lavoro a ogni passaggio

Che cos’è Chrome DevTools MCP?

Ecco come funziona l’architettura sotto il cofano.

Il server espone 26 strumenti organizzati in 6 categorie:

• Automazione input (7 strumenti): click, drag, fill, fill_form, handle_dialog, hover, upload_file
• Navigazione (7 strumenti): navigate_page, new_page, list_pages, select_page, close_page, navigate_page_history, wait_for
• Debugging (4 strumenti): evaluate_script, list_console_messages, take_screenshot, take_snapshot
• Rete (2 strumenti): list_network_requests, get_network_request
• Prestazioni (3 strumenti): performance_start_trace, performance_stop_trace, performance_analyze_insight
• Emulazione (3 strumenti): emulate_cpu, emulate_network, resize_page

L’automazione del browser diventa conversazionale. Invece di scrivere script Puppeteer e fare debug dei selettori CSS, descrivi in linguaggio naturale cosa vuoi. L’assistente AI si occupa dei dettagli tecnici.

Chrome DevTools MCP vs. approcci tradizionali

Con questi strumenti, il tuo assistente AI può aiutarti a:

• Costruire front-end in modo iterativo lasciando che l’agente faccia screenshot a ogni passaggio
• Testare i flussi utente end-to-end, come registrazione, navigazione tra le funzionalità e verifica di ogni passaggio
• Fare debug dei problemi controllando errori della console e richieste di rete senza dover aprire manualmente DevTools
• Automatizzare la documentazione visiva facendo screenshot di diverse pagine o stati dell’app
• Estrarre dati dalle pagine web eseguendo JavaScript direttamente nel contesto della pagina

Tutto questo si attiva tramite comandi in linguaggio naturale invece di scrivere script Puppeteer.

Chrome DevTools MCP funziona con Claude Desktop, Cursor, Cline e VSCode Copilot. Poiché è uno dei tanti server MCP, puoi combinarlo con altri—come accesso al file system, strumenti per database e API—per creare workflow che attraversano più strumenti.

Installazione e configurazione di Chrome DevTools MCP

Ti serviranno alcune cose:

• Node.js e npm installati sulla tua macchina
• Un assistente di coding AI compatibile con MCP (useremo Claude Code in questo tutorial)
• Browser Chrome (Puppeteer gestisce tutto automaticamente, quindi non devi configurare nulla)

Una familiarità di base con i DevTools del browser aiuta, ma non è obbligatoria.

Installare Chrome DevTools MCP

Chrome DevTools MCP viene eseguito tramite la configurazione MCP del tuo assistente AI. Il setup varia leggermente a seconda dell’assistente di coding AI che usi. Ti mostreremo come installarlo per Claude Code, ma altri editor come Cursor, Cline e VSCode Copilot hanno approcci simili.

Per Claude Code, esegui questo comando nel terminale:

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

Questo comando registra il server Chrome DevTools MCP con Claude Code. Il server gira tramite npx, che scarica ed esegue il pacchetto senza richiedere un’installazione permanente. Il @latest garantisce che tu ottenga la versione corrente.

Dopo aver eseguito il comando, riavvia Claude Code per caricare il nuovo server.

Se usi un altro assistente di coding AI

Altri client MCP hanno metodi di installazione simili—alcuni usano comandi, altri file di configurazione o pulsanti di installazione one-click. Controlla la pagina GitHub di Chrome DevTools MCP per istruzioni specifiche per Cursor, Cline, Gemini CLI, Windsurf e altri client supportati.

Testare la configurazione

Verifichiamo che tutto funzioni con un semplice comando:

Navigate to demo.realworld.io and take a screenshot

Dovresti vedere:

• Chrome si avvia (vedrai la finestra del browser a meno che tu non abbia configurato la modalità headless)
• Si carica la homepage di Conduit
• Il tuo assistente AI acquisisce e mostra uno screenshot

Se qualcosa non funziona, controlla questi problemi comuni:

• Versione di Node.js: Chrome DevTools MCP richiede Node.js v20.19 o successiva
• Permessi npm: assicurati che npm possa installare i pacchetti
• Riavvio necessario: il tuo assistente AI deve essere riavviato dopo le modifiche alla configurazione
• Percorso del file di config: verifica di aver modificato il file di impostazioni MCP corretto per il tuo assistente

Nozioni di base sull’automazione del browser

Chrome DevTools MCP ti fornisce sei strumenti fondamentali per interagire con le pagine web. Usa navigate_page per caricare URL, click per interagire con gli elementi, fill e fill_form per inserire testo, hover per attivare gli effetti hover e take_screenshot per catturare ciò che vedi. Questi strumenti coprono la maggior parte delle attività di automazione del browser che incontrerai.

Navigazione e screenshot

Carichiamo una pagina. Di’ al tuo assistente AI:

Navigate to demo.realworld.io

L’AI usa lo strumento navigate_page, Chrome si apre e si carica la homepage di Conduit. Vedrai la finestra del browser a meno che tu non abbia configurato la modalità headless.

Per documentare ciò che vedi, chiedi semplicemente:

Take a screenshot of the homepage

L’AI cattura la pagina corrente con take_screenshot e ti mostra il risultato. È utile per la documentazione visiva o per verificare che una pagina sia corretta.

Interazione con gli elementi

Puoi interagire con qualsiasi elemento sulla pagina senza scrivere selettori CSS o ispezionare ID degli elementi. Descrivi semplicemente cosa vuoi:

Click the Sign in link

L’AI capisce a quale elemento ti riferisci e ci clicca sopra usando lo strumento click. Si carica la pagina di accesso.

Puoi anche passare sopra gli elementi con il mouse:

Hover over the Sign up link

L’AI usa lo strumento hover. Se c’è un tooltip o un menu a discesa, appare.

Compilazione di moduli

I moduli rendono l’automazione del browser tediosa se stai scrivendo script. Con Chrome DevTools MCP, descrivi semplicemente cosa vuoi che venga compilato.

Fill one field at a time:
Fill in the email field with test@example.com
Fill in the password field with testpass123
Or fill multiple fields at once:
Fill out the sign-in form with email test@example.com and password testpass123

L’AI usa fill_form per gestire tutti i campi in un colpo solo. Ecco come appare il modulo compilato:

L’AI identifica i campi di input corretti in base alla tua descrizione. Non tocchi l’HTML.

Debugging e ispezione

Chrome DevTools MCP ti fornisce tre strumenti fondamentali per il debug: list_console_messages per vedere l’output della console, list_network_requests per osservare l’attività di rete ed evaluate_script per eseguire JavaScript ed estrarre dati dalle pagine.

Quando usi questi strumenti tramite il tuo assistente AI, stai avendo una conversazione. Fai domande in linguaggio naturale e l’AI le traduce in chiamate agli strumenti MCP dietro le quinte. 

Ecco come appare:

L’assistente AI comprende la tua intenzione ed esegue gli strumenti appropriati di Chrome DevTools, quindi presenta i risultati in un formato leggibile. Vediamo come funzionano in pratica.

Ispezione della console

Gli errori della console sono di solito il primo posto dove guardare quando qualcosa si rompe. Invece di aprire manualmente DevTools, chiedi semplicemente al tuo assistente AI:

Navigate to demo.realworld.io and check the console for any errors

L’AI carica la pagina e controlla la console usando list_console_messages. Ecco cosa trova:

Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/articles'
from origin 'https://demo.realworld.io' has been blocked by CORS policy
Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/tags'
from origin 'https://demo.realworld.io' has been blocked by CORS policy

Questi errori CORS (Cross-Origin Resource Sharing)—sono una funzionalità di sicurezza del browser che limita le pagine web dal fare richieste a domini diversi) e spiegano perché la pagina mostra “Loading articles…” e “Loading tags…” invece dei contenuti reali:

Puoi approfondire chiedendo all’AI di filtrare e interpretare questi messaggi:

Are there any errors or warnings on this page?

L’AI analizza l’output della console e ti dice: “Sì, ci sono due errori CORS che bloccano le richieste API per articoli e tag.”

Questo ti dà visibilità immediata su cosa si sta rompendo senza aprire manualmente la console di DevTools.

Panoramica delle richieste di rete

Gli errori della console spesso indicano problemi di rete. Per capire cosa sta succedendo davvero con le tue richieste, controlla l’attività di rete:

Show me what network requests are made on the homepage

L’AI usa list_network_requests e restituisce l’elenco di tutte le richieste. Vedrai richieste andate a buon fine (CSS, font, file JavaScript) e quelle fallite:

https://demo.realworld.io/ GET [success - 200]
https://demo.realworld.io/main.css GET [success - 200]
https://demo.realworld.io/main.js GET [success - 200]
https://conduit.productionready.io/api/tags GET [failed - 307]
https://conduit.productionready.io/api/articles?limit=10&offset=0 GET [failed - 307]
https://api.realworld.io/api/tags GET [failed - net::ERR_FAILED]
https://api.realworld.io/api/articles?limit=10&offset=0 GET [failed - net::ERR_FAILED]

Fai domande di follow-up per approfondire:

Are there any failed requests?

L’AI filtra l’elenco e individua il problema: “Sì, quattro richieste API sono fallite. Due hanno restituito redirect 307 e due sono fallite completamente con errori ERR_FAILED.”

Questo ti aiuta a individuare i problemi rapidamente senza ispezionare manualmente la scheda Network.

Valutazione JavaScript ed estrazione dati

Oltre a visualizzare dati di console e rete, puoi eseguire codice direttamente sulla pagina per verificare il suo stato o estrarre informazioni. Usa evaluate_script per questo:

Check if any articles are displayed on the homepage

L’AI esegue JavaScript per contare gli elementi articolo:

const articles = document.querySelectorAll('.article-preview');
return articles.length;

Risultato: “Sono visualizzati 0 articoli. La pagina mostra ‘Loading articles…’, il che suggerisce che gli errori API impediscono il caricamento dei contenuti.”

Puoi estrarre anche dati più complessi:

Get the page title and main heading text

L’AI valuta:

return {
 pageTitle: document.title,
 mainHeading: document.querySelector('h1')?.textContent
};

Risultato: {pageTitle: "Home — Conduit", mainHeading: "conduit"}

Questo ti permette di verificare i contenuti della pagina, estrarre dati strutturati o controllare che gli elementi dinamici siano caricati correttamente. Gli strumenti take_screenshot e take_snapshot completano il tutto catturando documentazione visiva e strutturale quando serve.

Queste tre funzionalità di debug lavorano in modo naturale insieme. Inizia dai messaggi della console per individuare gli errori, controlla le richieste di rete per capire cosa è fallito, poi usa la valutazione JavaScript per verificare come quei fallimenti influiscono sulla pagina,  tutto tramite conversazione con il tuo assistente AI—senza passare tra strumenti o scrivere script di ispezione.

Creare front-end di siti web con Chrome DevTools MCP

Gli assistenti AI possono costruire interfacce web, ma non possono vedere cosa creano. Finisci per fare screenshot manualmente e chiedere correzioni.

Chrome DevTools MCP cambia le cose. L’AI fa i propri screenshot, verifica i layout e itera finché tutto non sembra a posto.

Costruiamo un clone di ChatGPT con Streamlit. Ti servirà una chiave API di OpenAI. Forniscila al tuo assistente AI quando esegui il prompt così può verificare che l’app funzioni correttamente. Ecco il prompt:

Build a ChatGPT clone using Streamlit. Create a clean chat interface
with message history, text input, and OpenAI API integration. Include
a sidebar for API key management and chat management features (Clear
Chat, New Chat, message counter). Use Chrome DevTools MCP to verify
the UI at each step.

L’AI crea l’app con una sidebar e fa uno screenshot per verificare il layout iniziale:

La sidebar include l’inserimento della chiave API, i pulsanti Clear Chat e New Chat e un contatore dei messaggi a 0. Con l’interfaccia pronta, vediamo se la chat funziona.

Test con una domanda semplice:

La chat risponde correttamente e il contatore mostra due messaggi (nello screenshot successivo). Ma riesce a gestire conversazioni multi-turno?

Test del contesto della conversazione:

L’AI ricorda lo scambio precedente. Ora dobbiamo verificare la funzione Clear Chat.

Clic sul pulsante Clear Chat:

La chat si cancella correttamente e il contatore si azzera a 0. 

Avvio di una nuova chat:

Perfetto. L’AI ha creato un clone funzionante di ChatGPT, ha verificato l’aspetto a ogni passaggio e ha testato tutte le funzionalità senza intervento umano.

Questo funziona con qualsiasi framework. React, Vue, Svelte, HTML puro. L’AI verifica i layout, testa le interazioni e intercetta i bug prima ancora che tu veda il codice.

Conclusioni e prossimi passi

Chrome DevTools MCP ti offre automazione del browser tramite conversazione. Descrivi cosa vuoi e il tuo assistente AI si occupa dei dettagli tecnici. Niente script da scrivere, nessun selettore da debuggare.

In tutto l’articolo abbiamo visto le basi: installare il server, navigare tra le pagine, compilare moduli, cliccare elementi e fare screenshot. Poi siamo passati al debug con ispezione della console, monitoraggio della rete e valutazione JavaScript. Infine, abbiamo visto come questi strumenti lavorano insieme per costruire front-end in cui l’AI può vedere ciò che crea.

Cosa provare dopo

Inizia navigando su un sito su cui stai lavorando e chiedi al tuo AI di controllare gli errori della console o ispezionare le richieste di rete. Se usi Claude Code, la nostra guida alle best practice di Claude Code copre pattern di prompt efficaci per l’uso degli strumenti. Fai screenshot di diversi stati. Prova l’invio dei moduli.

Poi combina più strumenti: vai a una pagina, compila un modulo, invialo e cattura il risultato. Controlla i messaggi della console, elenca le richieste di rete fallite ed esegui JavaScript per verificare lo stato della pagina.

Quando ti senti a tuo agio con le basi, crea un piccolo componente UI con il tuo AI e lascia che ne verifichi il layout a ogni passaggio. Guarda come intercetta i problemi visivi prima del tuo controllo manuale.

Per il lavoro sulle prestazioni, usa gli strumenti di performance (performance_start_trace, performance_stop_trace, performance_analyze_insight) per profilare i tempi di caricamento e individuare i colli di bottiglia. Usa gli strumenti di emulazione (emulate_cpu, emulate_network, resize_page) per testare in condizioni diverse.

Chrome DevTools MCP è uno dei tanti server. Combinatelo con server per il file system, strumenti per database o integrazioni API per creare workflow che attraversano più sistemi. Per altri esempi MCP, vedi il nostro tutorial su Codex CLI MCP e il tutorial su Google ADK MCP.

Se vuoi creare i tuoi server MCP, consulta Building an MCP Server and Client with FastMCP 2.0.