Gepubliceerd: 23 september 2025
Vandaag lanceren we een openbare preview van de nieuwe Chrome DevTools Model Context Protocol (MCP)-server , waarmee de kracht van Chrome DevTools beschikbaar komt voor AI-codeerassistenten.
Programmeeragenten staan voor 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 voor.
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-source standaard voor het verbinden van grote taalmodellen (LLM's) met externe tools en databronnen. De Chrome DevTools MCP-server voegt debugmogelijkheden 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 deze tool Chrome starten, uw website openen en Chrome DevTools gebruiken om een prestatietrace vast te leggen. De LLM kan de prestatietrace vervolgens analyseren om mogelijke verbeteringen voor te stellen. Met behulp van het MCP-protocol kan de Chrome DevTools MCP-server nieuwe debugmogelijkheden aan uw codeeragent toevoegen, waardoor deze beter in staat is om websites te bouwen.
Wil je meer weten over hoe MCP werkt? Raadpleeg dan de MCP-documentatie .
Waarvoor kun je het gebruiken?
Hieronder volgen enkele voorbeeldopdrachten 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 controleer vervolgens automatisch met Chrome DevTools MCP of de oplossing naar behoren werkt.
Aanwijzing om te proberen:
Verify in the browser that your change works as expected.
Diagnoseer netwerk- en consolefouten
Geef uw agent de mogelijkheid om netwerkverzoeken te analyseren en CORS-problemen op te sporen, of om consolelogboeken te inspecteren om te begrijpen waarom een functie niet naar behoren werkt.
Aanwijzing om te proberen:
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 je tegelijkertijd de runtime-omgeving inspecteert.
Aanwijzing om te proberen:
Why does submitting the form fail after entering an email address?
Los problemen op met live styling en lay-out.
Vraag je AI-agent om verbinding te maken met een live pagina, de DOM en CSS te inspecteren en concrete suggesties te geven voor het oplossen van complexe lay-outproblemen, zoals overlopende elementen, op basis van live gegevens uit de browser.
Aanwijzing om te proberen:
The page on localhost:8080 looks strange and off. Check what's happening there.
Automatiseer prestatieaudits
Geef je AI-agent de opdracht om een prestatietrace uit te voeren, de resultaten te analyseren en specifieke prestatieproblemen zoals hoge LCP-waarden te onderzoeken.
Aanwijzing om te proberen:
Localhost:8080 is loading slowly. Make it load faster.
Raadpleeg onze toolreferentiedocumentatie voor een lijst van alle beschikbare tools.
Aan de slag
Om dit uit te proberen, voegt u de volgende configuratie-instelling 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 opdracht uit in uw codeeromgeving:
Please check the LCP of web.dev.
Voor meer informatie kunt u de Chrome DevTools MCP-documentatie op GitHub raadplegen.
Doe mee!
We bouwen Chrome DevTools MCP stapsgewijs uit, te beginnen met de publieke preview-versie die we vandaag uitbrengen. We zijn actief op zoek naar feedback van jullie en de community over welke functionaliteiten we als volgende zouden moeten toevoegen. Of je nu een ontwikkelaar bent die AI-codeerassistenten gebruikt of een leverancier die de volgende generatie AI-ontwikkeltools bouwt, jullie inzichten zijn van onschatbare waarde. Als er iets ontbreekt of niet werkt, meld dit dan via GitHub .