Een betrouwbaardere en productievere Chrome DevTools
In deze versie gaf Chrome DevTools prioriteit aan productkwaliteit. Dit omvatte het aanpakken van een breed scala aan bekende problemen, van langdurige visuele problemen, problemen met de bruikbaarheid en inconsistenties in het ontwerp tot prestatie- en functionele problemen. In totaal hebben we het aantal openstaande problemen met 27% verminderd.
We hebben eindelijk een aantal jaren oude problemen aangepakt, maar we hebben ook verbeteringen aangebracht in nieuwere functies, bijvoorbeeld in het Prestatiepaneel en de AI-ondersteuning . Het resultaat is een aanzienlijk verbeterde ontwikkelaarservaring over de hele linie.
Achter de schermen hebben we hard gewerkt aan het verbeteren van onze testdekking, complexe testfouten onderzocht, tests gemigreerd naar robuustere fundamenten en bugs die we onderweg ontdekten, opgelost. We zijn erin geslaagd het aantal testgerelateerde problemen met 54% te verminderen.
Wij hopen dat u deze talrijke subtiele oplossingen en verbeteringen in de verschillende panelen zult ervaren, waardoor uw dagelijkse debug- en ontwikkelingsworkflows soepeler, betrouwbaarder en productiever worden.
Upload afbeeldingen met AI-ondersteuning voor styling
Om extra visuele context aan uw prompts te geven, kunt u nu niet alleen automatisch schermafbeeldingen maken , maar ook willekeurige afbeeldingen uploaden naar uw chats met Gemini in het AI-assistentiepaneel .
Begin uw gesprek vanuit het Elementenpaneel door een DOM-element te selecteren en te klikken Vraag AI , zodat het element wordt gespecificeerd als conversatiecontext . Klik vervolgens op Afbeelding toevoegen in het invoerveld.
Voeg aanvraagheaders toe aan de tabel in Netwerk
In het paneel Netwerk kunt u nu met de rechtermuisknop op een kolomnaam in de tabel met aanvragen klikken en meerdere aanvraagheaders selecteren om ze als kolommen toe te voegen.
Chromium-probleem: 397481040 .
Bekijk de hoogtepunten van Google I/O 2025
Als u dat nog niet gedaan hebt, probeer dan de nieuwe belangrijke Chrome DevTools-functies die tijdens Google I/O 2025 zijn uitgelicht, waaronder maar niet beperkt tot:
- Bronnen : Koppel een werkruimtemap en sla de wijzigingen op in uw bronbestanden .
- Gemini-aangedreven :
Bekijk ook de nieuwe Prestatie-inzichten : Gedupliceerde JavaScript en Verouderde JavaScript .
Diverse hoogtepunten
Dit zijn enkele van de vele opvallende oplossingen en verbeteringen in deze release:
- Toepassing : Er is nu een bevestigingsdialoog om de IndexedDB-objectopslag te wissen, omdat dit een onomkeerbare actie is ( crbug.com/326987147 ).
- Bronnen : Logboekpunten en voorwaardelijke breekpuntbadges naast coderegels tonen nu bij het zweven een tooltip met de bijbehorende logboekmelding of voorwaarde ( crbug.com/40266230 ).
Prestatie :
- Het inzicht in 'Veroorzakers van lay-outverschuiving' toont nu koppelingen naar afbeeldingen die niet de juiste grootte hebben ( crbug.com/416449602 ).
- Het LCP-verzoekdetectie- inzicht toont nu de vertraging bij het laden van afbeeldingen na het vroegste startpunt.
- Beperking : de verouderde indeling van beperkingsinstellingen die sommige gebruikers lokaal hadden opgeslagen, is opgelost.
- Gebeurtenislogboek : Filteren is sneller geworden ( crbug.com/40783421 ).
Animaties : voorbeeldschermafbeeldingen zijn verouderd, omdat klikken om een voorbeeld van een animatiegroep te bekijken een vergelijkbare en betere ervaring biedt ( crbug.com/330179643 ).
Toegankelijkheid :
- Aria-labels toegevoegd aan de zijbalk Bronnen > DOM-onderbrekingspunten , indien aanwezig.
- Shift + Tab- toetsenbordnavigatie binnen het Live-expressietekstveld in de console is hersteld ( crbug.com/408398435 , crbug.com/420344137 ).
- Instellingen ondersteunt nu sneltoetsen voor inzoomen/uitzoomen/resetten: Cmd/Ctrl + +/-/0 ( crbug.com/41484555 ).
- Elementen > Stijlen : CSS-hint- en waarschuwingspictogrammen ( crbug.com/40706851 ) en Hoekklok zijn nu met toetsenbordfocus te gebruiken ( crbug.com/401212624 , crbug.com/401213524 ).
Download de previewkanalen
Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!
Neem contact op met het Chrome DevTools-team
Gebruik de volgende opties om nieuwe functies, updates of iets anders met betrekking tot DevTools te bespreken.
- Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
- Meld een DevTools-probleem met Meer opties > Help > Meld een DevTools-probleem in DevTools.
- Tweet naar @ChromeDevTools .
- Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .
Wat is er nieuw in DevTools
Een lijst met alles wat in de serie Wat is er nieuw in DevTools is behandeld.
- DevTools MCP-serverupdates
- Verbeterde trace-deling
- Ondersteuning voor @starting-style
- Editorwidget voor weergave: metselwerk
- Vuurtoren 13
- Code suggesties van Gemini
- Verbeteringen voor de DevTools MCP-server
- Snellere toegang tot AI-assistentie
- Debug de volledige prestatietracering met Gemini
- Wissel lade-oriëntatie
- Google Developer Programma
- Diverse hoogtepunten
- Chrome DevTools (MCP) voor uw AI-agent
- Debug de netwerkafhankelijkheidsboom met Gemini
- Exporteer uw chats met Gemini
- Blijvende spoorconfiguratie in het Prestatiepaneel
- Filter IP-beveiligde netwerkverzoeken
- Elementen > tabblad Lay-out voegt ondersteuning voor metselwerklay-out toe
- Vuurtoren 12.8.2
- Diverse hoogtepunten
- Debug meer inzichten met Gemini
- De 'Save-Data'-header in 'Netwerkvoorwaarden' emuleren
- Bekijk de basislijnstatus in een CSS-eigenschapstooltips
- Formulierfactoren in hints van gebruikersagentclients overschrijven
- Vuurtoren 12.8.0
- Diverse hoogtepunten
- Een betrouwbaardere en productievere Chrome DevTools
- Upload afbeeldingen met AI-ondersteuning voor styling
- Voeg aanvraagheaders toe aan de tabel in Netwerk
- Bekijk de hoogtepunten van Google I/O 2025
- Diverse hoogtepunten
- Verbeteringen aan het prestatiepaneel
- Vooraf verbonden oorsprongen in inzicht in 'Netwerk afhankelijkheidsboom'
- Serverrespons- en omleidingstijden in 'Documentaanvraaglatentie'-inzicht
- Omleidingen in Overzicht van netwerkverzoeken
- Minder ruis in de prestatietracering
- Verouderde 'JavaScript-voorbeelden uitschakelen'
- Geolocatienauwkeurigheidsparameter in sensoren
- Verbeteringen aan het elementenpaneel
- Debug complexe CSS-waarden eenvoudiger
- @function-ondersteuning in Elementen > Stijlen
- Verbeteringen aan het netwerkpaneel
- heeft-aanvraag-header filter
- Directe sockets in geïsoleerde web-apps
- Diverse hoogtepunten
- Toegankelijkheid
- Google I/O 2025-editie
- Wijzig en bewaar CSS-wijzigingen in uw werkruimte met Gemini
- Verbind een werkruimtemap en sla de wijzigingen op in uw bronbestanden
- Vraag Gemini naar prestatie-inzichten
- Prestatiebevindingen annoteren met Gemini
- Voeg screenshots toe aan je chats met Gemini
- Nieuwe inzichten in het Prestatiepaneel
- Gedupliceerde JavaScript
- Legacy JavaScript
- Speculaties ondersteunen nu regeltags
- Vuurtoren 12.6.0
- Diverse hoogtepunten
- Toegankelijkheid
- Verbeteringen aan het prestatiepaneel
- Nieuwe prestatie-inzichten
- Klik om te markeren
- Servertimings in Overzicht van netwerkverzoeken
- Cookies filteren in 'Privacy en beveiliging'
- Afmetingen in kB-eenheden in tabellen over panelen
- Autocomplete ondersteunt corner-shape en corner-*-shape in Elementen > Stijlen
- Experimenteel: Problemen met elementen en kenmerken in DOM markeren
- Vuurtoren 12.5.0
- Diverse hoogtepunten
- Verbeteringen aan het prestatiepaneel
- Oorsprong- en scriptkoppelingen voor profiel- en functieaanroepen in Prestatie
- LCP-veldgegevensondersteuning per fase
- Inzicht in netwerkafhankelijkheidsboom
- Duur in plaats van totaal en eigen tijd in Samenvatting
- Zwaarste stapelmarkering
- Verbeterde lege toestanden voor verschillende panelen
- Toegankelijkheidsboomweergave in Elementen
- Vuurtoren 12.4.0
- Diverse hoogtepunten
- Privacy- en beveiligingspaneel
- Verbeteringen aan het prestatiepaneel
- Gekalibreerde CPU-throttling-presets
- Selecteer verschillende prestatiegebeurtenissen in dezelfde AI-chat
- Eerste- en derdepartij-highlighting in Prestaties
- Veldgegevens in markertooltips en inzichten
- Gedwongen reflow-inzicht
- Inzicht in 'DOM-grootte optimaliseren'
- Breid de prestatietracering uit met console.timeStamp
- Verbeteringen aan het elementenpaneel
- Realtimewaarden van geanimeerde stijlen
- Ondersteuning voor :open pseudo-klasse en verschillende pseudo-elementen
- Kopieer alle consoleberichten
- Byte-eenheden in het geheugenpaneel
- Diverse hoogtepunten
- Blijvende AI-chatgeschiedenis
- Verbeteringen aan het prestatiepaneel
- Inzicht in beeldlevering
- Klassieke en moderne toetsenbordnavigatie
- Negeer irrelevante scripts in de vlamgrafiek
- Tijdlijnmarkering en bereikmarkering bij zweven
- Aanbevolen instellingen voor throttling
- Tijdmarkeringen in een overlay
- Stack traces van JS-aanroepen in Samenvatting
- Badge-instellingen verplaatst naar menu in Elementen
- Nieuw 'Wat is er nieuw'-paneel
- Vuurtoren 12.3.0
- Diverse hoogtepunten
- Debug netwerkverzoeken, bronbestanden en prestatietraceringen met Gemini
- Bekijk AI-chatgeschiedenis
- Beheer extensieopslag in Toepassing > Opslag
- Prestatieverbeteringen
- Interactiefasen in live-statistieken
- Informatie over het blokkeren van weergaven op het tabblad Samenvatting
- Ondersteuning voor scheduler.postTask-gebeurtenissen en hun initiatorpijlen
- Verbeteringen aan het paneel Animaties en het tabblad Elementen > Stijlen
- Ga van Elementen > Stijlen naar Animaties
- Realtime-updates op het tabblad Berekend
- Bereken druk-emulatie in sensoren
- JS-objecten met dezelfde naam gegroepeerd op bron in het paneel Geheugen
- Een nieuwe look voor instellingen
- Het paneel Prestatie-inzichten is verouderd en verwijderd uit DevTools
- Diverse hoogtepunten
- CSS debuggen met Gemini
- Beheer AI-functies in een speciaal tabblad Instellingen
- Verbeteringen aan het prestatiepaneel
- Prestatiebevindingen annoteren en delen
- Krijg direct inzicht in prestaties in het paneel Prestaties
- Overmatige lay-outverschuivingen gemakkelijker opsporen
- Ontdek de niet-samengestelde animaties
- Hardwareconcurrentie verhuist naar sensoren
- Negeer anonieme scripts en concentreer je op je code in stack traces
- Elementen > Stijlen: Ondersteuning voor zijwaartse* schrijfmodi voor rasteroverlays en CSS-brede trefwoorden
- Lighthouse-audits voor niet-HTTP-pagina's in de tijdspanne- en momentopnamemodi
- Verbeteringen in toegankelijkheid
- Diverse hoogtepunten
- Verbeteringen aan het netwerkpaneel
- Netwerkfilters opnieuw ontworpen
- HAR-exporten sluiten nu standaard gevoelige gegevens uit
- Verbeteringen aan het elementenpaneel
- Automatisch aanvullen van waarden voor text-emphasis-* eigenschappen
- Scroll overflows gemarkeerd met een badge
- Verbeteringen aan het prestatiepaneel
- Aanbevelingen in live statistieken
- Navigeren door broodkruimels
- Verbeteringen aan het geheugenpaneel
- Nieuw profiel 'Losse elementen'
- Verbeterde naamgeving van eenvoudige JS-objecten
- Dynamische thema's uitschakelen
- Chrome-experiment: proces delen
- Vuurtoren 12.2.1
- Diverse hoogtepunten
- Recorder ondersteunt export naar Puppeteer voor Firefox
- Verbeteringen aan het prestatiepaneel
- Live metrische observaties
- Zoekopdrachten in het Netwerkspoor
- Bekijk stack traces van performance.mark en performance.measure aanroepen
- Testadresgegevens gebruiken in het paneel Automatisch invullen
- Verbeteringen aan het elementenpaneel

