Wat is er nieuw in DevTools (Chrome 152)?

Matthias Rohmer

Gepubliceerd: 25 augustus 2026

Chrome 152 brengt aanzienlijke verbeteringen voor netwerkdebugging met het opnieuw verzenden van verzoeken en inspectie van binaire payloads, aangepaste element-adorners en verbeterde CSS-nesting in Elements, Core Web Vitals voor soepele navigatie in Performance Live Metrics, het exporteren van gestructureerde tabellen in de Console en verbeteringen voor de DevTools MCP-server.

Ontwikkeltools voor agents

De nieuwste versie 1.7.0 van de Chrome DevTools MCP-server bouwt voort op de eerder geïntroduceerde mogelijkheden voor geheugendebugging voor codeeragents zoals Antigravity, Claude, Codex en andere:

• Details van objecten in heapsnapshots ( get_heapsnapshot_object_details ): Bekijk gedetailleerde eigenschappen van JavaScript-objecten, klassenamen en paden die door de garbage collector worden behouden, rechtstreeks vanuit heapsnapshots.
• Native V8-contextfiltering: Filter heap-snapshotobjecten op basis van de native uitvoeringscontext en inspecteer native contexten in snapshotoverzichten.
• Verbeteringen in de stabiliteit en levenscyclus van de daemon: Toevoeging van beperkte bewaartermijn voor netwerkverzoeken per navigatie, validatie van sessie-ID's, waarschuwingen voor versieverschillen tussen CLI en daemon, en een gecontroleerde beëindiging van de worker bij het vrijgeven van de context.

Ga voor meer informatie en om aan de slag te gaan naar de DevTools for agents-repository op GitHub .

Netwerk: Verzoeken bewerken en opnieuw verzenden, inzichten vooraf laden en binaire payload decoderen.

• Fetch- en XHR-verzoeken opnieuw verzenden: Het voormalige contextmenu-item "XHR opnieuw afspelen" heet nu " Opnieuw verzenden ". Het ondersteunt nu alle fetchbare netwerkverzoeken en zet standaardverzoeken om in fetch() -aanroepen, waarbij de volledige herhalingsfunctionaliteit naast XHR behouden blijft. Verzoeken houden ook de uitvoeringscontext en de console-afzender bij en tonen deze.
• Kolom 'Vooraf geladen' en 'Kopiëren als vooraf geladen element': Een nieuwe, speciale kolom 'Vooraf geladen ' geeft aan of een netwerkverzoek is geïnitieerd met behulp van speculatief vooraf laden. U kunt ook met de rechtermuisknop op een verzoek klikken en 'Kopiëren als vooraf geladen element' selecteren om een <link rel="preload"> tag te genereren die u direct in uw HTML kunt plaatsen. Vroege hints worden nu gecategoriseerd onder de kolom 'Initiator' .
• Binaire viewer voor aanvraagpayloads: Het tabblad Payload bevat nu opties voor de decoderingsmethode (Base64, Hex en UTF-8) voor binaire en gecomprimeerde aanvraagpayloads, net als het tabblad Response.
• Vastgezette kolom 'Aanvraagnummer': De kolom 'Aanvraagnummer # is nu vastgezet op de eerste positie in het netwerkgegevensraster voor eenvoudigere raadpleging van aanvragen.
• Filteren op dezelfde site: Zoeken naar domeinen, hostnamen of poorten (bijv. localhost of example.com ) in de netwerkfilterbalk filtert nu nauwkeurig verzoeken binnen dezelfde site.
• Standaard decodering van queryparameters: Query- en formulierparameters in het tabblad Payload worden nu automatisch gedecodeerd voor alle verzoeken.

Chromium-problemen: 40726969 , 41299075 , 40138847 , 40222701 , 525848667 , 507077182 , 498482622 , 520437951 , 40267477

Elementen: Aangepaste elementversieringen, interacties met geneste CSS-ouderselectoren en selectie van pseudo-elementen $0

Het inspecteren en bewerken van webcomponenten en moderne CSS gaat sneller en intuïtiever in het Elementenpaneel :

• Aangepaste element-badge: Aangepaste HTML-elementen (geïdentificeerd door tags met koppeltekens of is="..." attributen voor aangepaste ingebouwde elementen) tonen nu een custom-element -badge in de DOM-structuur.
• Interactie en specificiteit van geneste CSS-ouderselectoren: Wanneer u de muis over ouderselectoren in geneste CSS-regels en overgeërfde geneste regels beweegt, worden overeenkomende elementen op de pagina gemarkeerd en reageert dit op de filteropties van het tabblad Stijlen. Er zijn tooltip-pop-ups met specificiteit toegevoegd voor @nested-declarations regels.
• Selectie van pseudo-elementen via $0 : Door pseudo-elementen zoals ::before of ::after in de Elements DOM-structuur te selecteren, worden deze nu direct gekoppeld aan de consolevariabele $0 voor onmiddellijke JavaScript-inspectie.
• Automatische aanvulling voor text-wrap en <image> -typen: Het deelvenster Stijlen suggereert nu alle trefwoordwaarden voor text-wrap ( wrap , nowrap , balance , pretty , stable ) en vult CSS-eigenschappen <image> -gegevenstypen accepteren automatisch aan.
• Aandacht voor scrollbalken in het Box Model: Het diagram met Box Model-metrieken berekent en toont nu nauwkeurig de afmetingen van contentboxen wanneer elementen zichtbare scrollbalken hebben.

Chromium-problemen: 367440148 , 535517817 , 535522242 , 535523039 , 537724428 , 399305533 , 334984154 , 383355294 , 326260752 , 389342065

Prestaties: Soepele navigatiestatistieken in Live Metrics en aangepaste schermafbeeldingvoorinstellingen.

• Live Metrics-ondersteuning voor soft navigations: De Live Metrics-weergave registreert en rapporteert nu standaard Core Web Vitals (zoals LCP en INP) voor client-side soft navigations in single-page applicaties, dankzij een upgrade naar web-vitals v6.0.0.
• Voorinstellingen voor aangepaste schermafbeeldingen: Configureerbare voorinstellingen voor de grootte en het aantal schermafbeeldingen in het paneel Prestaties zijn beschikbaar voor CDP-tracering, zodat de beeldkwaliteit van de opname binnen het beschikbare geheugen kan worden aangepast.
• console.profileEnd() trace revealer: Door console.profileEnd() in je code of console aan te roepen, wordt de opgenomen trace nu automatisch geopend en weergegeven in het Performance-paneel.
• Samenvatting van aangepaste trackgroepen via de Extensibility API: Prestatietraceringsoverzichten verwerken en presenteren nu aangepaste trackgroepen die zijn geregistreerd met behulp van de Extensibility API.

Chromium-problemen: 514721939 , 490140054 , 536954453 , 535506117

Console: Tabellen exporteren als Markdown of CSV met bescherming tegen neveneffecten

• Consoletabellen kopiëren als Markdown of CSV: Tabellen die zijn gelogd met console.table() kunnen nu rechtstreeks naar uw klembord worden gekopieerd als opgemaakte Markdown-tabellen of CSV-gegevens via het contextmenu.
• Bescherming tegen neveneffecten bij evaluatie: De hover-evaluatie van de debugger beschermt nu tegen expressies die new , getagde template literals, dynamische ` import() en delete operatoren bevatten, waardoor onbedoelde statuswijzigingen tijdens het pauzeren worden voorkomen.

Chromium-problemen: 40924951 , 40133606

Andere hoogtepunten

Een overzicht van opmerkelijke verbeteringen in andere DevTools-subsystemen:

• Bronnen : Snel openen geeft nu prioriteit aan lokale werkruimtebestanden met een aanzienlijke scoreverhoging, waardoor werkruimtebestanden boven netwerkbronnen komen te staan. (Chromium-probleem: 40260136 )
• Geheugen : De weergave 'Heap Snapshot Summary' toont nu het totale aantal objecten naast de geaggregeerde ondiepe groottes voor geselecteerde typen, en bevat native filters voor de uitvoeringscontext. (Chromium-probleem: 497855658 )
• Toepassing : Het advertentiepaneel heeft de schakelaar voor het markeren van advertenties direct in het paneel geplaatst, klikbare iframe-element-ID's voor advertenties toegevoegd om frames in de hiërarchie weer te geven en een tabel met statistieken per frame geïntroduceerd. (Chromium-probleem: 514957134 )
• Toepassing : De sectie ' Sitegegevens wissen' in het deelvenster 'Opslag' is opnieuw ontworpen tot een uniforme, geconsolideerde groep (Chromium-probleem: 375867286 ) en dubbele cache-opslagitems na het herstellen van de back-up/forward-cache zijn opgelost (Chromium-probleem: 484693244 ).
• Extensies : Asynchrone methoden in chrome.devtools.panels retourneren nu standaard JavaScript Promises wanneer ze zonder callback worden aangeroepen. (Chromium-probleem: 496604551 )
• Instellingen : Splits de standaard netwerkbeperkingsinstellingen en aangepaste beperkingsconfiguraties in aparte secties. (Chromium-probleem: 342409451 )
• Lighthouse : De meegeleverde Lighthouse-module is bijgewerkt naar versie 13.4.1 . (Chromium-probleem: 40543651 )
• Problemen : DevTools geeft een waarschuwing wanneer een afbeelding die loading="lazy" gebruikt, geen expliciete width of height heeft.
• Apparaatmodus : Het zoomniveaumenu is vereenvoudigd met een uniforme optie 'Aanpassen aan venster' en de optie 'Apparaatkader weergeven' is uitgeschakeld wanneer er geen kaderafbeeldingen beschikbaar zijn.

Toegankelijkheidsverbeteringen

Chrome 152 bevat de volgende verbeteringen op het gebied van toegankelijkheid:

• Elementen en toegankelijkheid : Er zijn contextmenu-opties toegevoegd om naadloos te schakelen tussen de DOM-structuur van elementen en de toegankelijkheidsweergave, plus 'Scrollen om in beeld te brengen' voor toegankelijkheidsknooppunten. (Chromium-problemen: 417929842 )
• Toegankelijkheid : Ondersteuning toegevoegd voor het kopiëren van knooppunten en subbomen in de toegankelijkheidsstructuur als platte tekst via het contextmenu. (Chromium-probleem: 417929842 )
• Elementen : De kleuren voor zoekresultaten met laag contrast in het Elementen-paneel zijn gecorrigeerd wanneer het programma in de donkere modus wordt uitgevoerd. (Chromium-probleem: 491718898 )
• Navigatie : Wanneer je DevTools loskoppelt naar een apart venster of terugkoppelt naar het tabblad, wordt de focus niet langer automatisch naar de hoofdmenuknop verplaatst.
• Instellingen : Beschrijvende, toegankelijke context toegevoegd aan de knoppen "Meer weergeven" en "Minder weergeven" in de AI-instellingen.