Automatiseer herhaalbare browserworkflows met de Chrome DevTools CLI

José Luis Zapata
Matthias Rohmer

Chrome DevTools voor agents bevat een opdrachtregelinterface (CLI) waarmee je codeeragent of jij DevTools-tools kunt uitvoeren als standaard shell-opdrachten. In plaats van tools dynamisch aan te roepen via de MCP-server, schrijft je agent dezelfde acties als shell-opdrachten en kan deze samenvoegen tot een script dat je op elk moment opnieuw kunt uitvoeren. Je agent kan bijvoorbeeld een script zoals dit genereren:

chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"

Zowel de MCP-server als de CLI maken verbinding met dezelfde engine: een permanente achtergronddaemon die met Chrome communiceert via het Chrome DevTools Protocol (CDP). Het verschil is hoe je agent die engine bereikt:

  • MCP-server: Je agent maakt verbinding via standaardinvoer/-uitvoer met JSON-RPC en behandelt elke browsertool als een interactieve functieaanroep.
  • CLI: Je agent voert shell-opdrachten rechtstreeks uit op dezelfde achtergronddaemon.

Je kunt de CLI gebruiken om het volgende te doen:

  • Een workflow behouden: Zet de acties die je agent heeft uitgevoerd tijdens een verkennende foutopsporingssessie om in een herbruikbaar script.
  • Een applicatiestatus reproduceren: Voer een script opnieuw uit om de browser terug te brengen naar een bekende status voordat je opnieuw fouten opspoort.
  • Batchacties: Voer een reeks navigatie-, invoer-, emulatie- en inspectieopdrachten uit zonder een gespreksbeurt tussen elke stap.
  • Scripts uitvoeren zonder AI-agent: Voer de gegenereerde scripts uit vanuit een terminal, subshell of CI-container die shellscripts kan uitvoeren, zonder dat je een actieve LLM-sessie of MCP-client nodig hebt.

Kiezen tussen de CLI en de MCP-server

De keuze tussen de CLI en de MCP-server is een technische beslissing over kosten, context en workflow.

  • Kosten voor contextvenster: Als je de MCP-server registreert, worden elke tooldefinitie en elk json-schema in elk gesprek geïnjecteerd in de systeemprompt van je LLM. Met de CLI-vaardigheid laadt je agent alleen een compacte Markdown-samenvatting en betaalt de tokenkosten wanneer deze besluit de volledige vaardigheid te lezen en de opdrachten te maken die deze nodig heeft. Voor lange, multi-turn agentsessies loopt dat verschil op in zowel kosten als vertraging.
  • Verkenning versus uitvoering: MCP-tools zijn uitstekend voor dynamische, verkennende foutopsporing, wanneer jij en je agent nog niet weten wat je moet inspecteren. Omdat je agent van tevoren op de hoogte is van alle beschikbare tools, is de kans groter dat deze de tools gebruikt om het doel te bereiken. Als het pad al bekend is, kun je met de CLI alleen de stappen uitvoeren die je nodig hebt.
  • Herbruikbaarheid: Je kunt een CLI-script opslaan, hergebruiken in een vaardigheid of handmatig uitvoeren buiten een agentloop. Dat kun je niet doen met MCP-tool-aanroepen.
De MCP-server gebruiken als Gebruik de CLI als
Je onderzoekt een onbekend probleem en hebt de hele toolbox nodig. Je kent de stappen al en wilt ze op een betrouwbare manier herhalen.
Je wilt live, dynamische probleemoplossing en diepgaande browserintrospectie. Je wilt token-efficiënte agentvaardigheden of terminalgebaseerde automatisering.
Je agent wordt uitgevoerd in een IDE of client met MCP-ondersteuning. Je omgeving ondersteunt geen MCP-clients.

Houd rekening met het volgende als je de CLI gebruikt:

  • Tooldekking: De CLI ondersteunt de meeste Chrome DevTools voor agents-tools voor automatisering op basis van shells. Ga naar de referentie voor de CLI-vaardigheid voor de volledige lijst met opdrachten.
  • Impliciet opstarten: De achtergrondserver start automatisch bij het eerste gebruik. Je hoeft start, status of stop niet vóór elke opdracht uit te voeren.
  • Permanente status: De browserstatus blijft behouden tussen opdrachten, dus een pagina die je in de ene opdracht opent, is nog steeds beschikbaar in de volgende opdracht als je deze niet expliciet sluit.
  • Pagina-ID's en element-UID's: De meeste opdrachten nemen een pagina-ID als eerste argument. Voer chrome-devtools list_pages uit om het te vinden en chrome-devtools take_snapshot om de UID's te krijgen van elementen waarmee je wilt communiceren.
  • Uitvoerindeling: De uitvoer is standaard platte tekst in Markdown-stijl. Geef --output-format=json door als je de resultaten wilt gebruiken in andere scripts of CI-pipelines.
  • Bestandstoegang: De CLI heeft standaard volledige toegang tot het bestandssysteem voor parameters voor het opslaan van bestanden en upload_file. Geef --allowUnrestrictedPaths=false door om de bestandstoegang te beperken tot de tijdelijke map van het OS.
  • Lighthouse in CI: Je kunt lighthouse_audit uitvoeren vanuit de CLI, maar de zelfstandige Lighthouse CLI en de GitHub-acties zijn een lichtere oplossing als je alleen Lighthouse-scores nodig hebt in CI.
  • Eenvoudigere abstractie dan scripts voor browserautomatisering: In tegenstelling tot het schrijven van volledige Puppeteer- of Playwright-scripts in JavaScript of TypeScript, biedt de DevTools CLI een beperkt, zeer gericht API-oppervlak. Deze shell-syntaxis is makkelijker te lezen en te onderhouden voor mensen en aanzienlijk makkelijker voor zelfs modellen van een lager niveau om betrouwbaar te genereren zonder hallucinaties.

Vereisten

Zorg dat u het volgende heeft voordat u de CLI gebruikt:

  • Chrome DevTools voor agents geïnstalleerd: Volg de handleiding Aan de slag. Agentspecifieke plug-ins en extensies (bijvoorbeeld de Gemini CLI-extensie) bevatten de agentische vaardigheden naast de MCP-server.
  • De CLI die beschikbaar is in je shell: De installatie is een eenmalige stap en maakt geen deel uit van de normale agentworkflow. Bekijk de installatiereferentie.
  • De vaardigheid chrome-devtools-cli (geïnstalleerd met Chrome DevTools voor agents): Deze vaardigheid leert je agent hoe die shellscripts schrijft of shell-opdrachten uitvoert met de CLI.

Opdrachtstructuur

Opdrachten volgen het patroon chrome-devtools <tool> [arguments] [flags]. Vereiste argumenten zijn positioneel en optionele argumenten gebruiken markeringen. Gebruik --help bij een opdracht voor meer informatie.

Voorbeeld:

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"

Use cases voor de Chrome DevTools CLI

Geef je agent de opdracht om de stappen die deze al heeft bedacht, vast te leggen als een script, in plaats van dezelfde browserstroom in elke sessie opnieuw op te lossen.

Een foutopsporingssessie behouden als een herbruikbaar script

Na een verkennende foutopsporingssessie via MCP kun je vaak niet garanderen dat hetzelfde probleem niet opnieuw optreedt. In plaats van de reproductiestappen de volgende keer opnieuw uit te leggen, vraag je je agent om het proces op te schrijven dat die net heeft uitgevoerd.

Voorbeeld van een prompt:

Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.

Voorbeeld van de uitvoering van een agent: Je agent beoordeelt de navigatie-, invoer- en inspectiestappen die deze tijdens de sessie heeft uitgevoerd en vertaalt deze naar een reeks chrome-devtools-opdrachten, bijvoorbeeld new_page, take_snapshot, fill, click en list_console_messages. Het script wordt opgeslagen als test.sh. De volgende keer dat je dit gebied foutopspoort, kun je je agent naar het script verwijzen om dezelfde status opnieuw te bereiken of het script buiten een agent-lus uitvoeren om handmatig fouten op te sporen.

Een app-status reproduceren voordat je een onderzoek start

Complexe statussen, zoals een betalingsproces met meerdere stappen of een gefilterd dashboard, zijn duur voor een agent om elke keer opnieuw op te bouwen via een gesprek. Gebruik een opgeslagen script als uitgangspunt voor een nieuw onderzoek.

Voorbeeld van een prompt:

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.

Voorbeeld van uitvoering door de agent: Je agent voert het script uit, dat naar de betaalpagina gaat, het adresformulier invult en een verzendoptie selecteert. Omdat de browserstatus behouden blijft tussen opdrachten, gebruikt je agent daarna take_snapshot en evaluate_script op dezelfde pagina om de status van de knop en de gebeurtenishandlers te inspecteren die aan de betalingskiezer zijn gekoppeld.

Visuele controles in batches uitvoeren in verschillende kijkvensters

Het verifiëren van een wijziging in de vormgeving op verschillende schermformaten is repetitief en wordt meestal handmatig gedaan. Vraag je agent om een script dat emulatie-instellingen toepast en bewijs voor elke instelling vastlegt in één uitvoering.

Voorbeeld van een prompt:

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.

Voorbeeld van uitvoering door de agent: Je agent schrijft een lus die chrome-devtools emulate 1 --viewport "<size>" aanroept, gevolgd door chrome-devtools take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png" voor elke viewport. U kunt het script na elke CSS-wijziging opnieuw uitvoeren zonder een gesprek te openen.

Voer een smoketest uit voor een proces waarin geen MCP-client beschikbaar is

Sommige omgevingen, zoals CI-containers of vergrendelde bedrijfsinstellingen, ondersteunen geen MCP-clients. Vrijwel elke terminal, subshell, CI-container en agent-framework ondersteunt het uitvoeren van standaard shell-scripts en het lezen van stdout, waardoor de CLI geschikt is voor lichte controles op die plaatsen.

Voorbeeld van een prompt:

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.

Voorbeeld van uitvoering door een agent: Je agent schrijft een script dat new_page, take_snapshot, fill en click gebruikt, daarna list_console_messages 1 --types error --output-format=json aanroept en de json-uitvoer parseert om de exitcode te bepalen.

Een workflow verpakken als een lichtgewicht vaardigheid

Als een proces nuttig is voor meerdere projecten of teamleden, kan je agent het script verpakken in een vaardigheid. Dat is de DevTools CLI-vaardigheid: een lichte referentie waarmee je agent specifieke browseropdrachten kan uitvoeren zonder de voorafgaande tokenkosten voor alle tools te betalen.

Voorbeeld van een prompt:

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.

Voorbeeld van uitvoering door de agent: Je agent maakt een SKILL.md met een naam, een beschrijving van één regel van wanneer de vaardigheid van toepassing is en instructies die verwijzen naar het script. In latere sessies leest de agent de hele vaardigheid alleen als de taak overeenkomt met de beschrijving.

Volgende stappen

  • Ga naar de CLI-vaardigheidsreferentie voor de volledige lijst met CLI-opdrachten en -vlaggen.
  • Ga naar Configuratie om de onderliggende server te configureren (headless-modus, kanalen, experimentele categorieën).