Chrome DevTools MCP: AI-gestuurde browserautomatisering en -debugging

Wil je je inzicht in AI-agents verdiepen en zien hoe tools zoals Chrome DevTools MCP in het grotere geheel passen? Bekijk DataCamp’s cursus Introduction to AI Agents of het vaardigheidstraject AI Agent Fundamentals.

Chrome DevTools MCP is een officiële Model Context Protocol-server van het Chrome DevTools-team waarmee AI-codeerassistenten Chrome kunnen bedienen via natuurlijke taal. In plaats van scripts te schrijven, vertel je je AI-assistent wat je wilt ("navigeer naar deze pagina en controleer op consolefouten" of "vul dit formulier in en maak een screenshot"), en hij regelt de technische details.

De server geeft je toegang tot krachtige tools voor browserautomatisering en debugging. Het is gebouwd op Puppeteer, dus het is betrouwbaar en draait volledig op je eigen machine. Je hoeft geen enkele regel Puppeteer-code te schrijven.

In deze tutorial leer je hoe je deze MCP-server gebruikt met AI-codeerassistenten zoals Claude, Cursor en Cline. We behandelen installatie en configuratie en gaan dan door naar de kernfuncties: browserautomatisering, debugging en inspectie. Door het hele artikel gebruiken we Conduit (demo.realworld.io), een blogplatform in Medium-stijl, om praktijkvoorbeelden te laten zien.

Ben je nieuw met Model Context Protocol? Bekijk dan deze uitgebreide MCP-gids voor een deep dive in hoe MCP AI-modellen met externe tools verbindt. Je kunt ook onze Claude voor Chrome-tutorial en onze gids met de beste AI-browsers bekijken. Voor een andere aanpak van AI-browserautomatisering, lees onze ChatGPT Atlas-tutorial.

TL;DR

• Chrome DevTools MCP is een officiële MCP-server waarmee AI-codeerassistenten Chrome via natuurlijke taal kunnen bedienen

• Hij biedt 26 tools in 6 categorieën: invoerautomatisering, navigatie, debugging, netwerk, performance en emulatie

• Installeer met claude mcp add chrome-devtools npx chrome-devtools-mcp@latest voor Claude Code (andere clients hebben een vergelijkbare setup)

• Automatiseer browsertaken zoals navigatie, formulieren invullen en screenshots maken zonder Puppeteer-scripts te schrijven

• Debug webapps door consolefouten te inspecteren, netwerkverzoeken te bekijken en JavaScript uit te voeren—allemaal via een gesprek

• Bouw frontends iteratief door de AI bij elke stap screenshots te laten maken om z’n eigen werk te verifiëren

Wat is Chrome DevTools MCP?

Zo werkt de architectuur onder de motorkap.

De server stelt 26 tools beschikbaar, ingedeeld in 6 categorieën:

• Invoerautomatisering (7 tools): click, drag, fill, fill_form, handle_dialog, hover, upload_file
• Navigatie (7 tools): navigate_page, new_page, list_pages, select_page, close_page, navigate_page_history, wait_for
• Debugging (4 tools): evaluate_script, list_console_messages, take_screenshot, take_snapshot
• Netwerk (2 tools): list_network_requests, get_network_request
• Performance (3 tools): performance_start_trace, performance_stop_trace, performance_analyze_insight
• Emulatie (3 tools): emulate_cpu, emulate_network, resize_page

Browserautomatisering wordt een gesprek. In plaats van Puppeteer-scripts te schrijven en CSS-selectors te debuggen, beschrijf je in natuurlijke taal wat je wilt. De AI-assistent puzzelt de technische details uit.

Chrome DevTools MCP vs. traditionele aanpakken

Met deze tools kan je AI-assistent je helpen om:

• Frontends iteratief te bouwen door je agent bij elke stap screenshots te laten maken
• Gebruikersflows end-to-end te testen, zoals aanmelden, door functies navigeren en verifiëren dat elke stap werkt
• Issues te debuggen door consolefouten en netwerkverzoeken te controleren zonder DevTools handmatig te openen
• Visuele documentatie te automatiseren door screenshots te maken van verschillende pagina’s of appstaten
• Data te extraheren van webpagina’s door JavaScript direct in de paginacontext uit te voeren

Dit alles wordt aangestuurd via commando’s in natuurlijke taal in plaats van Puppeteer-scripts te schrijven.

Chrome DevTools MCP werkt with Claude Desktop, Cursor, Cline en VSCode Copilot. Omdat het één MCP-server is tussen vele, kun je hem combineren met andere—zoals toegang tot het bestandssysteem, databasetools en API’s—om workflows te bouwen die meerdere tools omvatten.

Chrome DevTools MCP installeren en instellen

Je hebt een paar dingen nodig:

• Node.js en npm geïnstalleerd op je machine
• Een MCP-compatibele AI-codeerassistent (we gebruiken Claude Code in deze tutorial)
• Chrome-browser (Puppeteer regelt dit automatisch, je hoeft niets te configureren)

Basiskennis van browser DevTools is handig, maar niet vereist.

Chrome DevTools MCP installeren

Chrome DevTools MCP draait via de MCP-configuratie van je AI-assistent. De setup verschilt licht per AI-codeerassistent. We laten zien hoe je dit installeert voor Claude Code, maar andere editors zoals Cursor, Cline en VSCode Copilot hebben een vergelijkbare aanpak.

Voor Claude Code voer je dit commando uit in je terminal:

claude mcp add chrome-devtools npx chrome-devtools-mcp@latestMogelijk gemaakt door

Dit commando registreert de Chrome DevTools MCP-server bij Claude Code. De server draait via npx, wat het pakket downloadt en uitvoert zonder permanente installatie. De @latest zorgt dat je de nieuwste versie krijgt.

Na het uitvoeren van het commando start je Claude Code opnieuw om de nieuwe server te laden.

Als je een andere AI-codeerassistent gebruikt

Andere MCP-clients hebben vergelijkbare installatiemethoden—sommige use commando’s, andere gebruiken configuratiebestanden of one-click-installatieknoppen. Raadpleeg de GitHub-pagina van Chrome DevTools MCP voor specifieke instructies voor Cursor, Cline, Gemini CLI, Windsurf en andere ondersteunde clients.

Je setup testen

Laten we met een simpel commando controleren of alles werkt:

Navigate to demo.realworld.io and take a screenshotMogelijk gemaakt door

Je zou het volgende moeten zien:

• Chrome start (je ziet het browservenster, tenzij je headless mode hebt ingesteld)
• De homepage van Conduit laadt
• Je AI-assistent maakt en toont een screenshot

Gaat er iets mis? Controleer dan deze veelvoorkomende oorzaken:

• Node.js-versie: Chrome DevTools MCP vereist Node.js v20.19 of nieuwer
• npm-rechten: Zorg dat npm pakketten kan installeren
• Herstart vereist: Je AI-assistent moet na configuratiewijzigingen opnieuw gestart worden
• Locatie configbestand: Controleer of je het juiste MCP-instellingenbestand voor jouw assistent hebt aangepast

Basis van browserautomatisering

Chrome DevTools MCP geeft je zes kerntools om met webpagina’s te werken. Gebruik navigate_page om URL’s te laden, click om met elementen te interageren, fill en fill_form om tekst in te voeren, hover om hover-effecten te triggeren en take_screenshot om vast te leggen wat je ziet. Deze tools dekken het merendeel van de browsertaken die je tegenkomt.

Navigatie en screenshots

Laten we een pagina laden. Zeg tegen je AI-assistent:

Navigate to demo.realworld.ioMogelijk gemaakt door

De AI gebruikt de tool navigate_page, Chrome opent en de homepage van Conduit laadt. Je ziet het browservenster tenzij je headless mode hebt ingesteld.

Wil je documenteren wat je ziet? Vraag dan gewoon:

Take a screenshot of the homepageMogelijk gemaakt door

De AI legt de huidige pagina vast met take_screenshot en toont je het resultaat. Handig voor visuele documentatie of om te controleren of een pagina er goed uitziet.

Elementinteractie

Je kunt met elk element op de pagina interageren zonder CSS-selectors te schrijven of element-ID’s te inspecteren. Beschrijf gewoon wat je wilt:

Click the Sign in linkMogelijk gemaakt door

De AI begrijpt over welk element je het hebt en klikt erop met de tool click. De aanmeldpagina laadt.

Je kunt ook over elementen hoveren:

Hover over the Sign up linkMogelijk gemaakt door

De AI gebruikt de tool hover. Als er een tooltip of dropdown is, verschijnt die.

Formulieren invullen

Formulieren zijn waar browserautomatisering tijdrovend wordt als je scripts schrijft. Met Chrome DevTools MCP beschrijf je gewoon wat je ingevuld wilt hebben.

Fill one field at a time:
Fill in the email field with [email protected]
Fill in the password field with testpass123
Or fill multiple fields at once:
Fill out the sign-in form with email [email protected] and password testpass123Mogelijk gemaakt door

De AI gebruikt fill_form om alle velden in één keer te verwerken. Zo ziet het ingevulde formulier eruit:

De AI identificeert de juiste invoervelden op basis van jouw beschrijving. Je raakt de HTML niet aan.

Debugging en inspectie

Chrome DevTools MCP geeft je drie kerntools voor debugging: list_console_messages om console-output te bekijken, list_network_requests om netwerkactiviteit te zien en evaluate_script om JavaScript uit te voeren en data van pagina’s te extraheren.

Wanneer je deze tools via je AI-assistent gebruikt, voer je een gesprek. Jij stelt vragen in natuurlijke taal en de AI vertaalt ze achter de schermen naar MCP-toolcalls. 

Zo ziet dat eruit:

De AI-assistent begrijpt je intentie, voert de juiste Chrome DevTools-tools uit en presenteert de resultaten in een leesbaar format. Laten we zien hoe dit in de praktijk werkt.

Console inspecteren

Consolefouten zijn vaak de eerste plek om te kijken als er iets stuk is. In plaats van DevTools handmatig te openen, vraag je je AI-assistent gewoon:

Navigate to demo.realworld.io and check the console for any errorsMogelijk gemaakt door

De AI laadt de pagina en bekijkt de console met list_console_messages. Dit is wat hij vindt:

Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/articles'
from origin 'https://demo.realworld.io' has been blocked by CORS policy
Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/tags'
from origin 'https://demo.realworld.io' has been blocked by CORS policyMogelijk gemaakt door

Deze CORS-fouten (Cross-Origin Resource Sharing)—zijn een browserbeveiligingsfeature die voorkomt dat webpagina’s verzoeken naar andere domeinen doen) en verklaren waarom de pagina “Loading articles…” en “Loading tags…” toont in plaats van echte content:

Je kunt dieper graven door de AI te vragen deze berichten te filteren en te interpreteren:

Are there any errors or warnings on this page?Mogelijk gemaakt door

De AI analyseert de console-output en vertelt je: “Ja, er zijn twee CORS-fouten die API-verzoeken voor artikelen en tags blokkeren.”

Dit geeft je direct inzicht in wat er misgaat zonder de DevTools-console handmatig te openen.

Overzicht van netwerkverzoeken

Consolefouten wijzen vaak op netwerkproblemen. Om te begrijpen wat er met je verzoeken gebeurt, bekijk je de netwerkactiviteit:

Show me what network requests are made on the homepageMogelijk gemaakt door

De AI gebruikt list_network_requests en geeft een lijst terug met alle verzoeken. Je ziet geslaagde verzoeken (CSS, fonts, JavaScript-bestanden) en mislukte:

https://demo.realworld.io/ GET [success - 200]
https://demo.realworld.io/main.css GET [success - 200]
https://demo.realworld.io/main.js GET [success - 200]
https://conduit.productionready.io/api/tags GET [failed - 307]
https://conduit.productionready.io/api/articles?limit=10&offset=0 GET [failed - 307]
https://api.realworld.io/api/tags GET [failed - net::ERR_FAILED]
https://api.realworld.io/api/articles?limit=10&offset=0 GET [failed - net::ERR_FAILED]Mogelijk gemaakt door

Stel vervolgvragen om verder te zoeken:

Are there any failed requests?Mogelijk gemaakt door

De AI filtert de lijst en identificeert het probleem: “Ja, vier API-verzoeken zijn mislukt. Twee gaven 307-redirects terug, en twee faalden volledig met ERR_FAILED.”

Zo spot je snel issues zonder het Netwerk-tabblad handmatig te inspecteren.

JavaScript-evaluatie en data-extractie

Naast het bekijken van console- en netwerkdata kun je ook code direct op de pagina draaien om de status te controleren of informatie te extraheren. Gebruik hiervoor evaluate_script:

Check if any articles are displayed on the homepageMogelijk gemaakt door

De AI draait JavaScript om het aantal article-elementen te tellen:

const articles = document.querySelectorAll('.article-preview');
return articles.length;Mogelijk gemaakt door

Resultaat: “Er worden 0 artikelen weergegeven. De pagina toont ‘Loading articles…’, wat suggereert dat de API-fouten content laden verhinderen.”

Je kunt ook complexere data extraheren:

Get the page title and main heading textMogelijk gemaakt door

De AI evalueert:

return {
 pageTitle: document.title,
 mainHeading: document.querySelector('h1')?.textContent
};Mogelijk gemaakt door

Resultaat: {pageTitle: "Home — Conduit", mainHeading: "conduit"}

Zo kun je paginacontent verifiëren, gestructureerde data extraheren of controleren of dynamische elementen correct geladen zijn. De tools take_screenshot en take_snapshot vullen dit aan door visuele en structurele documentatie vast te leggen wanneer je die nodig hebt.

Deze drie debuggingmogelijkheden werken natuurlijk samen. Begin met consoleberichten om fouten op te sporen, bekijk netwerkverzoeken om te begrijpen wat er misging en gebruik daarna JavaScript-evaluatie om te verifiëren hoe die fouten de pagina beïnvloeden—allemaal via een gesprek met je AI-assistent, zonder van tool te wisselen of inspectiescripts te schrijven.

Websitefrontends bouwen met Chrome DevTools MCP

AI-assistenten kunnen webinterfaces bouwen, maar ze kunnen niet zien wat ze maken. Jij moet dan handmatig screenshots maken en om aanpassingen vragen.

Chrome DevTools MCP verandert dit. De AI maakt zelf screenshots, controleert layouts en herhaalt tot alles goed is.

Laten we een ChatGPT-kloon bouwen met Streamlit. Je hebt hiervoor een OpenAI API-sleutel nodig. Geef die aan je AI-assistent wanneer je de prompt uitvoert, zodat hij kan verifiëren dat de app correct werkt. Hier is de prompt:

Build a ChatGPT clone using Streamlit. Create a clean chat interface
with message history, text input, and OpenAI API integration. Include
a sidebar for API key management and chat management features (Clear
Chat, New Chat, message counter). Use Chrome DevTools MCP to verify
the UI at each step.Mogelijk gemaakt door

De AI maakt de app met een zijbalk en neemt een screenshot om de initiële layout te verifiëren:

De zijbalk bevat invoer voor de API-sleutel, knoppen Clear Chat en New Chat, en een berichtenteller op 0. Met de interface klaar, kijken we of de chatfunctie werkt.

Testen met een simpele vraag:

De chat reageert correct en de teller toont twee berichten (in de volgende screenshot). Maar kan hij ook gesprekken over meerdere beurten aan?

Gesprekscontext testen:

De AI onthoudt de vorige uitwisseling. Vervolgens moeten we de functie Clear Chat verifiëren.

Op de knop Clear Chat klikken:

De chat wordt succesvol gewist en de teller staat weer op 0. 

Een nieuw gesprek starten:

Perfect. De AI bouwde een werkende ChatGPT-kloon, verifieerde bij elke stap het uiterlijk en testte alle functies zonder menselijke tussenkomst.

Dit werkt met elk framework: React, Vue, Svelte, vanilla HTML. De AI verifieert layouts, test interacties en vangt bugs af voordat jij de code ziet.

Conclusie en volgende stappen

Chrome DevTools MCP geeft je browserautomatisering via conversatie. Jij beschrijft wat je wilt en je AI-assistent handelt de technische details af. Geen scripts om te schrijven, geen selectors om te debuggen.

In dit artikel behandelden we de basis: de server installeren, door pagina’s navigeren, formulieren invullen, op elementen klikken en screenshots nemen. Daarna gingen we over op debugging met console-inspectie, netwerkmonitoring en JavaScript-evaluatie. Tot slot zagen we hoe deze tools samen frontends helpen bouwen waarbij de AI kan zien wat hij creëert.

Wat je nu kunt proberen

Begin met navigeren naar een site waar je aan werkt en vraag je AI om te checken op consolefouten of netwerkverzoeken te inspecteren. Als je Claude Code gebruikt, behandelt onze gids met best practices voor Claude Code effectieve promptpatronen voor toolgebruik. Maak screenshots van verschillende staten. Test formulierverzendingen.

Combineer daarna meerdere tools: navigeer naar een pagina, vul een formulier in, verstuur het en leg het resultaat vast. Controleer consoleberichten, geef mislukte netwerkverzoeken weer en voer JavaScript uit om de paginastatus te verifiëren.

Ben je vertrouwd met de basis? Maak dan samen met je AI een kleine UI-component en laat hem bij elke stap de layout verifiëren. Zie hoe hij visuele issues opvangt voordat jij handmatig controleert.

Voor performance-werk gebruik je de performancetools (performance_start_trace, performance_stop_trace, performance_analyze_insight) om laadtijden te profileren en bottlenecks te identificeren. Gebruik emulatietools (emulate_cpu, emulate_network, resize_page) om onder verschillende omstandigheden te testen.

Chrome DevTools MCP is één server tussen vele. Combineer hem met bestandssysteemservers, databasetools of API-integraties om workflows te bouwen die meerdere systemen omvatten. Voor meer MCP-voorbeelden, zie onze Codex CLI MCP-tutorial en Google ADK MCP-tutorial.

Wil je je eigen MCP-servers bouwen? Bekijk dan Building an MCP Server and Client with FastMCP 2.0.