Chrome DevTools per agenti include un'interfaccia a riga di comando (CLI) che consente all'agente di programmazione o a te di eseguire gli strumenti DevTools come comandi shell standard. Anziché chiamare gli strumenti in modo dinamico tramite il server MCP, l'agente scrive le stesse azioni come comandi della shell e può concatenarle in uno script che puoi eseguire nuovamente in qualsiasi momento. Ad esempio, l'agente potrebbe generare uno script simile al seguente:
chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"
Sia il server MCP sia l'interfaccia a riga di comando si connettono allo stesso motore: un daemon in background permanente che comunica con Chrome tramite il protocollo Chrome DevTools (CDP). La differenza sta nel modo in cui l'agente raggiunge il motore:
- Server MCP: l'agente si connette tramite input/output standard utilizzando JSON-RPC e tratta ogni strumento del browser come una chiamata di funzione interattiva.
- CLI: l'agente esegue i comandi della shell direttamente sullo stesso daemon in background.
Puoi utilizzare l'interfaccia a riga di comando per:
- Rendere persistente un workflow: trasforma le azioni intraprese dall'agente durante una sessione di debug esplorativo in uno script riutilizzabile.
- Riproduci lo stato di un'applicazione: esegui nuovamente uno script per riportare il browser a uno stato noto prima di eseguire nuovamente il debug.
- Azioni in batch: esegui una sequenza di comandi di navigazione, input, emulazione e ispezione senza un turno di conversazione tra ogni passaggio.
- Esegui gli script senza un agente AI: esegui gli script generati da qualsiasi terminale, subshell o container CI in grado di eseguire script di shell, senza bisogno di una sessione LLM attiva o di un client MCP.
Scegli tra l'interfaccia a riga di comando e il server MCP
La scelta tra la CLI e il server MCP è una decisione di progettazione che riguarda i costi, il contesto e il workflow.
- Costo della finestra di contesto: quando registri il server MCP, ogni definizione di strumento e schema JSON viene inserita nel prompt di sistema dell'LLM in ogni conversazione. Con la skill CLI, l'agente carica solo un riepilogo Markdown compatto e paga il costo dei token quando decide di leggere la skill completa e creare i comandi di cui ha bisogno. Per sessioni di agenti lunghe e con più turni, questa differenza si somma sia in termini di costi che di latenza.
- Esplorazione ed esecuzione: gli strumenti MCP sono eccellenti per il debug dinamico ed esplorativo, quando né tu né l'agente sapete ancora cosa dovete ispezionare. Poiché l'agente conosce in anticipo tutti gli strumenti disponibili, è più probabile che li utilizzi per raggiungere il suo obiettivo. Quando il percorso è già noto, l'interfaccia a riga di comando ti consente di eseguire solo i passaggi necessari.
- Riutilizzabilità: puoi salvare uno script CLI, riutilizzarlo in una skill o eseguirlo manualmente al di fuori di un loop dell'agente. Non puoi farlo con le chiamate allo strumento MCP.
| Utilizza il server MCP quando | Utilizza l'interfaccia a riga di comando quando |
|---|---|
| Stai esaminando un problema sconosciuto e hai bisogno di tutti gli strumenti disponibili. | Conosci già i passaggi e vuoi ripeterli in modo affidabile. |
| Vuoi una risoluzione dei problemi dinamica e in tempo reale e un'introspezione approfondita del browser. | Vuoi skill dell'agente efficienti in termini di token o un'automazione basata su terminale. |
| L'agente viene eseguito in un IDE o in un client con supporto MCP. | Il tuo ambiente non supporta i client MCP. |
Quando utilizzi l'interfaccia a riga di comando, tieni presente quanto segue:
- Copertura degli strumenti: l'interfaccia a riga di comando supporta la maggior parte degli strumenti di Chrome DevTools per agenti per l'automazione basata su shell. Per l'elenco completo dei comandi, consulta il riferimento delle skill dell'interfaccia a riga di comando.
- Avvio implicito: il server in background si avvia automaticamente al primo utilizzo; non è necessario eseguire
start,statusostopprima di ogni comando. - Stato persistente: lo stato del browser persiste tra i comandi, quindi una pagina che apri in un comando è ancora disponibile nel comando successivo se non viene chiusa esplicitamente.
- ID pagina e UID elemento: la maggior parte dei comandi accetta un ID pagina come primo argomento. Esegui
chrome-devtools list_pagesper trovarlo echrome-devtools take_snapshotper ottenere gli UID degli elementi con cui vuoi interagire. - Formato di output: l'output predefinito è un testo normale simile a Markdown. Passa
--output-format=jsonse vuoi utilizzare i risultati in altri script o pipeline CI. - Accesso ai file: per impostazione predefinita, l'interfaccia a riga di comando ha accesso completo al file system per i parametri di salvataggio dei file e
upload_file. Passa--allowUnrestrictedPaths=falseper limitare l'accesso ai file alla directory temporanea del sistema operativo. - Lighthouse in CI: puoi eseguire
lighthouse_auditdall'interfaccia a riga di comando, ma l'interfaccia a riga di comando di Lighthouse autonoma e le sue azioni GitHub sono più adatte se hai bisogno solo dei punteggi di Lighthouse in CI. - Astrazione più semplice rispetto agli script di automazione del browser: a differenza della scrittura di script Puppeteer o Playwright completi in JavaScript o TypeScript, l'interfaccia a riga di comando di DevTools fornisce una superficie API limitata e altamente mirata. Questa sintassi della shell è più facile da leggere e gestire per gli esseri umani ed è molto più semplice da generare in modo affidabile senza allucinazioni anche per i modelli di livello inferiore.
Prerequisiti
Prima di utilizzare l'interfaccia a riga di comando, assicurati di disporre di quanto segue:
- Chrome DevTools per agenti installato: segui la guida introduttiva. I plug-in e le estensioni specifici per l'agente (ad esempio l'estensione Gemini CLI) includono le competenze dell'agente insieme al server MCP.
- La CLI disponibile nella tua shell: l'installazione è un passaggio una tantum e non fa parte del normale workflow dell'agente. Consulta il riferimento per l'installazione.
- La skill
chrome-devtools-cli(installata con Chrome DevTools per agenti): questa skill insegna all'agente come scrivere script shell o eseguire comandi di shell con l'interfaccia a riga di comando.
Struttura dei comandi
I comandi seguono il pattern chrome-devtools <tool> [arguments] [flags].
Gli argomenti obbligatori sono posizionali, mentre quelli facoltativi utilizzano i flag. Utilizza --help su qualsiasi comando per i dettagli.
Ad esempio:
chrome-devtools new_page "https://example.com" # Open a page
chrome-devtools list_pages # Find the page ID
chrome-devtools take_snapshot 1 # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello" # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"
Casi d'uso per l'interfaccia a riga di comando di Chrome DevTools
Chiedi all'agente di acquisire i passaggi che ha già individuato come script, anziché risolvere nuovamente lo stesso flusso del browser in ogni sessione.
Rendi persistente una sessione di debug come script riutilizzabile
Dopo una sessione di debug esplorativa su MCP, spesso non puoi garantire che lo stesso problema non si ripresenti. Anziché spiegare nuovamente i passaggi di riproduzione la prossima volta, chiedi all'agente di annotare il flusso appena eseguito.
Prompt di esempio:
Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.
Esempio di esecuzione dell'agente: l'agente esamina i passaggi di navigazione, input e ispezione eseguiti durante la sessione e li traduce in una sequenza di comandi chrome-devtools, ad esempio new_page, take_snapshot, fill, click e list_console_messages. Lo script viene salvato come test.sh. La prossima volta che esegui il debug di questa area, puoi indirizzare l'agente allo script per raggiungere nuovamente lo stesso stato o eseguirlo al di fuori di un loop dell'agente per eseguire il debug manualmente.
Riproduci lo stato di un'applicazione prima di eseguire l'indagine
Gli stati complessi, come un pagamento in più passaggi o una dashboard filtrata, sono costosi da ricostruire in modo conversazionale ogni volta per un agente. Utilizza uno script salvato come punto di partenza per una nuova indagine.
Prompt di esempio:
Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.
Esempio di esecuzione dell'agente: l'agente esegue lo script, che va al pagamento, compila il modulo dell'indirizzo e seleziona un'opzione di spedizione. Poiché lo stato del browser persiste tra i comandi, l'agente utilizza take_snapshot e evaluate_script sulla stessa pagina per ispezionare lo stato del pulsante e i gestori di eventi collegati al selettore di pagamento.
Controlli visivi in batch su più aree visibili
La verifica di una modifica del layout su diverse dimensioni dello schermo è ripetitiva e di solito viene eseguita manualmente. Chiedi all'agente uno script che applichi le impostazioni di emulazione e acquisisca le prove per ciascuna in un'unica esecuzione.
Prompt di esempio:
Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.
Esempio di esecuzione dell'agente: l'agente scrive un loop che chiama
chrome-devtools emulate 1 --viewport "<size>" seguito da chrome-devtools
take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png"
per ogni viewport. Puoi eseguire nuovamente lo script dopo ogni modifica del CSS senza aprire una conversazione.
Esegui uno smoke test di un flusso in cui non è disponibile alcun client MCP
Alcuni ambienti, come i container CI o le configurazioni aziendali bloccate, non supportano i client MCP. Praticamente ogni terminale, subshell, container CI e framework di agenti supporta l'esecuzione di script shell standard e la lettura di stdout, il che rende l'interfaccia a riga di comando adatta per controlli leggeri in questi contesti.
Prompt di esempio:
Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.
Esempio di esecuzione dell'agente: l'agente scrive uno script che utilizza new_page,
take_snapshot, fill e click, quindi chiama list_console_messages 1
--types error --output-format=json e analizza l'output JSON per decidere il
codice di uscita.
Crea un pacchetto di un workflow come competenza leggera
Se un flusso è utile per più progetti o membri del team, l'agente può inserire lo script in una skill. Questa è la skill CLI di DevTools: un riferimento leggero che consente al tuo agente di eseguire comandi specifici del browser senza pagare il costo iniziale dei token per tutti gli strumenti.
Prompt di esempio:
Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.
Esempio di esecuzione dell'agente: l'agente crea una SKILL.md con un nome, una descrizione di una riga di quando si applica la skill e istruzioni che fanno riferimento allo script. Nelle sessioni successive, l'agente legge la skill completa solo quando l'attività corrisponde alla sua descrizione.
Passaggi successivi
- Per l'elenco completo dei comandi e dei flag dell'interfaccia a riga di comando, consulta il riferimento alle skill dell'interfaccia a riga di comando.
- Per configurare il server sottostante (modalità headless, canali, categorie sperimentali), consulta Configurazione.