Sofia Emelianova
Google I/O 2025-editie
Chrome DevTools zal prominent aanwezig zijn op Google I/O dit jaar. Er zullen zowel live sessies als opgenomen sessies zijn.
Om meer te weten te komen over spannende nieuwe functies, kijk dan naar de volgende kanalen:
- Wat is er nieuw in Chrome , 20 mei 2025 | 15:30 PT
- Doe meer met Chrome DevTools en gebruik minder CTRL + TAB.
- Prestatiefoutopsporing in DevTools
Vergeet bovendien niet te kijken naar Rachel Andrews sessie 'Wat is er nieuw op het web? ' op 20 mei 2025 om 16:30 uur Pacific Time.
Bekijk onze nieuwste video voor een kort overzicht van onze meest recente hoogtepunten:
Wijzig en sla CSS-aanpassingen op in je werkruimte met Gemini.
Met een paar klikken kunt u Gemini nu CSS voor u laten aanpassen en corrigeren, en met een gekoppelde werkmap uw wijzigingen opslaan in de bronbestanden op uw computer.
Automatische werkruimtes zijn een experimentele functie. Je kunt je bestaande bronmap koppelen of een demo uitproberen.
Nadat een werkmap is gekoppeld , klikt u in het paneel Elementen op Vraag AI , vraagt u Gemini om CSS aan te passen, klikt u op Doorgaan om de wijzigingen live te testen, vouwt u vervolgens Niet-opgeslagen wijzigingen uit, klikt u op Toepassen op werkruimte , bekijkt u het verschil en klikt u op Alles opslaan .
Koppel een werkmap en sla wijzigingen op in uw bronbestanden.
Je kunt nu automatisch (of handmatig) een werkmap koppelen , zodat DevTools wijzigingen in JavaScript, HTML en CSS kan opslaan in bronbestanden op je computer.
Bekijk hoe het werkt met JavaScript:
Chromium-probleem: 404170628 .
Vraag Gemini naar inzichten in prestaties.
Met één druk op de knop kunt u nu een chat starten met Gemini om de volgende prestatie-inzichten te onderzoeken en ernaar te handelen:
- LCP per fase
- LCP-verzoek ontdekking
- Renderblokkerende verzoeken
- Oorzaken van de lay-outwijziging
- Latentie van documentaanvraag
U kunt uw feedback over de functie achterlaten op crbug.com/371170842 .
Voorzie prestatiegegevens van aantekeningen met Gemini.
Je kunt Gemini nu vragen om annotaties te genereren over gebeurtenissen in de prestatietrace.
Dubbelklik op een gebeurtenis in het hoofdspoor en klik vervolgens op 'Label genereren' naast het invoerveld. Gemini kan een label voorstellen op basis van de stacktrace en de context.
Voeg schermafbeeldingen toe aan je chats met Gemini.
In het AI-assistentiepaneel kun je nu op de knop - Screenshot maken ' klikken om een schermafbeelding van de pagina te maken en deze naar je chat met Gemini te sturen.
Je kunt schermafbeeldingen gebruiken om extra visuele context aan je prompts toe te voegen, bijvoorbeeld om te controleren of alle zichtbare knoppen dezelfde afstand hebben.
Nieuwe inzichten in het Performance-panel
Deze versie biedt twee nieuwe inzichten in het prestatiepaneel : Dubbele JavaScript-code en Verouderde JavaScript-code .
Dubbele JavaScript
De nieuwe functie Prestaties > Inzichten > Dubbele JavaScript markeert in het netwerkoverzicht de verzoeken voor grote, dubbele JavaScript-modules in uw bundels, indien deze op uw pagina aanwezig zijn.
Je kunt ook op 'Treemap bekijken' in het inzicht klikken om JavaScript-afhankelijkheden te verkennen.
Verouderde JavaScript
Onder de nieuwe optie Prestaties > Inzichten > Verouderde JavaScript wordt in het netwerkoverzicht de verzoeken voor verouderde JavaScript-code gemarkeerd, indien deze op uw pagina aanwezig zijn. Denk hierbij aan polyfills en transformaties waarmee oudere browsers nieuwe JavaScript-functies kunnen gebruiken. Veel van deze code is echter niet nodig voor moderne browsers.
Er wordt nu gespeculeerd dat de regeltags werken.
Bij Toepassing > Speculatieve laadprocessen worden nu tags in plaats van URL's weergegeven voor regelsets, indien tags aanwezig zijn.
Chromium-probleem: 393408589 .
Lighthouse 12.6.0
Het Lighthouse- paneel draait nu op Lighthouse 12.6.0.
De meest opvallende verandering in deze versie van Lighthouse is de introductie van audits voor prestatie-inzichten . In de categorie Prestaties van het Lighthouse -rapport kunt u nu inzichten uitproberen .
Zie ook de volledige lijst met wijzigingen .
Om de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools te leren, raadpleegt u Lighthouse: Websitesnelheid optimaliseren .
Chromium-probleem: 40543651 .
Diverse hoogtepunten
Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:
- Netwerk : Er is een parseerfunctie toegevoegd voor bekende formaten van servertijden.
- Je kunt nu rijen in tabellen deselecteren met Cmd / Ctrl + klik (Chromium-probleem: 409474445 ).
- Prestaties > Inzichten > Efficiënte cachelevensduren gebruiken negeert nu assets met een TTL van 30 dagen of langer.
Toegankelijkheid
Deze versie bevat de volgende verbeteringen op het gebied van toegankelijkheid:
- Prestaties : De initiatorpijlen in de trace zijn nu beter zichtbaar.
- Elementen : Je kunt nu de toegankelijkheidsboomweergave op volledige pagina in- of uitschakelen met de sneltoets A (Chromium-probleem: 40888478 ).
Schermlezers kondigen nu onder andere het volgende aan:
- "Gekopieerd naar klembord" wanneer je code uit codeblokken kopieert.
- "Toepassen op werkruimte" wanneer je wijzigingen in je werkruimte toepast in de AI-assistentchat .
- "Label genereren" verschijnt wanneer je AI vraagt om een label te genereren in Prestaties > Annotaties .
- Houd er rekening mee dat er suggesties voor suggesties in de AI-assistentchat staan.
- Bekijk de geschatte besparingen voor relevante inzichten in Prestaties > Inzichten .
Download de previewkanalen
Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!
Neem contact op met het Chrome DevTools-team.
Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.
- Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
- Meld een probleem met DevTools via de Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
- Tweet naar @ChromeDevTools .
- Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .
Wat is er nieuw in DevTools?
Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .
- Updates voor de DevTools MCP-server
- Verbeterde tracering
- Ondersteuning voor @starting-style
- Editorwidget voor weergave: metselwerk
- Vuurtoren 13
- Code suggesties van Gemini
- Verbeteringen voor de DevTools MCP-server
- Snellere toegang tot AI-ondersteuning
- Debug de volledige prestatietrace met Gemini.
- Ladeoriëntatie wisselen
- Google Ontwikkelaarsprogramma
- Diverse hoogtepunten
- Chrome DevTools (MCP) voor uw AI-agent
- Debug de netwerkafhankelijkheidsstructuur met Gemini.
- Exporteer je chats met Gemini.
- Opgeslagen trackconfiguratie in het paneel Prestaties
- Filter IP-beveiligde netwerkverzoeken
- Elementen > tabblad Indeling voegt ondersteuning voor metselwerkindeling toe.
- Vuurtoren 12.8.2
- Diverse hoogtepunten
- Ontdek meer inzichten met Gemini.
- Emuleer de 'Save-Data'-header in 'Netwerkcondities'.
- Bekijk de basislijnstatus in een tooltip van een CSS-eigenschap.
- Formaatfactoren overschrijven in clienthints van de gebruikersagent
- Lighthouse 12.8.0
- Diverse hoogtepunten
- Een betrouwbaardere en productievere versie van Chrome DevTools
- Upload afbeeldingen met behulp van AI voor styling.
- Voeg aanvraagheaders toe aan de tabel in het netwerk.
- Bekijk de hoogtepunten van Google I/O 2025.
- Diverse hoogtepunten
- Prestatieverbeteringen
- Vooraf verbonden oorsprongen in 'Netwerkafhankelijkheidsboom'-inzicht
- Serverrespons- en omleidingstijden in het 'Documentaanvraaglatentie'-inzicht
- Omleidingen in het overzicht van netwerkverzoeken
- Minder ruis in de prestatiegrafiek
- De optie 'JavaScript-voorbeelden uitschakelen' is verouderd.
- Parameter voor nauwkeurigheid van geolocatie in sensoren
- Verbeteringen aan het elementenpaneel
- Het debuggen van complexe CSS-waarden wordt eenvoudiger.
- @function-ondersteuning in Elementen > Stijlen
- Verbeteringen aan het netwerkpaneel
- has-request-header filter
- Directe sockets in geïsoleerde webapplicaties
- Diverse hoogtepunten
- Toegankelijkheid
- Google I/O 2025-editie
- Wijzig en sla CSS-aanpassingen op in je werkruimte met Gemini.
- Koppel een werkmap en sla wijzigingen op in uw bronbestanden.
- Vraag Gemini naar inzichten in prestaties.
- Voorzie prestatiegegevens van aantekeningen met Gemini.
- Voeg schermafbeeldingen toe aan je chats met Gemini.
- Nieuwe inzichten in het Performance-panel
- Dubbele JavaScript
- Verouderde JavaScript
- Er wordt nu gespeculeerd dat de regeltags werken.
- Lighthouse 12.6.0
- Diverse hoogtepunten
- Toegankelijkheid
- Prestatieverbeteringen
- Nieuwe inzichten in prestaties
- Klik om te markeren
- Servertijden in het overzicht van netwerkverzoeken
- Filter cookies in 'Privacy en beveiliging'.
- Groottes in kB-eenheden in tabellen op de panelen.
- De automatische aanvulling ondersteunt corner-shape en corner-*-shape in Elementen > Stijlen.
- Experimenteel: Problemen met elementen en attributen in de DOM onder de aandacht brengen
- Lighthouse 12.5.0
- Diverse hoogtepunten
- Prestatieverbeteringen
- Bron- en scriptlinks voor profiel- en functieaanroepen in Performance
- LCP door faseveldgegevens ondersteunen
- Inzicht in de afhankelijkheidsboom van een netwerk
- De duur in plaats van de totale tijd en de eigen tijd in de samenvatting.
- Zwaarste stapelmarkering
- Verbeterde lege toestanden voor diverse panelen
- Toegankelijkheidsboomweergave in Elements
- Lighthouse 12.4.0
- Diverse hoogtepunten
- Privacy- en beveiligingspanel
- Prestatieverbeteringen
- Gekalibreerde CPU-throttling-voorinstellingen
- Selecteer verschillende prestatie-evenementen in dezelfde AI-chat.
- Eerste- en derde partijmarkering in Performance
- Veldgegevens in markertooltips en inzichten
- Inzicht in geforceerde herstroom
- Inzicht in 'DOM-grootte optimaliseren'
- Breid de prestatietrace uit met console.timeStamp.
- Verbeteringen aan het elementenpaneel
- Realtime waarden van geanimeerde stijlen
- Ondersteuning voor de pseudo-klasse :open en diverse pseudo-elementen.
- Kopieer alle consoleberichten
- Byte-eenheden in het geheugenpaneel
- Diverse hoogtepunten
- Permanente AI-chatgeschiedenis
- Prestatieverbeteringen
- Inzicht in beeldweergave
- Klassieke en moderne toetsenbordnavigatie
- Negeer irrelevante scripts in het flame chart.
- Tijdlijnmarkering en bereikmarkering bij hoveren
- Aanbevolen instellingen voor gasregeling
- Tijdmarkeringen in een overlay
- Stacktraceringen van JS-aanroepen in het overzicht
- De badge-instellingen zijn verplaatst naar het menu in Elements.
- Nieuw 'Wat is nieuw'-paneel
- Lighthouse 12.3.0
- Diverse hoogtepunten
- Debug netwerkverzoeken, bronbestanden en prestatietraceringen met Gemini.
- Bekijk de chatgeschiedenis van AI
- Beheer de opslagruimte van extensies via Toepassing > Opslag.
- Prestatieverbeteringen
- Interactiefasen in live statistieken
- Renderblocking-informatie in het tabblad Samenvatting
- Ondersteuning voor scheduler.postTask-gebeurtenissen en hun initiërende pijlen.
- Verbeteringen aan het paneel Animaties en het tabblad Elementen > Stijlen
- Ga van Elementen > Stijlen naar Animaties
- Realtime updates in het tabblad Berekend
- Bereken druksimulatie in sensoren
- JavaScript-objecten met dezelfde naam, gegroepeerd per bron in het geheugenpaneel.
- Een nieuwe look voor instellingen
- Het paneel met prestatie-inzichten is verouderd en verwijderd uit DevTools.
- Diverse hoogtepunten
- Debug CSS met Gemini
- Beheer AI-functies in een speciaal instellingentabblad.
- Prestatieverbeteringen
- Beschrijf en deel de prestatiebevindingen.
- Krijg direct inzicht in de prestaties in het prestatiepaneel.
- Overmatige verschuivingen in de lay-out zijn gemakkelijker te herkennen
- Zoek de niet-samengestelde animaties.
- Hardware-gelijktijdigheid verschuift naar sensoren.
- Negeer anonieme scripts en concentreer je op je code in de stacktraces.
- Elementen > Stijlen: Ondersteuning voor zijwaartse schrijfmodi voor rasteroverlays en CSS-brede trefwoorden.
- Lighthouse voert audits uit op niet-HTTP-pagina's in tijdsbestek- en momentopnamemodus.
- Toegankelijkheidsverbeteringen
- Diverse hoogtepunten
- Verbeteringen aan het netwerkpaneel
- Netwerkfilters opnieuw uitgevonden
- Bij HAR-exports worden gevoelige gegevens nu standaard uitgesloten.
- Verbeteringen aan het elementenpaneel
- Waarden voor automatisch aanvullen voor tekst-nadruk-* eigenschappen
- Scrolloverloop gemarkeerd met een badge
- Prestatieverbeteringen
- Aanbevelingen in realtime statistieken
- Navigeer met behulp van de broodkruimels
- verbeteringen aan het geheugenpaneel
- Nieuw profiel voor 'Losstaande elementen'
- Verbeterde naamgeving van gewone JavaScript-objecten
- Schakel dynamische theming uit.
- Chrome-experiment: Procesdeling
- Vuurtoren 12.2.1
- Diverse hoogtepunten
- Recorder ondersteunt exporteren naar Puppeteer voor Firefox.
- Prestatieverbeteringen
- Live-statistiekenobservaties
- Zoekopdrachten in het netwerkspoor
- Bekijk de stacktraces van de aanroepen performance.mark en performance.measure.
- Gebruik testadresgegevens in het paneel 'Automatisch invullen'.
- Verbeteringen aan het elementenpaneel
- Dwing meer staten af voor specifieke elementen
- Elementen > Stijlen vult nu automatisch meer rastereigenschappen aan.
- Lighthouse 12.2.0
- Diverse hoogtepunten
- Console Insights van Gemini wordt in de meeste Europese landen gelanceerd.
- Updates van het prestatiepaneel
- Verbeterd netwerkspoor
- Pas prestatiegegevens aan met de uitbreidbare API.
- Details in het tijdschema.
- Kopieer alle vermelde verzoeken in het netwerkpaneel.
- Snellere heap-snapshots met benoemde HTML-tags en minder rommel.
- Open het paneel Animaties om animaties vast te leggen en @keyframes live te bewerken.
- Lighthouse 12.1.0
- Toegankelijkheidsverbeteringen
- Diverse hoogtepunten
- Controleer de CSS-ankerpositionering in het paneel Elementen.
- Verbeteringen aan het bronnenpaneel
- Verbeterde 'Hier nooit pauzeren'-functie
- Nieuwe scroll snap event listeners
- Verbeteringen aan het netwerkpaneel
- Bijgewerkte voorinstellingen voor netwerkbeperking
- Informatie over servicemedewerkers in aangepaste velden van het HAR-formaat.
- Verzend en ontvang WebSocket-gebeurtenissen in het Prestatiepaneel
- Diverse hoogtepunten
- Prestatieverbeteringen
- Tracks verplaatsen en verbergen met de bijgewerkte trackconfiguratiemodus.
- Negeer scripts in het flame chart.
- Verlaag de CPU-snelheid met een factor 20.
- Het paneel met prestatie-inzichten wordt uitgefaseerd.
- Detecteer overmatig geheugengebruik met nieuwe filters in heap-snapshots.
- Inspecteer de opslagbuckets in Toepassing > Opslag
- Schakel waarschuwingen voor zelf-XSS uit met een opdrachtregelparameter.
- Lighthouse 12.0.0
- Diverse hoogtepunten
- Begrijp fouten en waarschuwingen in de console beter met Gemini.
- @position-try-regels worden nu ondersteund in Elementen > Stijlen
- Verbeteringen aan het bronnenpaneel
- Configureer automatische opmaak en het sluiten van haakjes.
- Afgehandelde afgewezen beloftes worden herkend als opgevangen.
- Foutmeldingen in de console
- Verbeteringen aan het netwerkpaneel
- Inspecteer de kopteksten van Early Hints
- Verberg de watervalkolom
- Prestatieverbeteringen
- Statistieken vastleggen van CSS-selectors
- Volgorde wijzigen en sporen verbergen
- Negeer de retainers in het geheugenpaneel.
- Vuurtoren 11.7.1
- Diverse hoogtepunten
- Nieuw paneel voor automatisch invullen
- Verbeterde netwerkbeperking voor WebRTC
- Scroll-gestuurde animaties worden ondersteund in het paneel Animaties.
- Verbeterde ondersteuning voor geneste CSS in Elementen > Stijlen
- Verbeterd prestatiepaneel
- Verberg functies en hun subfuncties in het vlamdiagram.
- Pijlen van geselecteerde initiatiefnemers naar de gebeurtenissen die zij hebben geïnitieerd.
- Lighthouse 11.6.0
- Tooltips voor speciale categorieën in Geheugen > Heap-snapshots
- Applicatie > Opslagupdates
- Bytes gebruikt voor gedeelde opslag
- WebSQL is volledig verouderd.
- Verbeteringen in het dekkingspaneel
- Het paneel Lagen is mogelijk verouderd.
- Uitfasering van JavaScript Profiler: Fase vier, definitief
- Diverse hoogtepunten
- Vind het paasei
- Updates van het elementenpaneel
- Simuleer een pagina met focus in Elementen > Stijlen
- Kleurenkiezer, hoekklok en easing-editor in
var()fallbacks - De CSS-lengtetool is verouderd.
- Pop-upvenster voor het geselecteerde zoekresultaat in het gedeelte Prestaties > Hoofdtrack
- Updates van het netwerkpaneel
- Wis de knop en het zoekfilter in het tabblad Netwerk > EventStream.
- Tooltips met redenen voor uitzonderingen op cookies van derden in Netwerk > Cookies
- Schakel alle breakpoints in en uit in de broncode.
- Bekijk geladen scripts in DevTools voor Node.js
- Lighthouse 11.5.0
- Toegankelijkheidsverbeteringen
- Diverse hoogtepunten
- De officiële verzameling Recorder-extensies is nu beschikbaar.
- Netwerkverbeteringen
- Reden van de fout in de kolom Status
- Verbeterd submenu kopiëren
- Prestatieverbeteringen
- Broodkruimels in de tijdlijn
- Evenementinitiatoren in het hoofdcircuit
- Menu voor het selecteren van een JavaScript VM-instantie in Node.js DevTools
- Nieuwe sneltoets en opdracht in Bronnen
- Elementverbeteringen
- Het pseudo-element ::view-transition is nu bewerkbaar in Stijlen.
- De eigenschap `align-content` ondersteunt blokcontainers.
- Houdingsondersteuning voor gesimuleerde opvouwbare apparaten
- Dynamische thematisering
- Waarschuwingen over het uitfaseren van cookies van derden in de panelen Netwerk en Toepassing
- Lighthouse 11.4.0
- Toegankelijkheidsverbeteringen
- Diverse hoogtepunten
- Elementverbeteringen
- Gestroomlijnde filterbalk in het netwerkpaneel
-
@font-palette-valuesondersteuning - Ondersteund geval: Aangepaste eigenschap als terugvaloptie voor een andere aangepaste eigenschap.
- Verbeterde ondersteuning voor bronkaarten
- Prestatieverbeteringen
- Verbeterde interacties-track
- Geavanceerde filtermogelijkheden in de tabbladen Bottom-Up, Call Tree en Event Log.
- Inspringingsmarkeringen in het paneel Bronnen
- Handige tooltips voor overschreven headers en inhoud in het netwerkpaneel
- Nieuwe opties in het opdrachtmenu voor het toevoegen en verwijderen van aanvraagblokkeringspatronen.
- Het experiment met CSP-schendingen is verwijderd.
- Lighthouse 11.3.0
- Toegankelijkheidsverbeteringen
- Diverse hoogtepunten
- Uitfasering van cookies van derden
- Analyseer de cookies van uw website met de Privacy Sandbox-analysetool.
- Verbeterde negeerlijst
- Standaard uitsluitingspatroon voor node_modules
- Afgevangen uitzonderingen stoppen nu de uitvoering als ze worden opgevangen of als ze door niet-genegeerde code worden doorgegeven.
-
x_google_ignoreListis in de bronmap hernoemd naarignoreList - Nieuwe invoermodus inschakelen tijdens debuggen op afstand
- Het paneel Elementen toont nu URL's voor #document-knooppunten.
- Effectief inhoudsbeveiligingsbeleid in het toepassingspaneel
- Verbeterde foutopsporing van animaties
- 'Vertrouw je deze code?' dialoogvenster in Broncode en self-XSS-waarschuwing in Console
- Breakpoints voor gebeurtenislisteners in webworkers en worklets
- De nieuwe mediabadge voor
<audio>en<video> - Voorladen is hernoemd naar speculatief laden.
- Lighthouse 11.2.0
- Toegankelijkheidsverbeteringen
- Diverse hoogtepunten
- Verbeterde @property-sectie in Elementen > Stijlen
- Bewerkbare @eigenschapsregel
- Er worden problemen gemeld met ongeldige @property-regels.
- Bijgewerkte lijst met apparaten die geëmuleerd kunnen worden.
- Netjes opmaken van inline JSON in scripttags in Sources
- Automatisch aanvullen van privévelden in de console
- Lighthouse 11.1.0
- Toegankelijkheidsverbeteringen
- WebSQL wordt uitgefaseerd
- Validatie van de beeldverhouding van schermafbeeldingen in Toepassing > Manifest
- Diverse hoogtepunten
- Nieuwe sectie voor aangepaste eigenschappen in Elementen > Stijlen
- Verbeteringen aan lokale overschrijvingen
- Verbeterde zoekfunctie
- Verbeterd bronnenpaneel
- Gestroomlijnde werkruimte in het paneel Bronnen
- Vensters in Bronnen opnieuw rangschikken
- Syntaxmarkering en mooie opmaak voor meer scripttypen
- Emulate prefers-reduced-transparency media feature
- Vuurtoren 11
- Toegankelijkheidsverbeteringen
- Diverse hoogtepunten
- Verbeteringen aan het netwerkpaneel
- Webcontent lokaal overschrijven, nog sneller
- De inhoud van XHR- en fetch-verzoeken overschrijven.
- Chrome-extensieverzoeken verbergen
- Mensen leesbare HTTP-statuscodes
Prestaties: Bekijk de wijzigingen in de ophaalprioriteit voor netwerkgebeurtenissen
- Standaard ingeschakelde broninstellingen: Codefolding en automatische bestandsweergave
- Verbeterde foutopsporing bij problemen met cookies van derden
- Nieuwe kleuren
- Lighthouse 10.4.0
- Foutopsporing bij het vooraf laden in het toepassingspaneel
- De C/C++ WebAssembly-debuguitbreiding voor DevTools is nu open source.
- Diverse hoogtepunten
- (Experimenteel) Nieuwe rendering-emulatie: prefers-reduced-transparency
- (Experimentele) Verbeterde protocolmonitor
- Verbeterde foutopsporing bij ontbrekende stylesheets
- Ondersteuning voor lineaire timing in Elementen > Stijlen > Easing-editor
- Ondersteuning voor opslagbuckets en weergave van metadata
- Lighthouse 10.3.0
- Toegankelijkheid: Toetsenbordcommando's en verbeterde schermweergave.
- Diverse hoogtepunten
- Elementverbeteringen
- Nieuwe CSS-subgridbadge
- Selectiespecificiteit in tooltips
- Waarden van aangepaste CSS-eigenschappen in tooltips
- Bronnenverbeteringen
- CSS-syntaxmarkering
- Sneltoets voor het instellen van voorwaardelijke breekpunten
- Applicatie > Beperkingen voor het traceren van bounces
- Lighthouse 10.2.0
- Inhoudsscripts standaard negeren
- Netwerk > Verbeteringen in respons
- Diverse hoogtepunten
- Ondersteuning voor het debuggen van WebAssembly
- Verbeterd stapsgewijs gedrag in Wasm-apps
- Foutopsporing bij automatisch invullen via het paneel Elementen en het tabblad Problemen
- Beweringen in Recorder
- Lighthouse 10.1.1
- Prestatieverbeteringen
- performance.mark() toont de timing wanneer je met de muis over Performance > Timings beweegt.
- Het commando profile() vult Performance > Main in.
- Waarschuwing voor trage gebruikersinteracties
- Web Vitals-updates
- Uitfasering van JavaScript Profiler: Fase drie
- Diverse hoogtepunten
- Netwerkresponsheaders overschrijven
- Verbeteringen in het debuggen van Nuxt, Vite en Rollup
- CSS-verbeteringen in Elementen > Stijlen
- Ongeldige CSS-eigenschappen en -waarden
- Links naar sleutelframes in de animatie-shorthand-eigenschap
- Nieuwe console-instelling: Automatisch aanvullen bij Enter
- Het opdrachtmenu legt de nadruk op door u gemaakte bestanden.
- Uitfasering van JavaScript Profiler: Fase twee
- Diverse hoogtepunten
- Recorder-updates
- Uitbreidingen voor het afspelen van opnames
- Opnemen met pierce selectors
- Exporteer opnames als Puppeteer-scripts met Lighthouse-analyse.
- Download extensies voor Recorder
- Elementen > Stijlupdates
- CSS-documentatie in het deelvenster Stijlen
- Ondersteuning voor geneste CSS-elementen
- Het markeren van logpunten en voorwaardelijke breekpunten in de console.
- Negeer irrelevante scripts tijdens het debuggen.
- De uitfasering van JavaScript Profiler is begonnen.
- Simuleer een verminderd contrast
- Vuurtoren 10
- Diverse hoogtepunten
- Foutopsporing van HD-kleuren met het deelvenster Stijlen
- Verbeterde breakpoint-UX
- Aanpasbare sneltoetsen voor de recorder
- Betere syntaxmarkering voor Angular
- Herorganiseer de caches in het toepassingspaneel.
- Diverse hoogtepunten
- Het prestatiepaneel wordt gewist bij het herladen.
- Recorder-updates
- Bekijk en markeer de code van uw gebruikersstroom in de Recorder.
- De selectietypen van een opname aanpassen.
- Bewerk de gebruikersstroom tijdens het opnemen.
- Automatische, direct toepasbare, mooie print
- Betere syntaxmarkering en inline preview voor Vue, SCSS en meer.
- Ergonomische en consistente automatische aanvulling in de console
- Diverse hoogtepunten
- Recorder: Opties voor kopiëren voor stappen, afspelen op de pagina, contextmenu van de stap
- Toon de daadwerkelijke functienamen in de opnames van de performance.
- Nieuwe sneltoetsen in het paneel Console & Bronnen
- Verbeterde JavaScript-debugging
- Diverse hoogtepunten
- [Experimenteel] Verbeterde UX bij het beheren van breakpoints
- [Experimenteel] Automatische in-place pretty print
- Tips voor inactieve CSS-eigenschappen
- Automatische detectie van XPath- en tekstselectoren in het Recorder-paneel
- Doorloop stapsgewijze expressies
- Verbeterde instelling voor de negeerlijst
- Diverse hoogtepunten
- Toetsenbord sneltoetsen aanpassen in DevTools
- Schakel tussen lichte en donkere thema's met een sneltoets.
- Markeer C/C++-objecten in de geheugeninspecteur.
- Ondersteuning voor volledige initiatorinformatie voor HAR-import
- Start de DOM-zoekopdracht na het indrukken
Enter - Toon
startenendvoor CSS flexbox-eigenschappen met de eigenschapalign-content - Diverse hoogtepunten
- Groepeer bestanden op Auteur/Implementatie in het Bronnenpaneel
- Gekoppelde stacktraces voor asynchrone bewerkingen
- Scripts van derden automatisch negeren
- Verbeterde aanroepstack tijdens het debuggen
- Bronnen op de negeerlijst verbergen in het paneel Bronnen
- Bestanden op de negeerlijst verbergen in het opdrachtmenu.
- Nieuwe interactietrack in het prestatiepaneel
- Een gedetailleerde uitleg van de LCP-timing in het Performance Insights-paneel.
- Genereer automatisch een standaardnaam voor opnames in het paneel 'Opname'.
- Diverse hoogtepunten
- Stapsgewijze herhaling in de Recorder
- Ondersteuning voor muisover-gebeurtenissen in het Recorder-paneel
- Grootste inhoudsgebied (LCP) in het Performance Insights-paneel
- Identificeer tekstflitsen (FOIT, FOUT) als mogelijke oorzaken van lay-outverschuivingen.
- Protocolhandlers in het manifestvenster
- Bovenste laagbadge in het Elementenpaneel
- Voeg Wasm-debuginformatie toe tijdens de uitvoering.
- Ondersteuning voor live bewerken tijdens het debuggen.
- Bekijk en bewerk @scope-regels in het deelvenster Stijlen.
- Bronkaartverbeteringen
- Diverse hoogtepunten
- Frame opnieuw starten tijdens debuggen
- Opties voor langzame herhaling in het opnamepaneel
- Bouw een uitbreiding voor het Recorder-paneel.
- Groepeer bestanden op Auteur/Implementatie in het Bronnenpaneel
- Nieuwe gebruikerstijden worden bijgehouden in het paneel Prestatie-inzichten.
- Toon de toegewezen sleuf van een element
- Simuleer gelijktijdige hardwareprocessen voor prestatie-opnames.
- Voorbeeldweergave van niet-kleurwaarden bij het automatisch aanvullen van CSS-variabelen
- Identificeer blokkerende frames in het venster 'Terug/Vooruit'-cache.
- Verbeterde suggesties voor automatisch aanvullen van JavaScript-objecten.
- Bronkaarten verbeteringen
- Diverse hoogtepunten
- Leg dubbelklik- en rechterklikgebeurtenissen vast in het opnamepaneel.
- Nieuwe tijdsduur en momentopnamemodus in het Lighthouse-paneel
- Verbeterde zoomregeling in het paneel Prestatie-inzichten
- Bevestig dat u een opname van een optreden wilt verwijderen.
- De volgorde van de vensters in het Elementenpaneel wijzigen
- Een kleur selecteren buiten de browser
- Verbeterde inline-waardeweergave tijdens het debuggen.
- Ondersteuning voor grote blobs voor virtuele authenticatie.
- Nieuwe sneltoetsen in het paneel Bronnen
- Bronkaarten verbeteringen
- Voorbeeldfunctie: Nieuw paneel met prestatie-inzichten
- Nieuwe sneltoetsen om lichte en donkere thema's te simuleren
- Verbeterde beveiliging op het tabblad Netwerkvoorbeeld
- Verbeterd herladen bij het breekpunt
- Console-updates
- Annuleer de gebruikersstroomopname aan het begin.
- Toon overgeërfde pseudo-elementen voor highlighting in het deelvenster Stijlen.
- Diverse hoogtepunten
- [Experimenteel] CSS-wijzigingen kopiëren
- [Experimenteel] Kleur selecteren buiten de browser
- Gebruikersstromen importeren en exporteren als JSON-bestand
- Bekijk cascade-lagen in het deelvenster Stijlen.
- Ondersteuning voor de
hwb()kleurfunctie - De weergave van privé-eigendommen is verbeterd.
- Diverse hoogtepunten
- [Experimenteel] Nieuwe tijdsduur en momentopnamemodus in het Lighthouse-paneel
- Bekijk en bewerk @supports-regels in het deelvenster Stijlen.
- Standaard ondersteuning voor veelgebruikte selectors
- De selectieknop van de opname aanpassen
- Een opname hernoemen
- Bekijk de eigenschappen van een klasse/functie wanneer u de muis eroverheen beweegt.
- Gedeeltelijk weergegeven frames in het paneel Prestaties
- Diverse hoogtepunten
- Het beperken van WebSocket-verzoeken
- Nieuw paneel voor de rapportage-API in het toepassingspaneel.
- Ondersteuning voor wachten totdat een element zichtbaar/klikbaar is in het Recorder-paneel
- Verbeterde console-styling, -opmaak en -filtering.
- Debug de Chrome-extensie met behulp van source map-bestanden.
- Verbeterde mapstructuur voor bronbestanden in het paneel Bronnen.
- Toon de bronbestanden van de worker in het paneel Bronnen.
- De automatische donkere thema-updates van Chrome
- Aanraakvriendelijke kleurenpicker en gesplitst venster
- Diverse hoogtepunten
- Voorbeeldfunctie: Toegankelijkheidsboom voor de volledige pagina
- Nauwkeurigere wijzigingen vindt u in het tabblad Wijzigingen.
- Stel een langere time-out in voor het vastleggen van gebruikersstromen.
- Zorg ervoor dat uw pagina's in de cache kunnen worden opgeslagen met behulp van het tabblad 'Terug/Vooruit' in de cache.
- Nieuw filter voor het deelvenster Eigenschappen
- Emuleer de CSS-mediafunctie `forced-colors`.
- Toon linialen bij hover-commando
- Ondersteuning voor
row-reverseencolumn-reversein de Flexbox-editor - Nieuwe sneltoetsen om XHR opnieuw af te spelen en alle zoekresultaten uit te vouwen.
- Vuurtoren 9 in het Vuurtorenpaneel
- Verbeterd bronnenpaneel
- Diverse hoogtepunten
- [Experimenteel] Eindpunten in het paneel Rapportage-API
- Voorbeeldfunctie: Nieuw opnamepaneel
- Vernieuw de apparatenlijst in de apparaatmodus.
- Automatisch aanvullen met 'Bewerken als HTML'
- Verbeterde ervaring bij het debuggen van code
- DevTools-instellingen synchroniseren tussen apparaten
- Voorbeeldfunctie: Nieuw CSS-overzichtspaneel
- De bewerkings- en kopieerervaring van CSS-lengtes is hersteld en verbeterd.
- Emuleer de CSS prefers-contrast mediafunctie
- Boots de automatische donkere modus van Chrome na.
- Kopieer de declaraties als JavaScript in het deelvenster Stijlen.
- Nieuw tabblad 'Payload' in het netwerkpaneel
- De weergave van eigenschappen in het deelvenster Eigenschappen is verbeterd.
- Optie om CORS-fouten in de console te verbergen.
- Correcte preview en evaluatie
Intl-objecten in de console - Consistente asynchrone stacktraces
- Behoud de zijbalk van de console
- Het venster voor de toepassingscache in het toepassingspaneel is verouderd.
- [Experimenteel] Nieuw paneel voor de rapportage-API in het toepassingspaneel
- Nieuwe tools voor het bepalen van de CSS-lengte
- Verberg problemen in het tabblad Problemen
- De weergave van eigenschappen is verbeterd.
- Lighthouse 8.4 in het Lighthouse-paneel
- Sorteer fragmenten in het paneel Bronnen
- Nieuwe links naar de vertaalde release-opmerkingen en naar de pagina om een vertaalfout te melden.
- Verbeterde gebruikersinterface voor het DevTools-opdrachtmenu
- Gebruik de ontwikkelaarstools in uw voorkeurstaal.
- Nieuwe Nest Hub-apparaten in de apparatenlijst
- Oorsprongproeven in de Frame-detailsweergave
- Nieuwe badge voor CSS-containerquery's
- Nieuw selectievakje om de netwerkfilters om te keren.
- De zijbalk van de console wordt binnenkort uitgefaseerd.
- Toon onbewerkte
Set-Cookiesheaders in het tabblad Problemen en het paneel Netwerk. - Geef native accessors consistent weer als eigen eigenschappen in de console.
- Correcte foutmeldingen voor inline scripts met #sourceURL
- Wijzig de kleurindeling in het deelvenster 'Berekend'.
- Vervang aangepaste tooltips door standaard HTML-tooltips.
- [Experimenteel] Problemen verbergen in het tabblad Problemen
- Bewerkbare CSS-containerquery's in het deelvenster Stijlen
- Voorbeeldweergave van de webbundel in het netwerkpaneel
- API-foutopsporing voor attributierapportering
- Verbeterde tekenreeksverwerking in de console
- Verbeterde CORS-debugging
- Vuurtoren 8.1
- Nieuwe notitie-URL in het manifestvenster
- Vaste CSS-matchingselectoren
- JSON-reacties netjes opmaken in het netwerkpaneel
- CSS-rastereditor
- Ondersteuning voor het opnieuw declareren van
constin de console. - Bronvolgordeviewer
- Nieuwe snelkoppeling om framedetails te bekijken
- Verbeterde CORS-debuggingondersteuning
- Hernoem het XHR-label naar Fetch/XHR
- Filter het resourcetype Wasm in het netwerkpaneel.
- Clienthints voor gebruikersagenten voor apparaten in het tabblad Netwerkcondities
- Meld problemen met de Quirks-modus via het tabblad Problemen.
- Schakel 'Bereken intersecties' in het prestatiepaneel in.
- Vuurtoren 7.5 in het Vuurtoren-paneel
- Het contextmenu "Frame opnieuw starten" in de oproepstapel is verouderd.
- [Experimentele] Protocolmonitor
- [Experimentele] Poppenspeler Recorder
- Web Vitals-informatie pop-up
- Nieuwe geheugeninspecteur
- Visualiseer CSS-scrollsnap
- Nieuw instellingenpaneel voor badges
- Verbeterde beeldvoorvertoning met informatie over de beeldverhouding.
- Nieuwe knop voor netwerkcondities met opties om
Content-Encodingte configureren. - Snelkoppeling om de berekende waarde te bekijken
-
accent-colortrefwoord - Categoriseer probleemtypen met kleuren en pictogrammen.
- Verwijder vertrouwenstokens
- Geblokkeerde functies in de detailweergave van het frame
- Filter experimenten in de Experimenten-instelling
- Nieuwe kolom
Vary Header' in het cache-opslagvenster. - Ondersteuning voor JavaScript-privémerkcontrole
- Verbeterde ondersteuning voor breakpoint-debugging
- Ondersteuning voor hover-preview met
[]-notatie - Verbeterde structuur van HTML-bestanden
- Correcte foutstacktraceringen voor Wasm-debugging
- Nieuwe CSS flexbox-debugtools
- Nieuwe Core Web Vitals-overlay
- Het aantal problemen is verplaatst naar de statusbalk van de console.
- Rapporteer problemen met vertrouwde webactiviteiten
- Formatteer tekenreeksen als (geldige) JavaScript-tekenreeksliteralen in de console.
- Nieuw paneel voor vertrouwenstokens in het toepassingspaneel
- Emuleer de CSS-kleurruimtefunctie voor media.
- Verbeterde tools voor Progressive Web Apps
- Nieuwe kolom
Remote Address Spacein het netwerkpaneel - Prestatieverbeteringen
- Toon toegestane/niet-toegestane functies in de detailweergave van het frame.
- Nieuwe
SamePartykolom in het Cookies-paneel - Verouderde niet-standaard
fn.displayName-ondersteuning - De functie
Don't show Chrome Data Saver warningin het instellingenmenu wordt afgeschaft. - [Experimenteel] Automatische rapportage van problemen met laag contrast in het tabblad Problemen
- [Experimenteel] Volledige weergave van de toegankelijkheidsboom in het Elementenpaneel
- Ondersteuning voor het debuggen van schendingen van vertrouwde typen.
- Maak een schermafbeelding van een knooppunt buiten het zichtbare gebied.
- Nieuw tabblad 'Vertrouwenstokens' voor netwerkverzoeken
- Vuurtoren 7 in het Vuurtorenpaneel
- Ondersteuning voor het afdwingen van de CSS
:targetstatus - Nieuwe sneltoets om een element te dupliceren
- Kleurenpickers voor aangepaste CSS-eigenschappen
- Nieuwe sneltoetsen om CSS-eigenschappen te kopiëren
- Nieuwe optie om URL-gedecodeerde cookies weer te geven
- Alleen zichtbare cookies wissen
- Nieuwe optie om cookies van derden te verwijderen in het deelvenster Opslag.
- Bewerk de clienthints voor de gebruikersagent voor aangepaste apparaten.
- De instelling "netwerklogboek vastleggen" behouden
- Bekijk WebTransport-verbindingen in het netwerkpaneel.
- "Online" is hernoemd naar "Geen snelheidsbeperking".
- Nieuwe kopieeropties in de console, het paneel Bronnen en het paneel Stijlen.
- Nieuwe informatie over servicemedewerkers in de Frame-detailsweergave.
- Meet de geheugeninformatie in de detailweergave van het frame.
- Geef feedback via het tabblad 'Problemen'.
- Verloren frames in het prestatiepaneel
- Simuleer opvouwbare apparaten en apparaten met twee schermen in de apparaatmodus.
- [Experimenteel] Automatiseer browsertesten met Puppeteer Recorder
- [Experimenteel] Lettertype-editor in het deelvenster Stijlen
- [Experimentele] CSS flexbox-debugtools
- [Experimenteel] Nieuw tabblad voor CSP-schendingen
- [Experimental] New color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA)
- Faster DevTools startup
- New CSS angle visualization tools
- Emulate unsupported image types
- Simulate storage quota size in the Storage pane
- New Web Vitals lane in the Performance panel
- Report CORS errors in the Network panel
- Cross-origin isolation information in the Frame details view
- New Web Workers information in the Frame details view
- Display opener frame details for opened windows
- Open Network panel from the Service Workers pane
- Copy property value
- Copy stacktrace for network initiator
- Preview Wasm variable value on mouseover
- Evaluate Wasm variable in the Console
- Consistent units of measurement for file/memory sizes
- Highlight pseudo elements in the Elements panel
- [Experimental] CSS Flexbox debugging tools
- [Experimental] Customize chords keyboard shortcuts
- New CSS Grid debugging tools
- New WebAuthn tab
- Move tools between top and bottom panel
- New Computed sidebar pane in the Styles pane
- Grouping CSS properties in the Computed pane
- Lighthouse 6.3 in the Lighthouse panel
-
performance.mark()events in the Timings section - New
resource-typeandurlfilters in the Network panel - Frame details view updates
- Deprecation of
Settingsin the More tools menu - [Experimental] View and fix color contrast issues in the CSS Overview panel
- [Experimental] Customize keyboard shortcuts in DevTools
- New Media panel
- Capture node screenshots using Elements panel context menu
- Issues tab updates
- Emulate missing local fonts
- Emulate inactive users
- Emulate
prefers-reduced-data - Support for new JavaScript features
- Lighthouse 6.2 in the Lighthouse panel
- Deprecation of "other origins" listing in the Service Workers pane
- Show coverage summary for filtered items
- New frame details view in Application panel
- Accessible color suggestion in the Styles pane
- Reinstate Properties pane in the Elements panel
- Human-readable
X-Client-Dataheader values in the Network panel - Auto-complete custom fonts in the Styles pane
- Consistently display resource type in Network panel
- Clear buttons in the Elements and Network panels
- Style editing for CSS-in-JS frameworks
- Lighthouse 6 in the Lighthouse panel
- First Meaningful Paint (FMP) deprecation
- Support for new JavaScript features
- New app shortcut warnings in the Manifest pane
- Service worker
respondWithevents in the Timing tab - Consistent display of the Computed pane
- Bytecode offsets for WebAssembly files
- Line-wise copy and cut in Sources Panel
- Console settings updates
- Performance panel updates
- New icons for breakpoints, conditional breakpoints, and logpoints
- Fix site issues with the new Issues tab
- View accessibility information in the Inspect Mode tooltip
- Performance panel updates
- More accurate promise terminology in the Console
- Styles pane updates
- Deprecation of the Properties pane in the Elements panel
- App shortcuts support in the Manifest pane
- Emulate vision deficiencies
- Emulate locales
- Cross-Origin Embedder Policy (COEP) debugging
- New icons for breakpoints, conditional breakpoints, and logpoints
- View network requests that set a specific cookie
- Dock to left from the Command Menu
- The Settings option in the Main Menu has moved
- The Audits panel is now the Lighthouse panel
- Delete all Local Overrides in a folder
- Updated Long Tasks UI
- Maskable icon support in the Manifest pane
- Moto G4 support in Device Mode
- Cookie-related updates
- More accurate web app manifest icons
- Hover over CSS
contentproperties to see unescaped values - Source map errors in the Console
- Setting for disabling scrolling past the end of a file
- Support for
letandclassredeclarations in the Console - Improved WebAssembly debugging
- Request Initiator Chains in the Initiator tab
- Highlight the selected network request in the Overview
- URL and path columns in the Network panel
- Updated User-Agent strings
- New Audits panel configuration UI
- Per-function or per-block code coverage modes
- Code coverage must now be initiated by a page reload
- Debug why a cookie was blocked
- View cookie values
- Simulate different prefers-color-scheme and prefers-reduced-motion preferences
- Code coverage updates
- Debug why a network resource was requested
- Console and Sources panels respect indentation preferences again
- New shortcuts for cursor navigation
- Multi-client support in the Audits panel
- Payment Handler debugging
- Lighthouse 5.2 in the Audits panel
- Largest Contentful Paint in the Performance panel
- File DevTools issues from the Main Menu
- Copy element styles
- Visualize layout shifts
- Lighthouse 5.1 in the Audits panel
- OS theme syncing
- Keyboard shortcut for opening the Breakpoint Editor
- Prefetch cache in the Network panel
- Private properties when viewing objects
- Notifications and push messages in the Application panel
- Autocomplete with CSS values
- A new UI for network settings
- WebSocket messages in HAR exports
- HAR import and export buttons
- Real-time memory usage
- Service worker registration port numbers
- Inspect Background Fetch and Background Sync events
- Puppeteer for Firefox
- Meaningful presets when autocompleting CSS functions
- Clear site data from the Command Menu
- View all IndexedDB databases
- View a resource's uncompressed size on hover
- Inline breakpoints in the Breakpoints pane
- IndexedDB and Cache resource counts
- Setting for disabling the detailed Inspect tooltip
- Setting for toggling tab indentation in the Editor
- Highlight all nodes affected by CSS property
- Lighthouse v4 in the Audits panel
- WebSocket binary message viewer
- Capture area screenshot in the Command Menu
- Service worker filters in the Network panel
- Performance panel updates
- Long tasks in Performance panel recordings
- First Paint in the Timing section
- Bonus tip: Shortcut for viewing RGB and HSL color codes (video)
- Logpoints
- Detailed tooltips in Inspect Mode
- Export code coverage data
- Navigate the Console with a keyboard
- AAA contrast ratio line in the Color Picker
- Save custom geolocation overrides
- Code vouwen
- Frames tab renamed to Messages tab
- Bonus tip: Network panel filtering by property (video)
- Visualize performance metrics in the Performance panel
- Highlight text nodes in the DOM Tree
- Copy the JS path to a DOM node
- Audits panel updates , including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu
- Bonus tip: Use Device Mode to inspect media queries (video)
- Hover over a Live Expression result to highlight a DOM node
- Store DOM nodes as global variables
- Initiator and priority information now in HAR imports and exports
- Access the Command Menu from the Main Menu
- Picture-in-Picture breakpoints
- Bonus tip: Use
monitorEvents()to log a node's fired events in the Console (video) - Live Expressions in the Console
- Highlight DOM nodes during Eager Evaluation
- Performance panel optimizations
- More reliable debugging
- Enable network throttling from the Command Menu
- Autocomplete Conditional Breakpoints
- Break on AudioContext events
- Debug Node.js apps with ndb
- Bonus tip: Measure real world user interactions with the User Timing API
- Eager Evaluation
- Argument hints
- Function autocompletion
- ES2017 keywords
- Lighthouse 3.0 in the Audits panel
- BigInt support
- Adding property paths to the Watch pane
- "Show timestamps" moved to Settings
- Bonus tip: Lesser-known Console methods (video)
- Search across all network headers
- CSS variable value previews
- Copy as fetch
- New audits, desktop configuration options, and viewing traces
- Stop infinite loops
- User Timing in the Performance tabs
- JavaScript VM instances clearly listed in the Memory panel
- Network tab renamed to Page tab
- Dark theme updates
- Certificate transparency information in the Security panel
- Site isolation features in the Performance panel
- Bonus tip: Layers panel + Animations Inspector (video)
- Blackboxing in the Network panel
- Auto-adjust zooming in Device Mode
- Pretty-printing in the Preview and Response tabs
- Previewing HTML content in the Preview tab
- Local Overrides support for styles inside of HTML
- Bonus tip: Blackbox framework scripts to make Event Listener Breakpoints more useful
- Local Overrides
- New accessibility tools
- The Changes tab
- New SEO and performance audits
- Multiple recordings in the Performance panel
- Reliable code stepping with workers in async code
- Bonus tip: Automate DevTools actions with Puppeteer (video)
- Performance Monitor
- Console Sidebar
- Group similar Console messages
- Bonus tip: Toggle hover pseudo-class (video)
- Multi-client remote debugging support
- Workspaces 2.0
- 4 new audits
- Simulate push notifications with custom data
- Trigger background sync events with custom tags
- Bonus tip: Event listener breakpoints (video)
- Top-level await in the Console
- New screenshot workflows
- CSS Grid highlighting
- A new Console API for querying objects
- New Console filters
- HAR imports in the Network panel
- Previewable cache resources
- More predictable cache debugging
- Block-level code coverage
- Mobile device throttling simulation
- View storage usage
- View when a service worker cached responses
- Enable the FPS meter from the Command Menu
- Set mousewheel behavior to zoom or scroll
- Debugging support for ES6 modules
- New Audits panel
- 3rd-Party Badges
- A new gesture for Continue To Here
- Step into async
- More informative object previews in the Console
- More informative context selection in the Console
- Real-time updates in the Coverage tab
- Simpler network throttling options
- Async stacks on by default
- CSS and JS code coverage
- Full-page screenshots
- Block requests
- Step over async await
- Unified Command Menu