Pubblicato il 23 settembre 2025
Oggi lanciamo un'anteprima pubblica del nuovo server Model Context Protocol (MCP) di Chrome DevTools, che porta la potenza di Chrome DevTools negli assistenti di codifica AI.
Gli agenti di codifica devono affrontare un problema fondamentale: non sono in grado di vedere cosa fa effettivamente il codice che generano quando viene eseguito nel browser. In pratica, programmano alla cieca.
Il server MCP di Chrome DevTools cambia questa situazione. Gli assistenti di codifica AI sono in grado di eseguire il debug delle pagine web direttamente in Chrome e di usufruire delle funzionalità di debug di DevTools e delle informazioni sul rendimento. Ciò migliora la loro precisione nell'identificazione e nella risoluzione dei problemi.
Scopri come funziona:
Che cos'è il Model Context Protocol (MCP)?
Il Model Context Protocol (MCP) è uno standard open source per connettere modelli linguistici di grandi dimensioni (LLM) a strumenti esterni e origini dati. Il server MCP di Chrome DevTools aggiunge funzionalità di debug al tuo agente AI.
Ad esempio, il server MCP di Chrome DevTools fornisce uno strumento chiamato performance_start_trace. Quando viene chiesto di esaminare il rendimento del tuo sito web, un LLM può utilizzare questo strumento per avviare Chrome, aprire il tuo sito web e utilizzare Chrome DevTools per registrare una traccia del rendimento. L'LLM può quindi analizzare la traccia del rendimento per suggerire potenziali miglioramenti. Utilizzando il protocollo MCP, il server MCP di Chrome DevTools può portare nuove funzionalità di debug al tuo agente di codifica per migliorarne la capacità di creare siti web.
Se vuoi saperne di più su come funziona MCP, consulta la documentazione di MCP.
Per cosa puoi utilizzarlo?
Di seguito sono riportati alcuni prompt di esempio che puoi provare nell'assistente AI di tua scelta, ad esempio Gemini CLI.
Verificare le modifiche al codice in tempo reale
Genera una correzione con il tuo agente AI e poi verifica automaticamente che la soluzione funzioni come previsto con Chrome DevTools MCP.
Prompt da provare:
Verify in the browser that your change works as expected.
Diagnosticare gli errori di rete e della console
Consenti al tuo agente di analizzare le richieste di rete per scoprire i problemi di CORS o di esaminare i log della console per capire perché una funzionalità non funziona come previsto.
Prompt da provare:
A few images on localhost:8080 are not loading. What's happening?
Simulare il comportamento degli utenti
Naviga, compila i moduli e fai clic sui pulsanti per riprodurre i bug e testare i flussi utente complessi, il tutto mentre esamini l'ambiente di runtime.
Prompt da provare:
Why does submitting the form fail after entering an email address?
Eseguire il debug dei problemi di stile e layout in tempo reale
Chiedi al tuo agente AI di connettersi a una pagina live, di esaminare il DOM e il CSS e di ricevere suggerimenti concreti per risolvere problemi di layout complessi, come gli elementi in overflow, in base ai dati live del browser.
Prompt da provare:
The page on localhost:8080 looks strange and off. Check what's happening there.
Automatizzare gli audit sulle prestazioni
Chiedi al tuo agente AI di eseguire una traccia del rendimento, analizzare i risultati ed esaminare problemi di rendimento specifici, come numeri LCP elevati.
Prompt da provare:
Localhost:8080 is loading slowly. Make it load faster.
Per un elenco di tutti gli strumenti disponibili, consulta la documentazione di riferimento degli strumenti.
Inizia
Per provare questa funzionalità, aggiungi la seguente voce di configurazione al client MCP:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Per verificare se funziona, esegui il seguente prompt nell'agente di codifica:
Please check the LCP of web.dev.
Per maggiori dettagli, consulta la documentazione di Chrome DevTools MCP su GitHub.
Partecipa
Stiamo creando Chrome DevTools MCP in modo incrementale, a partire dalla versione di anteprima pubblica che rilasceremo oggi. Stiamo cercando attivamente feedback da te e dalla community su quali funzionalità dovremmo aggiungere in futuro. Che tu sia uno sviluppatore che utilizza assistenti di codifica AI o un fornitore che crea la prossima generazione di strumenti di sviluppo AI, le tue informazioni saranno preziose e, se manca qualcosa o non funziona, segnala un problema su GitHub.