Laat je codeeragent je browsersessie debuggen met Chrome DevTools MCP.

Sebastian Benz

Alex Rudenko

Gepubliceerd: 11 december 2025

We hebben een verbetering voor de Chrome DevTools MCP-server uitgebracht waar veel van onze gebruikers om hebben gevraagd: de mogelijkheid voor codeeragents om rechtstreeks verbinding te maken met een actieve browsersessie.

Dankzij deze verbetering kunnen codeeragenten het volgende:

1. Een bestaande browsersessie hergebruiken: Stel je voor dat je codeeragent een probleem wil oplossen waarvoor een aanmelding vereist is. Je codeeragent heeft nu direct toegang tot je huidige browsersessie, zonder dat een extra aanmelding nodig is.
2. Toegang tot actieve debugsessies: Codeerders hebben nu toegang tot een actieve debugsessie in de DevTools-interface. Als u bijvoorbeeld een mislukte netwerkaanvraag ontdekt in het netwerkpaneel van Chrome DevTools, selecteert u de aanvraag en vraagt ​​u uw codeerder om deze te onderzoeken. Hetzelfde werkt met elementen die zijn geselecteerd in het paneel Elementen. We zijn erg enthousiast over deze nieuwe mogelijkheid om naadloos te schakelen tussen handmatig en AI-ondersteund debuggen.

Zie het in actie:

De automatische verbindingsfunctie is een aanvulling op de bestaande manieren waarop de Chrome DevTools MCP verbinding kan maken met een Chrome-instantie. Houd er rekening mee dat u nog steeds:

• Start Chrome met een serverspecifiek gebruikersprofiel voor Chrome DevTools MCP (momenteel de standaardinstelling).
• Maak verbinding met een actieve Chrome-instantie via een externe debugpoort.
• Voer meerdere Chrome-instanties afzonderlijk uit, waarbij elke instantie in een tijdelijk profiel draait.

Hoe het werkt

We hebben een nieuwe functie toegevoegd aan Chrome M145 (momenteel in Canary) waarmee de Chrome DevTools MCP-server een externe debugverbinding kan aanvragen. Deze nieuwe workflow bouwt voort op de bestaande mogelijkheden voor externe debugging in Chrome . Standaard zijn externe debugverbindingen uitgeschakeld in Chrome. Ontwikkelaars moeten de functie eerst expliciet inschakelen via chrome://inspect#remote-debugging .

Wanneer de Chrome DevTools MCP-server is geconfigureerd met de optie --autoConnect , maakt de MCP-server verbinding met een actieve Chrome-instantie en vraagt ​​een externe debugsessie aan. Om misbruik door kwaadwillenden te voorkomen, toont Chrome elke keer dat de Chrome DevTools MCP-server een externe debugsessie aanvraagt ​​een dialoogvenster aan de gebruiker om toestemming te vragen voor de externe debugsessie. Bovendien wordt tijdens een actieve debugsessie de banner "Chrome wordt bestuurd door geautomatiseerde testsoftware" bovenaan het scherm weergegeven.

Aan de slag

Om de nieuwe mogelijkheden voor foutopsporing op afstand te gebruiken, moet u eerst foutopsporing op afstand inschakelen in Chrome en vervolgens de Chrome DevTools MCP-server configureren om de nieuwe functie voor automatische verbinding te gebruiken.

Stap 1: Externe foutopsporing instellen in Chrome

Volg de onderstaande stappen om foutopsporing op afstand in te stellen in Chrome:

1. Ga naar chrome://inspect/#remote-debugging om debuggen op afstand in te schakelen.
2. Volg de instructies in het dialoogvenster om inkomende debugverbindingen toe te staan ​​of te weigeren.

Stap 2: Configureer de Chrome DevTools MCP-server om automatisch verbinding te maken met een actieve Chrome-instantie.

Om de chrome-devtools-mcp server te verbinden met de actieve Chrome-instantie, gebruikt u het opdrachtregelargument --autoConnect voor de ingestelde MCP-server.

Het volgende codefragment is een voorbeeldconfiguratie voor gemini-cli:

{
   "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--channel=canary"
      ]
    }
  }
}

Stap 3: Test je configuratie

Open nu gemini-cli en voer de volgende opdracht uit:

Check the performance of https://developers.chrome.com

De Chrome DevTools MCP-server probeert verbinding te maken met uw actieve Chrome-installatie. Er verschijnt een dialoogvenster waarin om gebruikerstoestemming wordt gevraagd:

Als je op ' Toestaan' klikt, opent de Chrome DevTools MCP-server developers.chrome.com en maakt een prestatietrace.

Voor volledige instructies, bekijk de README op GitHub .

Laat je codeeragent je debugsessie overnemen.

Doordat je verbinding kunt maken met een live Chrome-instantie hoef je niet te kiezen tussen automatisering en handmatige bediening. Je kunt DevTools zelf gebruiken of een debugtaak overlaten aan je codeeragent. Als je een probleem op je website ontdekt, kun je DevTools openen om te kijken welk element het probleem veroorzaakt. Als je wilt dat je codeeragent het probleem oplost, kan dat nu met Chrome DevTools MCP Server. Je kunt het element in het paneel 'Elementen' selecteren en de codeeragent vragen het probleem te onderzoeken.

Hetzelfde geldt voor het netwerkpaneel. U kunt een netwerkverzoek selecteren en uw codeerder vragen dit te onderzoeken.

Maar dit is slechts een eerste stap. We zijn van plan om steeds meer paneldata beschikbaar te stellen aan codeerders via de Chrome DevTools MCP Server. Blijf op de hoogte!