Jecelyn Yeen
Gebruik de ontwikkelaarstools in uw voorkeurstaal.
Chrome DevTools ondersteunt nu meer dan 80 talen, zodat u in uw voorkeurstaal kunt werken!
Open Instellingen , selecteer vervolgens je voorkeurstaal in het vervolgkeuzemenu Voorkeuren > Taal en herlaad DevTools.
Voorkeuren" breedte="800" hoogte="494">
Chromium-probleem: 1163928
Nieuwe Nest Hub-apparaten in de apparatenlijst
Je kunt nu de afmetingen van Nest Hub en Nest Hub Max simuleren in de apparaatmodus .
Klik op Apparaatwerkbalk in-/uitschakelen 
Selecteer Nest Hub of Nest Hub Max in de lijst met apparaten.
Chromium-probleem: 1223525
Oorsprongproeven in de Frame-detailsweergave
U kunt nu informatie over de oorsprong van een site vinden in de frame-detailsweergave onder het paneel Toepassing.
Met Origin Trials krijg je toegang tot een nieuwe of experimentele functie, waarmee je functionaliteit kunt ontwikkelen die je gebruikers gedurende een beperkte tijd kunnen uitproberen voordat de functie voor iedereen beschikbaar wordt gesteld.
Open een pagina met Origin-tests (bijvoorbeeld een demopagina ). Ga in het paneel 'Applicatie ' naar beneden naar het gedeelte 'Frames' en selecteer het bovenste frame.
Chromium-probleem: 607555
Nieuwe badge voor CSS-containerquery's
Er wordt een nieuwe containerbadge toegevoegd naast de containerelementen (de voorouderelementen die voldoen aan de criteria van @container at-rules). Klik op de badge om een overlay van de gekozen container en al zijn opvragende afstammelingen op de pagina weer te geven of in te schakelen.
Chromium-probleem: 1146422
Nieuw selectievakje om de netwerkfilters om te keren.
Gebruik het nieuwe selectievakje 'Inverteren' om de filters in het netwerkpaneel om te keren.
U kunt bijvoorbeeld 'status-code: 404' typen om netwerkverzoeken met statuscode 404 te filteren. Schakel het selectievakje 'Omkeren' in om het filter te neutraliseren (en alle netwerkverzoeken weer te geven die geen statuscode 404 hebben).
Chromium-probleem: 1054464
De zijbalk van de console wordt binnenkort uitgefaseerd.
De zijbalk van de console wordt verwijderd en de filterinterface wordt naar de werkbalk verplaatst. Heeft u opmerkingen of feedback? Laat het ons weten via deze issue tracker .
Chromium-probleem: 1232937
Toon onbewerkte Set-Cookie headers in het tabblad Problemen en het paneel Netwerk.
DevTools toont nu onbewerkte Set-Cookie headers in het tabblad Problemen .
Voorheen toonde DevTools geen onjuist opgemaakte cookies (incorrecte Set-Cookie header) in het netwerkpaneel. Met het nieuwe filter response-header-set-cookie headers dat is toegevoegd aan het netwerkpaneel , kunnen gebruikers nu de onbewerkte Set-Cookie headers filteren. DevTools koppelt de onbewerkte Set-Cookie headers in het tabblad Problemen aan het netwerkpaneel .
Chromium-probleem: 1179186
Geef native accessors consistent weer als eigen eigenschappen in de console.
De console geeft native accessors nu consistent weer als hun eigen eigenschappen.
Bijvoorbeeld, bij het evalueren van de new Int8Array([1, 2, 3]) in de console werden native accessors zoals length en byteOffset niet weergegeven in de preview. Met deze nieuwste update worden native accessors wel in de preview weergegeven en worden waarden direct geëvalueerd wanneer ze worden uitgevouwen.
Chromium-problemen: 1076820 , 1199247
Correcte foutmeldingen voor inline scripts met #sourceURL
DevTools verwerkt nu inline scripts met #sourceURL correct en toont de juiste foutmeldingen voor debugging.
Voorheen gaf DevTools een onjuiste locatie weer voor inline scripts met #sourceURL ; deze was relatief ten opzichte van het omringende document in plaats van relatief ten opzichte van de openings- <script> -tag.
Chromium-problemen: 1183990 , 578269
Wijzig de kleurindeling in het deelvenster 'Berekend'.
Je kunt nu de kleurindeling van elk element in het deelvenster 'Berekend' wijzigen door Shift + te klikken op de kleurvoorbeeldweergave.
Chromium-probleem: 1226371
Vervang aangepaste tooltips door standaard HTML-tooltips.
DevTools gebruikt nu native HTML-tooltips voor alle componenten. DevTools had lange tijd een eigen implementatie voor tooltips vanwege het ontbreken van stylingmogelijkheden voor native HTML-tooltips.
Helaas is het onderhouden van een aangepaste tooltip-implementatie ingewikkeld en stuiten we regelmatig op complexe bugs.
Na een heroverweging van de voordelen van de aangepaste implementaties, concluderen we dat de standaard HTML-tooltips voldoende zijn voor DevTools en dat het gebruik ervan een groot aantal problemen voor onze gebruikers voorkomt.
Chromium-probleem: 1223391
[Experimenteel] Problemen verbergen in het tabblad Problemen
Schakel het experiment met het verbergen van problemen in om problemen in het tabblad Problemen te verbergen. Zo kunt u zich concentreren op de belangrijke problemen die voor u relevant zijn.
Ga naar het tabblad 'Probleem' , beweeg de muis over een probleem en klik op het probleemmenu. 
Selecteer aan de rechterkant 'Problemen zoals deze verbergen ' om het te verbergen.
Chromium-probleem: 1175722
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
- [Experimenteel] Nieuwe berekening van kleurcontrast - Geavanceerd perceptueel contrastalgoritme (APCA)
- Snellere DevTools-startup
- Nieuwe visualisatietools voor CSS-hoeken
- Emuleer niet-ondersteunde afbeeldingstypen
- Simuleer de opslagquotumgrootte in het deelvenster Opslag.
- Nieuwe Web Vitals-sectie in het Prestatiepaneel
- Meld CORS-fouten in het netwerkpaneel.
- Informatie over isolatie tussen verschillende oorsprongen in de Frame-detailsweergave
- Nieuwe informatie over Web Workers in de detailweergave van het frame.
- 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 folding
- 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