Consenti al tuo agente di codifica di eseguire il debug della sessione del browser con Chrome DevTools MCP

Sebastian Benz

Alex Rudenko

Data di pubblicazione: 11 dicembre 2025

Abbiamo implementato un miglioramento del server MCP di Chrome DevTools che molti dei nostri utenti hanno richiesto: la possibilità per gli agenti di codifica di connettersi direttamente a una sessione del browser attiva.

Con questo miglioramento, gli agenti di codifica possono:

1. Riutilizzare una sessione del browser esistente:supponiamo che tu voglia che il tuo agente di codifica risolva un problema che richiede l'accesso. Il tuo agente di codifica ora può accedere direttamente alla tua sessione di navigazione attuale senza richiedere un accesso aggiuntivo.
2. Accedere alle sessioni di debug attive: gli agenti di codifica ora possono accedere a una sessione di debug attiva nell'interfaccia utente di DevTools. Ad esempio, quando scopri una richiesta di rete non riuscita nel riquadro di rete degli Strumenti per sviluppatori di Chrome, seleziona la richiesta e chiedi al tuo agente di codifica di esaminarla. Lo stesso vale per gli elementi selezionati nel riquadro Elementi. Siamo entusiasti di questa nuova funzionalità che consente di passare facilmente dal debug manuale a quello assistito dall'AI.

Guarda come funziona

La funzionalità di connessione automatica è un'aggiunta ai modi esistenti per connettere l'MCP di Chrome DevTools a un'istanza di Chrome. Tieni presente che puoi comunque:

• Esegui Chrome con un profilo utente specifico del server MCP di Chrome DevTools (impostazione predefinita corrente).
• Connettiti a un'istanza di Chrome in esecuzione con una porta di debug remoto.
• Esegui più istanze di Chrome in isolamento, ognuna in un profilo temporaneo.

Come funziona

Abbiamo aggiunto una nuova funzionalità a Chrome M145 (attualmente in Canary) che consente al server MCP di Chrome DevTools di richiedere una connessione di debug remoto. Questo nuovo flusso si basa sulle funzionalità di debug remoto esistenti di Chrome. Per impostazione predefinita, le connessioni di debug remoto sono disattivate in Chrome. Gli sviluppatori devono attivare esplicitamente la funzionalità andando su chrome://inspect#remote-debugging.

Quando il server MCP di Chrome DevTools è configurato con l'opzione --autoConnect, il server MCP si connette a un'istanza di Chrome attiva e richiede una sessione di debug remoto. Per evitare abusi da parte di malintenzionati, ogni volta che il server Chrome DevTools MCP richiede una sessione di debug remoto, Chrome mostrerà una finestra di dialogo all'utente e gli chiederà l'autorizzazione per consentire la sessione di debug remoto. Inoltre, mentre una sessione di debug è attiva, Chrome mostra il banner "Chrome è controllato da software di test automatizzato" nella parte superiore.

Inizia

Per utilizzare le nuove funzionalità di debug remoto. Devi prima attivare il debug remoto in Chrome e poi configurare il server MCP di Chrome DevTools per utilizzare la nuova funzionalità di connessione automatica.

Passaggio 1: configura il debug remoto in Chrome

In Chrome, procedi nel seguente modo per configurare il debug remoto:

1. Vai a chrome://inspect/#remote-debugging per attivare il debug remoto.
2. Segui l'interfaccia utente della finestra di dialogo per consentire o negare le connessioni di debug in entrata.

Passaggio 2: configura il server MCP di Chrome DevTools per connettersi automaticamente a un'istanza di Chrome in esecuzione

Per connettere il server chrome-devtools-mcp all'istanza di Chrome in esecuzione, utilizza l'argomento della riga di comando --autoConnect per il set di server MCP.

Il seguente snippet di codice è un esempio di configurazione per gemini-cli:

{
   "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--channel=canary"
      ]
    }
  }
}

Passaggio 3: testa la configurazione

Ora apri gemini-cli ed esegui il seguente prompt:

Check the performance of https://developers.chrome.com

Il server MCP di Chrome DevTools tenterà di connettersi all'istanza di Chrome in esecuzione. Viene visualizzata una finestra di dialogo che chiede l'autorizzazione dell'utente:

Se fai clic su Consenti, il server MCP di Chrome DevTools apre developers.chrome.com ed esegue una traccia delle prestazioni.

Per istruzioni complete, consulta il file README su GitHub.

Lascia che l'agente di codifica prenda il controllo della sessione di debug

La possibilità di connettersi a un'istanza di Chrome live significa che non devi scegliere tra l'automazione e il controllo manuale. Puoi utilizzare DevTools personalmente o affidare un'attività di debug al tuo agente di programmazione. Se riscontri un problema sul tuo sito web, puoi aprire DevTools per esaminarlo e identificare l'elemento che causa il problema. Se vuoi che il tuo agente di codifica risolva il problema, ora puoi farlo con il server MCP di Chrome DevTools. Puoi selezionare l'elemento nel riquadro Elementi e chiedere all'agente di codifica di esaminare il problema.

Lo stesso vale anche per il riquadro Rete. Puoi selezionare una richiesta di rete e chiedere al tuo agente di codifica di esaminarla.

Ma questo è solo un primo passo. Abbiamo in programma di esporre in modo incrementale sempre più dati dei riquadri agli agenti di codifica tramite il server MCP di Chrome DevTools. Continua a seguirci.