Data di pubblicazione: 23 settembre 2025
Oggi lanciamo un'anteprima pubblica del nuovo server Model Context Protocol (MCP) di Chrome DevTools, portando la potenza di Chrome DevTools negli assistenti di programmazione 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. È come programmare con una benda sugli occhi.
Il server MCP di Chrome DevTools modifica questo comportamento. Gli assistenti per la programmazione basati sull'AI sono in grado di eseguire il debug delle pagine web direttamente in Chrome e sfruttare le funzionalità di debug e gli approfondimenti sulle prestazioni di DevTools. In questo modo, la loro accuratezza migliora quando identificano e risolvono i problemi.
Scopri in prima persona 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 e origini dati esterni. Il server MCP di Chrome DevTools aggiunge funzionalità di debug all'agente AI.
Ad esempio, il server MCP di Chrome DevTools fornisce uno strumento chiamato
performance_start_trace. Quando viene chiesto di analizzare le prestazioni 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 delle prestazioni. L'LLM può quindi analizzare la traccia delle prestazioni per suggerire potenziali miglioramenti. Utilizzando il protocollo MCP, il
server MCP di Chrome DevTools può offrire nuove funzionalità di debug al tuo agente di codifica
per migliorare la creazione di siti web.
Per scoprire di più sul funzionamento di MCP, consulta la documentazione MCP.
Per cosa puoi utilizzarlo?
Di seguito sono riportati alcuni prompt di esempio che puoi provare nell'assistente AI di tua scelta, come Gemini CLI.
Verificare le modifiche al codice in tempo reale
Genera una correzione con l'agente AI e 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 problemi CORS o ispezionare 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 moduli e fai clic sui pulsanti per riprodurre bug e testare flussi utente complessi, il tutto ispezionando 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, ispezionare il DOM e il CSS e ricevere suggerimenti concreti per risolvere problemi di layout complessi come 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 delle prestazioni, analizzare i risultati e indagare su problemi di prestazioni specifici, come valori LCP elevati.
Prompt da provare:
Localhost:8080 is loading slowly. Make it load faster.
Consulta la nostra documentazione di riferimento sugli strumenti per un elenco di tutti gli strumenti disponibili.
Inizia
Per provare, 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 MCP di Chrome DevTools 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 parte tua e della 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, i tuoi approfondimenti saranno preziosi e, se qualcosa non funziona o manca, segnala un problema su GitHub.