Connetti il tuo agente AI direttamente all'istanza del browser attiva con la funzionalità di connessione automatica. In questo modo, l'agente può bypassare le limitazioni della sandbox ereditando le schede, le estensioni del browser e lo stato dell'applicazione live correnti.
L'ereditarietà del contesto del flusso di lavoro consente all'agente di passare dalla scrittura del codice al debug dello stato del browser live senza perdere i dati della sessione. Questa funzionalità è utile quando hai già raggiunto uno stato specifico dell'applicazione (ad esempio un flusso di pagamento complesso o un errore riprodotto manualmente) e vuoi che l'agente si occupi dell'indagine tecnica senza ripetere manualmente questi passaggi.
Prima di attivare la connessione automatica, considera quanto segue:
- Sicurezza e privacy:quando la connessione automatica è attiva, l'agente ha accesso a tutti i dati nel profilo del browser, incluse le schede aperte, l'archiviazione della sessione, l'archiviazione locale, i cookie e altri dati visualizzati tramite le API JavaScript.
- Garanzia della privacy dei dati:il server Chrome DevTools for agents è un processo locale e non invia a Google i dati del browser, i token di sessione o la telemetria.
- Attendibilità e prompt: utilizza questa modalità solo con gli agenti di cui ti fidi e fai attenzione alle informazioni che includi nei prompt.
Prerequisiti
Prima di utilizzare la funzionalità di connessione automatica, assicurati di disporre di quanto segue:
- Chrome 144+: la connessione automatica richiede protocolli di debug moderni presenti nelle versioni attuali di Chrome.
- Canale Chrome corretto: l'agente si connette alla versione stabile di Chrome per impostazione predefinita. Per utilizzare Canary o Beta, specifica il canale nella configurazione.
- Debug remoto abilitato: abilita manualmente il bridge tra il browser e l'agente.
- Configurazione corretta: devi aggiornare la configurazione MCP in modo che includa
il flag
--autoConnect.
Configurare la connessione automatica
Per configurare la funzionalità di connessione automatica nel server MCP:
- Nel browser Chrome in esecuzione, vai a
chrome://inspect/#remote-debugginge attiva il debug remoto. Aggiorna la configurazione MCP in modo da includere il flag
--autoConnect:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }Chiedi all'agente di interagire con l'app Chrome aperta. Quando Chrome chiede l'autorizzazione per consentire la sessione, fai clic su Consenti.
Ora l'agente utilizza il server MCP per interagire con l'applicazione Chrome in esecuzione.
Casi d'uso per la connessione automatica
La connessione automatica ti consente di utilizzare strumenti o stati che non possono essere utilizzati nelle sessioni Chrome in sandbox. Ad esempio, anziché chiedere all'agente di accedere, operazione che spesso non va a buon fine, puoi accedere alla pagina autonomamente. Poi, chiedi al tuo agente di prendere in carico la richiesta.
Le sezioni seguenti includono alcuni esempi di casi d'uso per la funzionalità di connessione automatica.
Eseguire il debug delle dashboard autenticate
Gli strumenti interni e le dashboard private spesso si trovano dietro complessi livelli di Single Sign-On (SSO) o rete privata virtuale (VPN). Un browser in sandbox di solito richiede un accesso che l'agente non può bypassare. Con la connessione automatica, l'agente eredita la tua sessione attiva.
Prompt di esempio:
I have my company's staging dashboard open in the next tab. Can you look at the
User Analytics chart, find the SVG element for the Friday data point, and tell
me why the tooltip isn't appearing on hover?
Esecuzione dell'agente di esempio: l'agente identifica il processo Chrome esistente, trova la scheda attiva e ispeziona l'albero di accessibilità per individuare gli elementi. Potrebbe anche utilizzare API JavaScript per valutare conflitti specifici.
Correggere in tempo reale la scheda corrente
Evita di riprodurre manualmente gli errori. Anziché tradurre i passaggi di riproduzione in un nuovo prompt per un agente in sandbox, puoi chiedere all'agente di correggere il bug nella pagina attiva in cui l'hai già riscontrato.
Prompt di esempio:
Look at the current page. The Submit button overlaps with the footer on this
screen size. Generate a fix for the layout and verify it by injecting the CSS
directly into this tab.
Esecuzione dell'agente di esempio: poiché è connesso alla finestra attiva, l'agente analizza il layout e applica la correzione immediatamente. Vedi il pulsante spostarsi sullo schermo, il che conferma che la correzione funziona prima di aggiornare il codice sorgente.