Wat is er nieuw in DevTools (Chrome 149)?

Gepubliceerd: 2 juni 2026

Chrome 149 brengt belangrijke verbeteringen aan de AI-ondersteuning, introduceert experimentele WebMCP-debugtools in het toepassingspaneel en breidt de ondersteuning voor codeaanvulling uit naar CSS.

Ontwikkeltools voor agents

De MCP-server en de CLI van Chrome DevTools voor agents zijn nu officieel stabiel! Lees de volledige aankondiging hier .

De belangrijkste nieuwe functies en tools die zijn toegevoegd aan versie 1.1.1 zijn onder andere:

  • Aangepaste tools van derden, die via de pagina toegankelijk zijn: pagina's kunnen nu via JavaScript aangepaste debugtools definiëren, die vindbaar en aanroepbaar zijn door DevTools voor agents.
  • WebMCP-debugging: DevTools voor agents kunnen nu WebMCP-tools weergeven en uitvoeren .
  • Emulatie van aangepaste HTTP-headers: Voegt ondersteuning voor HTTP-headers (zoals authenticatietokens of aangepaste gebruikersagenten) toe aan de emulatietool.

Tools van derden en WebMCP-debugging zijn nog experimenteel en niet standaard ingeschakeld. Raadpleeg de toolreferentie voor informatie over het gebruik ervan. We zullen meer documentatie op developer.chrome.com publiceren zodra deze functies klaar zijn voor productiegebruik.

Voor de meest recente updates over DevTools voor agents en om bij te dragen, ga naar de GitHub-repository . Begin met onze documentatie of leer meer over de uitgebreide Google I/O-videosessie ' Geef je AI-codeerworkflow een boost met Chrome DevTools voor agents' .

AI-ondersteuning

Het AI-assistentiepaneel heeft een aanzienlijke update van de gebruikersinterface gekregen en is voorzien van nieuwe tools om de interactie te verbeteren en dieper inzicht in webpagina's te bieden:

  • Agent-handleiding: AI-ondersteuning geeft nu widgets rechtstreeks weer in de chatinterface in plaats van platte tekst in Markdown. Deze widgets tonen essentiële webgegevens en gerelateerde inzichten, LCP-elementen, een LCP-analyse, activiteit in bottom-up threads en meer. Een link in de widget brengt u naar de bron van deze informatie in DevTools.
  • Kopiëren naar codeerprogramma : Gesprekken eindigen nu met een speciale knop waarmee je het gesprek kunt kopiëren, samengevat als een prompt of als het volledige gesprek, zodat je het in je favoriete codeerprogramma kunt plakken.
  • Verbeterde mogelijkheden : AI-assistentie heeft nu toegang tot Lighthouse en gerelateerde inzichten, waardoor uw pagina holistisch kan worden geanalyseerd en gericht advies kan worden gegeven.
  • Verbeterde reacties : Dankzij de Gemini 3-processor en verfijnde inleidingen geeft de AI-assistent beknoptere en meer bruikbare antwoorden.
  • Verbeterde navigatie: U kunt nu door uw eerdere chatberichten navigeren met de pijltoetsen omhoog en omlaag , waardoor u snel en intuïtief eerdere vragen kunt verfijnen of opnieuw kunt uitvoeren.
AI-ondersteuning bij de vraag "Hoe kan ik de prestaties van deze pagina verbeteren?" op de Astro.js-demosite DevTools Times , met een demonstratie van de Agent-walkthrough, widgets en het kopiëren van code naar Antigravity.

Laat ons weten wat je ervan vindt door een reactie achter te laten op het speciale feedbackformulier . In plaats van de functie 'Kopiëren naar codeeragent' zullen we de ondersteuning voor geautomatiseerde stijlcorrecties via AI-assistentie met Chrome 152 stopzetten.

WebMCP

Deze release introduceert experimentele WebMCP-debugtools in de zijbalk van het toepassingspaneel . WebMCP (Web Model Context Protocol) stelt webpagina's in staat tools te registreren die door bezoekende LLM-agents kunnen worden gebruikt. Lees meer over de voorgestelde standaard in onze documentatie .

De nieuwe debugtools stellen ontwikkelaars in staat om:

  • Inspecteer de client-side tools en hun schema's.
  • Handmatig tools uitvoeren met aangepaste parameters.
  • Volg en filter actieve of in behandeling zijnde gebeurtenissen met betrekking tot het aanroepen van tools.
  • Monitor de uitvoeringsstatus en inspecteer de geretourneerde gegevens.

WebMCP is een voorgestelde webstandaard die zich momenteel in een vroege previewfase bevindt. Schakel de vlaggen #devtools-webmcp-support en #enable-webmcp-testing in op chrome://flags om te beginnen met experimenteren.

De nieuwe WebMCP-debugtools in het paneel 'Applicaties' van de ontwikkelaarstools.
De nieuwe WebMCP-debugtools inspecteren de demosite L'Atelier en tonen eerdere toolaanroepen, beschikbare tools en filteropties.

Chromium-problemen: 494516094

Codeaanvulling voor CSS

Het tabblad Stijlen biedt nu codeaanvulling voor CSS met Gemini, als aanvulling op de ondersteuning voor de panelen Console en Bronnen . Schakel code-suggesties in via Instellingen > AI-innovaties > Code-suggesties .

Dit helpt je om te experimenteren met complexere combinaties van CSS-eigenschappen, zoals verlopen of schaduwen, zonder de exacte syntax te hoeven onthouden. Of om snel grid- en flex-layouts te bouwen met behulp van meerdere gerelateerde eigenschappen.

De werkbalk onderaan het tabblad Stijlen toont de status via een laadindicator. Suggesties worden bijgewerkt of gewist terwijl u typt, zodat de door AI gegenereerde tekst relevant blijft voor uw handmatige bewerkingen.

APCA-richtlijnen voor kleurcontrast zijn gepromoveerd tot stabiele richtlijnen.

De Advanced Perceptual Contrast Algorithm (APCA) contrastcalculator heeft de experimentele fase officieel verlaten en is nu beschikbaar als standaardvoorkeursinstelling. APCA vervangt de oude AAA/AA-contrastrichtlijnen door een modern perceptueel contrastmodel dat is geoptimaliseerd voor moderne beeldschermen en tekstweergave.

Je kunt de APCA-richtlijnen nu in- of uitschakelen met behulp van het selectievakje onder Instellingen > Voorkeuren > Elementen > APCA-contrastrichtlijnen inschakelen .

De APCA-algoritmeschakelaar in de DevTools-instellingen en het nieuwe algoritme dat van kracht is in het tabblad Stijlen.
De APCA-algoritmeschakelaar in de DevTools-instellingen en het nieuwe algoritme dat van kracht is in het tabblad Stijlen.

Dynamische apparaatmodus gebruikersagent

De responsieve apparaatmodus gebruikte voorheen een vastgelegde User Agent-string (Android 6.0; Nexus 5). Hierdoor functioneerden moderne websites minder goed of werden compatibiliteitsmodi geactiveerd, omdat het gerapporteerde besturingssysteem als meer dan tien jaar oud werd herkend.

De vastgelegde user agent is vervangen door een dynamische heuristiek die automatisch wordt bijgewerkt op basis van het huidige kalenderjaar. Hierdoor rapporteert DevTools altijd een plausibele, moderne omgeving zonder dat handmatig onderhoud nodig is.

Andere hoogtepunten

Een verzameling kleinere verbeteringen en bugfixes in deze release:

  • Console : Er is een knop ' Alles inklappen/uitklappen' toegevoegd aan de werkbalk van het consolepaneel, waarmee alle actieve consolegroepen en stacktraces snel tegelijk kunnen worden uit- of ingeklapt. ( 427657550 )
  • Applicatie : Klikbare hyperlinks hebben de statische tekst voor de velden van de opslagbuckets in de metagegevensweergave van de applicatie vervangen. Door op een bucketlink te klikken, wordt automatisch naar die specifieke bucket in het zijpaneel 'Opslagbuckets' genavigeerd en deze wordt gemarkeerd. ( 435311130 )
  • Toepassing : Volledige ondersteuning voor opslaginspectie voor Service Workers is opnieuw ingeschakeld na het oplossen van een crashprobleem. ( 406991275 , 466134219 )
  • Applicatie : Ondersteuning toegevoegd voor het inspecteren van prerendering-events voor form_submission binnen het Preloading-paneel. ( 346555939 , 488078903 )
  • Toepassing : Implementatie van apparaatgebonden sessiegegevensbeheer (DBSC), waardoor ontwikkelaars actieve sessies kunnen wissen of verwijderen via het contextmenu of door op de Delete of Backspace -toets te drukken. ( 471017387 )
  • Elementen : Markeringen op DOM-nodes die verborgen problemen in het paneel Problemen weergeven, worden nu dynamisch bijgewerkt (verschijnen of verdwijnen) als reactie op acties van het probleemfilter. ( 40272723 )
  • Netwerk : Server-Sent Events (SSE) worden nu volledig geserialiseerd en opgenomen in HAR-exports, waardoor doorlopende, live gebeurtenisstroomopnames kunnen worden opgeslagen en opnieuw geïmporteerd in DevTools. ( 494294071 )
  • Prestaties : De tracking van Core Web Vitals in de Live Metrics-weergave is gecorrigeerd, zodat de tracking strikt gekoppeld is aan de primaire frame-uitvoeringscontext. Dit voorkomt dat dynamische iframe-wisselingen de statistieken resetten. ( 494350655 )
  • Prestaties : web-vitals is geüpgraded naar versie 5.2.0, waarmee native upstream-fixes voor geheugenlekken tijdens INP-monitoring zijn geïntroduceerd. ( 484342204 )