Gepubliceerd: 23 september 2025
Vandaag lanceren we een openbare preview voor de nieuwe Chrome DevTools Model Context Protocol (MCP)-server, waarmee AI-codeerassistenten kunnen profiteren van de kracht van Chrome DevTools.
Codeeragenten worden geconfronteerd met een fundamenteel probleem: ze kunnen niet zien wat de code die ze genereren daadwerkelijk doet wanneer deze in de browser wordt uitgevoerd. Ze programmeren in feite met een blinddoek op.
De Chrome DevTools MCP-server brengt hier verandering in. AI-codeerassistenten kunnen webpagina's rechtstreeks in Chrome debuggen en profiteren van de debugmogelijkheden en prestatie-inzichten van DevTools. Dit verbetert hun nauwkeurigheid bij het identificeren en oplossen van problemen.
Ontdek zelf hoe het werkt:
Wat is het Model Context Protocol (MCP)?
Het Model Context Protocol (MCP) is een open-sourcestandaard voor het verbinden van grote taalmodellen (LLM's) met externe tools en gegevensbronnen. De Chrome DevTools MCP-server voegt foutopsporingsmogelijkheden toe aan uw AI-agent.
De Chrome DevTools MCP-server biedt bijvoorbeeld een tool genaamd performance_start_trace . Wanneer een LLM de taak krijgt om de prestaties van uw website te onderzoeken, kan hij of zij deze tool gebruiken om Chrome te starten, uw website te openen en Chrome DevTools te gebruiken om een prestatietracering vast te leggen. De LLM kan de prestatietracering vervolgens analyseren om mogelijke verbeteringen voor te stellen. Met behulp van het MCP-protocol kan de Chrome DevTools MCP-server uw coderingsagent nieuwe debugmogelijkheden bieden, waardoor deze beter websites kan bouwen.
Wilt u meer weten over hoe MCP werkt, raadpleeg dan de MCP-documentatie .
Waar kun je het voor gebruiken?
Hieronder staan een paar voorbeeldprompts die u kunt uitproberen in de AI-assistent van uw keuze, zoals Gemini CLI.
Controleer codewijzigingen in realtime
Genereer een oplossing met uw AI-agent en verifieer vervolgens automatisch met Chrome DevTools MCP of de oplossing werkt zoals bedoeld.
Probeer het volgende:
Verify in the browser that your change works as expected.
Netwerk- en consolefouten diagnosticeren
Geef uw agent de mogelijkheid netwerkverzoeken te analyseren om CORS-problemen te ontdekken of consolelogboeken te controleren om te begrijpen waarom een functie niet werkt zoals verwacht.
Probeer het volgende:
A few images on localhost:8080 are not loading. What's happening?
Simuleer gebruikersgedrag
Navigeer, vul formulieren in en klik op knoppen om bugs te reproduceren en complexe gebruikersstromen te testen, terwijl u tegelijkertijd de runtime-omgeving inspecteert.
Probeer het volgende:
Why does submitting the form fail after entering an email address?
Debug live-stijl- en lay-outproblemen
Vraag uw AI-agent om verbinding te maken met een live pagina, de DOM en CSS te inspecteren en ontvang concrete suggesties om complexe lay-outproblemen, zoals overlopende elementen, op te lossen op basis van live gegevens van de browser.
Probeer het volgende:
The page on localhost:8080 looks strange and off. Check what's happening there.
Automatiseer prestatie-audits
Geef uw AI-agent de opdracht een prestatietracering uit te voeren, de resultaten te analyseren en specifieke prestatieproblemen, zoals hoge LCP-waarden, te onderzoeken.
Probeer het volgende:
Localhost:8080 is loading slowly. Make it load faster.
Raadpleeg onze gereedschapsreferentiedocumentatie voor een lijst met alle beschikbare gereedschappen.
Aan de slag
Om dit uit te proberen, voegt u de volgende configuratie-invoer toe aan uw MCP-client:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Om te controleren of het werkt, voert u de volgende prompt uit in uw coderingsagent:
Please check the LCP of web.dev.
Raadpleeg de Chrome DevTools MCP-documentatie op GitHub voor meer informatie.
Doe mee
We bouwen Chrome DevTools MCP stapsgewijs verder uit, te beginnen met de openbare previewversie die we vandaag uitbrengen. We zijn actief op zoek naar feedback van jou en de community over welke mogelijkheden we als volgende moeten toevoegen. Of je nu een ontwikkelaar bent die AI-codeerassistenten gebruikt of een leverancier die de volgende generatie AI-ontwikkeltools bouwt, jouw inzichten zijn van onschatbare waarde. Als er iets ontbreekt of niet werkt, meld het dan op GitHub .