Jecelyn Yeen
Nieuwe tools voor het bepalen van de CSS-lengte
DevTools biedt een eenvoudigere maar flexibele manier om lengtes in CSS bij te werken!
Zoek in het deelvenster Stijlen naar CSS-eigenschappen met een lengte (bijvoorbeeld height , padding ).
Beweeg de muis over het eenheidstype; het wordt dan onderstreept. Klik erop om een eenheidstype uit het keuzemenu te selecteren.
Beweeg de muis over de eenheidswaarde en de muisaanwijzer verandert in een horizontale cursor. Sleep horizontaal om de waarde te verhogen of te verlagen. Om de waarde met een factor 10 te verhogen, houdt u de Shift -toets ingedrukt tijdens het slepen.
Je kunt de eenheidswaarde nog steeds als tekst bewerken: klik gewoon op de waarde en begin met bewerken.
Chromium-problemen: 1126178 , 1172993
Verberg problemen in het tabblad Problemen
Je kunt nu specifieke problemen verbergen in het tabblad Problemen, zodat je je alleen kunt concentreren op de problemen die voor jou relevant zijn.
Ga in het tabblad 'Problemen' met de muis over een probleem dat u wilt verbergen. Klik vervolgens op 'Meer opties'. 
> Verberg dit soort problemen .
Alle verborgen problemen worden weergegeven in het venster 'Verborgen problemen' . Klap het venster uit. U kunt alle verborgen problemen of een geselecteerd probleem zichtbaar maken.
Chromium-probleem: 1175722
De weergave van eigenschappen is verbeterd.
DevTools verbeteren de weergave van eigenschappen door:
- In de console , het paneel Bronnen en het paneel Eigenschappen moeten de eigen eigenschappen altijd eerst vetgedrukt en gesorteerd worden.
- De weergave van de eigenschappen in het deelvenster Eigenschappen platmaken.
Het onderstaande codefragment maakt bijvoorbeeld een URL link aan met twee eigen eigenschappen: user en access , en werkt de waarde van een overgeërfde eigenschap ' search bij.
/* example.js */
const link = new URL('https://goo.gle/devtools-blog');
link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;
Probeer link in de console te loggen. Eigen eigenschappen worden nu vetgedrukt weergegeven en staan bovenaan. Deze wijzigingen maken het gemakkelijker om aangepaste eigenschappen te herkennen, vooral voor web-API's (bijv. URL ) met veel overgeërfde eigenschappen.
Naast deze wijzigingen zijn de eigenschappen in het deelvenster Eigenschappen nu ook vereenvoudigd voor een betere debugervaring van DOM-eigenschappen, met name voor webcomponenten .
Chromium-problemen: 1076820 , 1119900
Lighthouse 8.4 in het Lighthouse-paneel
Het Lighthouse- paneel draait nu op Lighthouse 8.4. Lighthouse detecteert nu of het Largest Container Paint (LCP) -element een lazy-loaded afbeelding was en adviseert om het loading ervan te verwijderen.
Bekijk het overzicht ' Wat is nieuw in Lighthouse 8.4' voor meer informatie over de updates.
Chromium-probleem: 772558
Sorteer fragmenten in het paneel Bronnen
De fragmenten in het deelvenster Fragmenten onder het paneel Bronnen worden nu alfabetisch gesorteerd. Voorheen was dat niet het geval.
Gebruik de codefragmentenfunctie om opdrachten sneller uit te voeren. Bekijk deze video voor een handige tip !
Chromium-probleem: 1243976
Nieuwe links naar de vertaalde release-opmerkingen en naar de pagina om een vertaalfout te melden.
Je kunt nu via het tabblad 'Wat is nieuw' de release-opmerkingen van DevTools in 6 andere talen lezen: Russisch , Chinees , Spaans , Japans , Portugees en Koreaans .
Sinds Chrome 94 kun je je voorkeurstaal instellen in de ontwikkelaarstools. Als je problemen ondervindt met de vertalingen, help ons dan deze te verbeteren door een vertaalprobleem te melden via Meer opties > Help > Een vertaalfout melden .
Chromium-problemen: 1246245 , 1245481
Verbeterde gebruikersinterface voor het DevTools-opdrachtmenu
Vond u het lastig om een bestand te zoeken in het opdrachtmenu ? Goed nieuws, de gebruikersinterface van het opdrachtmenu is nu verbeterd!
Open het opdrachtmenu om naar een bestand te zoeken met de sneltoets Control + P in Windows en Linux, of Command + P in macOS.
De verbeteringen aan de gebruikersinterface van het commandomenu worden nog steeds doorgevoerd, houd de updates in de gaten!
Chromium-probleem: 1201997
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.
- Details van het vensteropenerframe weergeven voor geopende vensters
- Open het paneel Netwerk vanuit het paneel Service Workers.
- Kopieer eigenschapwaarde
- Kopieer de stacktrace voor de netwerkinitiator.
- Voorbeeldweergave van de Wasm-variabelewaarde bij muisover.
- Evalueer de Wasm-variabele in de console.
- Consistente meeteenheden voor bestands-/geheugengroottes
- Markeer pseudo-elementen in het paneel Elementen.
- [Experimentele] CSS Flexbox-debugtools
- [Experimenteel] Pas de sneltoetsen voor akkoorden aan
- Nieuwe tools voor het debuggen van CSS Grid
- Nieuw WebAuthn-tabblad
- Verplaats gereedschappen tussen het bovenste en onderste paneel.
- Nieuw berekend zijbalkpaneel in het deelvenster Stijlen
- CSS-eigenschappen groeperen in het deelvenster Berekend
- Lighthouse 6.3 in het Lighthouse-paneel
-
performance.mark()gebeurtenissen in de sectie Timings - Nieuwe filters
resource-typeenurlin het netwerkpaneel. - Details van het frame bekijken updates
-
Settingsin het menu 'Meer tools' worden afgeschaft. - [Experimenteel] Bekijk en los problemen met kleurcontrast op in het CSS-overzichtspaneel
- [Experimenteel] Toetsenbord sneltoetsen aanpassen in DevTools
- Nieuw media panel
- Maak schermafbeeldingen van knooppunten met behulp van het contextmenu van het Elementenpaneel.
- Updates van het tabblad Problemen
- Emuleer ontbrekende lokale lettertypen
- Simuleer inactieve gebruikers
- Emulate
prefers-reduced-data - Ondersteuning voor nieuwe JavaScript-functies
- Lighthouse 6.2 in het Lighthouse-paneel
- De vermelding "andere oorsprong" in het paneel Service Workers wordt afgeschaft.
- Toon een dekkingsoverzicht voor gefilterde items
- Nieuwe weergave van framedetails in het toepassingspaneel
- Toegankelijke kleursuggestie in het deelvenster Stijlen
- Herstel het deelvenster Eigenschappen in het paneel Elementen
- Mensen leesbare
X-Client-Dataheaderwaarden in het netwerkpaneel - Automatisch aangepaste lettertypen aanvullen in het deelvenster Stijlen
- Toon het resourcetype consistent in het netwerkpaneel.
- Wis de knoppen in de panelen Elementen en Netwerk.
- Stijlbewerking voor CSS-in-JS-frameworks
- Vuurtoren 6 in het Vuurtorenpaneel
- Afschaffing van First Meaningful Paint (FMP)
- Ondersteuning voor nieuwe JavaScript-functies
- Nieuwe app-snelkoppelingswaarschuwingen in het Manifest-venster
- Servicemedewerker
respondWithgebeurtenissen in het tabblad Timing. - Consistente weergave van het paneel 'Berekend'
- Bytecode-offsets voor WebAssembly-bestanden
- Kopieer en knip regel voor regel in het paneel Bronnen
- Updates van de console-instellingen
- Updates van het prestatiepaneel
- Nieuwe pictogrammen voor breakpoints, conditionele breakpoints en logpoints.
- Los siteproblemen op met het nieuwe tabblad 'Problemen'.
- Bekijk toegankelijkheidsinformatie in de tooltip van de inspectiemodus.
- Updates van het prestatiepaneel
- Nauwkeurigere terminologie voor beloftes in de console
- Updates van het deelvenster Stijlen
- Het deelvenster Eigenschappen in het paneel Elementen wordt afgeschaft.
- Ondersteuning voor app-snelkoppelingen in het manifestvenster.
- Imiteer visuele beperkingen
- Simuleer locaties
- Foutopsporing van het Cross-Origin Embedder Policy (COEP)
- Nieuwe pictogrammen voor breakpoints, conditionele breakpoints en logpoints.
- Bekijk netwerkverzoeken die een specifieke cookie instellen.
- Plaats het dok links in het opdrachtmenu.
- De optie Instellingen in het hoofdmenu is verplaatst.
- Het auditpanel heet nu het Lighthouse-panel.
- Verwijder alle lokale overschrijvingen in een map.
- De gebruikersinterface voor lange taken is bijgewerkt.
- Ondersteuning voor maskeerbare pictogrammen in het manifestvenster.
- Moto G4-ondersteuning in apparaatmodus
- Updates met betrekking tot cookies
- Nauwkeurigere webapp-manifestpictogrammen
- Beweeg de muis over CSS-
contentom niet-geëscapte waarden te zien. - Foutmeldingen in de brontoewijzing in de console
- Instelling om te voorkomen dat er voorbij het einde van een bestand wordt gescrold.
- Ondersteuning voor het opnieuw declareren van
letenclassin de console. - Verbeterde WebAssembly-debugging
- Verzoek-initiatorketens in het tabblad Initiator
- Markeer het geselecteerde netwerkverzoek in het overzicht.
- De kolommen URL en pad in het netwerkpaneel
- Bijgewerkte User-Agent-strings
- Nieuwe gebruikersinterface voor het configureren van het auditpaneel
- Code coverage-modi per functie of per blok
- Code coverage moet nu worden gestart door de pagina opnieuw te laden.
- Onderzoek waarom een cookie werd geblokkeerd.
- Bekijk cookie-waarden
- Simuleer verschillende voorkeuren voor kleurschema's en voorkeuren voor minder beweging.
- Code-dekkingsupdates
- Onderzoek waarom een netwerkbron is aangevraagd.
- De panelen Console en Bronnen respecteren de inspringvoorkeuren weer.
- Nieuwe sneltoetsen voor cursornavigatie
- Ondersteuning voor meerdere klanten in het auditpaneel
- Foutopsporing van de betalingsverwerker
- Lighthouse 5.2 in het paneel Audits
- Grootste inhoudelijke verf in het prestatiepaneel
- Meld problemen met DevTools via het hoofdmenu.
- Elementstijlen kopiëren
- Visualiseer lay-outverschuivingen
- Lighthouse 5.1 in het paneel Audits
- OS-thema synchronisatie
- Sneltoets voor het openen van de Breakpoint Editor
- Prefetch-cache in het netwerkpaneel
- Privé-eigenschappen bij het bekijken van objecten
- Meldingen en pushberichten in het toepassingspaneel
- Automatisch aanvullen met CSS-waarden
- Een nieuwe gebruikersinterface voor netwerkinstellingen
- WebSocket-berichten in HAR-exports
- HAR-import- en exportknoppen
- Realtime geheugengebruik
- Registratienummers van servicepersoneel
- Inspecteer de gebeurtenissen Achtergrond Fetch en Achtergrond Sync
- Puppeteer voor Firefox
- Betekenisvolle voorinstellingen bij het automatisch aanvullen van CSS-functies
- Wis sitegegevens via het opdrachtmenu.
- Bekijk alle IndexedDB-databases
- Bekijk de ongecomprimeerde grootte van een bron door de muis eroverheen te bewegen.
- Inline breakpoints in het deelvenster Breakpoints
- IndexedDB- en cacheresourcetellingen
- Instelling om de gedetailleerde tooltip 'Inspecteren' uit te schakelen
- Instelling voor het in- of uitschakelen van tab-inspringing in de editor
- Markeer alle knooppunten die door de CSS-eigenschap worden beïnvloed.
- Lighthouse v4 in het Auditpaneel
- WebSocket binaire berichtviewer
- Maak een schermafbeelding van het gebied dat u vastlegt in het opdrachtmenu.
- Filters voor serviceworkers in het netwerkpaneel
- Updates van het prestatiepaneel
- Lange taken in Performance-panelopnames
- Eerste verfbeurt in het gedeelte 'Tijd'
- Bonustip: Snelkoppeling voor het bekijken van RGB- en HSL-kleurcodes (video)
- Logpunten
- Gedetailleerde tooltips in de inspectiemodus.
- Code-dekkingsgegevens exporteren
- Navigeer door de console met een toetsenbord.
- De lijn voor de AAA-contrastverhouding in de kleurenkiezer.
- Sla aangepaste geolocatie-overrides op.
- Code vouwen
- Het tabblad Frames is hernoemd naar het tabblad Berichten.
- Bonustip: Filteren op eigenschap in het netwerkpaneel (video)
- Visualiseer prestatiestatistieken in het paneel Prestaties.
- Markeer tekstknooppunten in de DOM-boom.
- Kopieer het JS-pad naar een DOM-node.
- Updates voor het auditpaneel , waaronder een nieuwe audit die JavaScript-bibliotheken detecteert en nieuwe trefwoorden voor toegang tot het auditpaneel via het opdrachtmenu.
- Bonustip: Gebruik de apparaatmodus om mediaquery's (video) te inspecteren.
- Beweeg de muis over een Live Expression-resultaat om een DOM-knooppunt te markeren.
- Sla DOM-nodes op als globale variabelen.
- Informatie over initiatiefnemers en prioriteiten is nu beschikbaar in de HAR-import- en exportgegevens.
- Open het opdrachtmenu vanuit het hoofdmenu.
- Picture-in-Picture-breekpunten
- Bonustip: Gebruik
monitorEvents()om de gebeurtenissen die een node genereert in de console te loggen (video). - Live-expressies in de console
- Markeer DOM-knooppunten tijdens Eager Evaluation.
- Optimalisaties van het prestatiepaneel
- Betrouwbaarder debuggen
- Schakel netwerkbeperking in via het opdrachtmenu.
- Voorwaardelijke breekpunten voor automatisch aanvullen
- Onderbreek bij AudioContext-gebeurtenissen
- Debug Node.js-apps met ndb
- Bonustip: Meet daadwerkelijke gebruikersinteracties met de User Timing API.
- Enthousiaste evaluatie
- Argumentatietips
- Functie-autocompletie
- ES2017-trefwoorden
- Lighthouse 3.0 in het paneel Audits
- BigInt-ondersteuning
- Eigenschapspaden toevoegen aan het deelvenster 'Watch'
- "Tijdstempels weergeven" is verplaatst naar Instellingen
- Bonustip: Minder bekende consolemethoden (video)
- Zoeken in alle netwerkheaders
- Voorbeelden van CSS-variabelewaarden
- Kopiëren als ophalen
- Nieuwe auditfuncties, configuratieopties voor de desktop en de mogelijkheid om traceringen te bekijken.
- Stop oneindige lussen
- Gebruikerstiming in de tabbladen Prestaties
- JavaScript VM-instanties worden duidelijk weergegeven in het geheugenpaneel.
- Het tabblad Netwerk is hernoemd naar tabblad Pagina.
- Updates voor het donkere thema
- Informatie over certificaattransparantie in het beveiligingspaneel
- Site-isolatiefuncties in het prestatiepaneel
- Bonustip: Lagenpaneel + Animatie-inspecteur (video)
- Blackboxing in het netwerkpaneel
- Automatisch aanpassen van de zoom in de apparaatmodus
- Opmaak van de tekst in de tabbladen Voorbeeld en Reactie
- HTML-inhoud bekijken in het tabblad Voorbeeld.
- Lokale overschrijvingen voor stijlen binnen HTML
- Bonustip: Blackbox framework scripts om Event Listener Breakpoints nuttiger te maken
- Lokale overschrijvingen
- Nieuwe toegankelijkheidstools
- Het tabblad Wijzigingen
- Nieuwe SEO- en prestatieaudits
- Meerdere opnames in het paneel 'Prestaties'
- Betrouwbare code-stapsgewijze uitvoering met workers in asynchrone code
- Bonustip: Automatiseer DevTools-acties met Puppeteer (video)
- Prestatiemonitor
- Console zijbalk
- Groepeer vergelijkbare consoleberichten
- Bonustip: De hover-pseudoklasse in-/uitschakelen (video)
- Ondersteuning voor debuggen op afstand met meerdere clients
- Werkruimtes 2.0
- 4 nieuwe audits
- Simuleer pushmeldingen met aangepaste gegevens.
- Activeer achtergrondsynchronisatiegebeurtenissen met aangepaste tags.
- Bonustip: Breekpunten voor gebeurtenislisteners (video)
- Topniveau wacht op je in de console.
- Nieuwe workflows voor screenshots
- CSS Grid-markering
- Een nieuwe console-API voor het opvragen van objecten.
- Nieuwe consolefilters
- HAR-importen in het netwerkpaneel
- Cachebronnen die in een voorbeeld kunnen worden weergegeven
- Voorspelbaardere foutopsporing van de cache
- Codedekking op blokniveau
- Simulatie van het beperken van de bandbreedte van mobiele apparaten
- Bekijk het opslaggebruik
- Bekijk wanneer een service worker reacties in de cache heeft opgeslagen
- Schakel de FPS-meter in via het opdrachtmenu.
- Stel het gedrag van het muiswiel in op zoomen of scrollen.
- Debugging-ondersteuning voor ES6-modules
- Nieuw auditpanel
- Badges van derden
- Een nieuw gebaar voor 'Ga hierheen'.
- Stap over naar asynchroon
- Meer informatieve objectvoorbeelden in de console
- Meer informatieve contextselectie in de console
- Realtime updates in het tabblad Dekking.
- Eenvoudigere opties voor netwerkbeperking
- Asynchrone stacks zijn standaard ingeschakeld.
- CSS- en JS-codedekking
- Schermafbeeldingen van een volledige pagina
- Blokkeer verzoeken
- Stap over async await heen
- Gecombineerd opdrachtmenu