Vind het paasei
Om 1 april te vieren, heeft het DevTools-team ergens in DevTools een easter egg verstopt.
Om het te vinden, moet je zoeken naar een kleurrijke 💫-emoji.
Updates van het elementenpaneel
Deze versie bevat diverse updates voor het Elementenpaneel .
Een gerichte pagina emuleren in Elementen > Stijlen
Het tabblad Elementen > Stijlen heeft nu de optie ' Een pagina met focus emuleren' de knop 'Elementstatus in-/uitschakelen' ( :hov ). Voorheen vond u deze optie alleen in het paneel Rendering .
Als u de focus van de pagina naar DevTools verplaatst, worden sommige overlay-elementen automatisch verborgen als ze door de focus worden geactiveerd. Bijvoorbeeld vervolgkeuzelijsten, menu's of datumkiezers. Met de optie Een pagina met focus emuleren kunt u een dergelijk element debuggen alsof het de focus heeft.
Chromium-probleem: 1468393 .
Kleurenkiezer, hoekklok en easing-editor in var() fallbacks
Om CSS-bewerking te vereenvoudigen, kunt u via het tabblad Elementen > Stijlen nu Kleurenkiezer , Hoekklok en Easing Editor gebruiken in var() fallbacks.
Chromium-probleem: 1520417 .
CSS-lengtetool is verouderd
De tool voor het schrijven van CSS-lengtes is verouderd vanwege feedback waaruit blijkt dat het de workflow vertraagt en niet veel waarde toevoegt.
U kunt niet langer slepen om de waarde aan te passen of een eenheidstype te selecteren in het vervolgkeuzemenu. Dubbelklik in plaats daarvan op de waarde en typ een nieuwe waarde.
Om de lengtetool weer in te schakelen, wist u Instellingen > Experimenten > Verouderde CSS <lengte>-authoringtool in het tabblad Stijlen .
Als je deze tool toch wilt gebruiken, wil het DevTools-team graag je mening horen en hoe de lengtetool je helpt in je workflow. Laat gerust feedback achter in crbug/1522657 .
Popover voor het geselecteerde zoekresultaat in het spoor Prestaties > Hoofd
Om het zoeken te vergemakkelijken, wordt in het vlamdiagram in het spoor Prestaties > Hoofd nu een pop-upvenster weergegeven boven de overeenkomstige gebeurtenis wanneer u door de zoekresultaten bladert.
Chromium-probleem: 1523279 .
Updates van het netwerkpaneel
Deze versie bevat een aantal updates voor het Netwerkpaneel .
Knop Wissen en zoekfilter op het tabblad Netwerk > EventStream
Het tabblad Netwerk > EventStream bevat:
- Een Wissen -knop waarmee vastgelegde gebeurtenissen in de tabel worden gewist.
- Een zoekfilter dat reguliere expressies begrijpt.
Het DevTools-team wil Charles Vazac bedanken voor het realiseren van deze functie.
Bovendien registreert het tabblad EventStream nu ook gebeurtenissen die servers via fetch/XHR versturen, niet alleen via de EventSource API . Probeer het op deze demopagina .
Chromium-probleem: 1488863 , 40659493 .
Tooltips met uitzonderingsredenen voor cookies van derden in Netwerk > Cookies
Op het tabblad Netwerk > Cookies worden nu tooltips met uitzonderingsredenen weergegeven naast cookies die anders door de uitfasering van cookies van derden hadden moeten worden geblokkeerd.
Cookies van derden kunnen om de volgende redenen worden toegestaan:
- Chrome Enterprise-beleid
- Opslagtoegangs-API of opslagtoegangs-API op het hoogste niveau
- Proefperiode voor het afschaffen van cookies van derden of de respijtperiode ervan
- Heuristiek voor het afbouwen van cookies van derden
- Gebruikersvoorkeur
Chromium-probleem: 41491846 .
Alle breekpunten in Bronnen in- en uitschakelen
De sectie Bronnen > Breekpunten brengt de opties ' Alle breekpunten in- en uitschakelen' terug naar het dropdownmenu. Voorheen waren deze opties weggelaten door het nieuwe ontwerp van de breekpunten .
Om alle breekpunten in of uit te schakelen, klikt u met de rechtermuisknop op een breekpunt in Bronnen > Breekpunten en selecteert u de overeenkomstige optie.
Chromium-probleem: 1522037 .
Bekijk geladen scripts in DevTools voor Node.js
DevTools voor Node.js toont nu geladen scripts in de navigatieboom in Bronnen > Scripts .
Chromium-probleem: 1518364 .
Vuurtoren 11.5.0
Het Lighthouse -paneel draait nu op Lighthouse 11.5.0. Bekijk de volledige lijst met wijzigingen .
Een van de opvallende wijzigingen is een nieuwe audit die de grondoorzaken van lay-outverschuivingen inschat. Deze audit vervangt de layout-shift-elementen audit, die alleen de elementen vermeldde die door lay-outverschuivingen werden beïnvloed.
Voor de basisbeginselen van het gebruik van het Lighthouse- paneel in DevTools raadpleegt u Lighthouse: Optimaliseer de snelheid van uw website .
Chromium-probleem: 772558 .
Toegankelijkheid
Deze versie heeft de volgende verbeteringen op het gebied van toegankelijkheid:
- Schermlezers kondigen nu aan:
- De tekst van de koppeling Meer informatie naast de selectortypen in het paneel Recorder .
- Wanneer er geen experimenten zijn die voldoen aan het filter in Instellingen > Experimenten .
- De actiebevestiging bij het verwijderen, bevestigen of herstellen van een snelkoppeling in Instellingen > Snelkoppelingen .
- De tabel in > Locaties wordt nu correct weergegeven als een tabel voor toegankelijkheidshulpmiddelen.
Chromium-problemen: 1516957 , 324282443 , 324467508 , 324930007 .
Diverse hoogtepunten
Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:
- Lettertypen in DevTools zijn bijgewerkt zodat ze overeenkomen met Chrome ( 1523538 ).
- Prestaties : Schermafbeeldingen worden weergegeven wanneer de muis over de tijdlijn beweegt ( 1519469 ).
- Bronnen : De regelhoogte in de Editor is vergroot voor een betere leesbaarheid van de code ( 1523640 ).
- Netwerk > Reacties : Diverse weergaveproblemen met verschillende formaten en coderingen ( 1523128 , 1509336 , 1523128 , 41481944 , 1509336 ) zijn opgelost.
Download de previewkanalen
Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!
Neem contact op met het Chrome DevTools-team
Gebruik de volgende opties om nieuwe functies, updates of iets anders met betrekking tot DevTools te bespreken.
- Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
- Meld een DevTools-probleem met Meer opties > Help > Meld een DevTools-probleem in DevTools.
- Tweet naar @ChromeDevTools .
- Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .
Wat is er nieuw in DevTools
Een lijst met alles wat in de serie Wat is er nieuw in DevTools is behandeld.
- Debug meer inzichten met Gemini
- De 'Save-Data'-header in 'Netwerkvoorwaarden' emuleren
- Bekijk de basislijnstatus in een CSS-eigenschapstooltips
- Formulierfactoren in hints van gebruikersagentclients overschrijven
- Vuurtoren 12.8.0
- Diverse hoogtepunten
- Een betrouwbaardere en productievere Chrome DevTools
- Upload afbeeldingen met AI-ondersteuning voor styling
- Voeg aanvraagheaders toe aan de tabel in Netwerk
- Bekijk de hoogtepunten van Google I/O 2025
- Diverse hoogtepunten
- Verbeteringen aan het prestatiepaneel
- Vooraf verbonden oorsprongen in inzicht in 'Netwerk afhankelijkheidsboom'
- Serverrespons- en omleidingstijden in 'Documentaanvraaglatentie'-inzicht
- Omleidingen in Overzicht van netwerkverzoeken
- Minder ruis in de prestatietracering
- Verouderde 'JavaScript-voorbeelden uitschakelen'
- Geolocatienauwkeurigheidsparameter in sensoren
- Verbeteringen aan het elementenpaneel
- Debug complexe CSS-waarden eenvoudiger
- @function-ondersteuning in Elementen > Stijlen
- Verbeteringen aan het netwerkpaneel
- heeft-aanvraag-header filter
- Directe sockets in geïsoleerde web-apps
- Diverse hoogtepunten
- Toegankelijkheid
- Google I/O 2025-editie
- Wijzig en bewaar CSS-wijzigingen in uw werkruimte met Gemini
- Verbind een werkruimtemap en sla de wijzigingen op in uw bronbestanden
- Vraag Gemini naar prestatie-inzichten
- Prestatiebevindingen annoteren met Gemini
- Voeg screenshots toe aan je chats met Gemini
- Nieuwe inzichten in het Prestatiepaneel
- Gedupliceerde JavaScript
- Legacy JavaScript
- Speculaties ondersteunen nu regeltags
- Vuurtoren 12.6.0
- Diverse hoogtepunten
- Toegankelijkheid
- Verbeteringen aan het prestatiepaneel
- Nieuwe prestatie-inzichten
- Klik om te markeren
- Servertimings in Overzicht van netwerkverzoeken
- Cookies filteren in 'Privacy en beveiliging'
- Afmetingen in kB-eenheden in tabellen over panelen
- Autocomplete ondersteunt corner-shape en corner-*-shape in Elementen > Stijlen
- Experimenteel: Problemen met elementen en kenmerken in DOM markeren
- Vuurtoren 12.5.0
- Diverse hoogtepunten
- Verbeteringen aan het prestatiepaneel
- Oorsprong- en scriptkoppelingen voor profiel- en functieaanroepen in Prestatie
- LCP-veldgegevensondersteuning per fase
- Inzicht in netwerkafhankelijkheidsboom
- Duur in plaats van totaal en eigen tijd in Samenvatting
- Zwaarste stapelmarkering
- Verbeterde lege toestanden voor verschillende panelen
- Toegankelijkheidsboomweergave in Elementen
- Vuurtoren 12.4.0
- Diverse hoogtepunten
- Privacy- en beveiligingspaneel
- Verbeteringen aan het prestatiepaneel
- Gekalibreerde CPU-throttling-presets
- Selecteer verschillende prestatiegebeurtenissen in dezelfde AI-chat
- Eerste- en derdepartij-highlighting in Prestaties
- Veldgegevens in markertooltips en inzichten
- Gedwongen reflow-inzicht
- Inzicht in 'DOM-grootte optimaliseren'
- Breid de prestatietracering uit met console.timeStamp
- Verbeteringen aan het elementenpaneel
- Realtimewaarden van geanimeerde stijlen
- Ondersteuning voor :open pseudo-klasse en verschillende pseudo-elementen
- Kopieer alle consoleberichten
- Byte-eenheden in het geheugenpaneel
- Diverse hoogtepunten
- Blijvende AI-chatgeschiedenis
- Verbeteringen aan het prestatiepaneel
- Inzicht in beeldlevering
- Klassieke en moderne toetsenbordnavigatie
- Negeer irrelevante scripts in de vlamgrafiek
- Tijdlijnmarkering en bereikmarkering bij zweven
- Aanbevolen instellingen voor throttling
- Tijdmarkeringen in een overlay
- Stack traces van JS-aanroepen in Samenvatting
- Badge-instellingen verplaatst naar menu in Elementen
- Nieuw 'Wat is er nieuw'-paneel
- Vuurtoren 12.3.0
- Diverse hoogtepunten
- Debug netwerkverzoeken, bronbestanden en prestatietraceringen met Gemini
- Bekijk AI-chatgeschiedenis
- Beheer extensieopslag in Toepassing > Opslag
- Prestatieverbeteringen
- Interactiefasen in live-statistieken
- Informatie over het blokkeren van weergaven op het tabblad Samenvatting
- Ondersteuning voor scheduler.postTask-gebeurtenissen en hun initiatorpijlen
- Verbeteringen aan het paneel Animaties en het tabblad Elementen > Stijlen
- Ga van Elementen > Stijlen naar Animaties
- Realtime-updates op het tabblad Berekend
- Bereken druk-emulatie in sensoren
- JS-objecten met dezelfde naam gegroepeerd op bron in het paneel Geheugen
- Een nieuwe look voor instellingen
- Het paneel Prestatie-inzichten is verouderd en verwijderd uit DevTools
- Diverse hoogtepunten
- CSS debuggen met Gemini
- Beheer AI-functies in een speciaal tabblad Instellingen
- Verbeteringen aan het prestatiepaneel
- Prestatiebevindingen annoteren en delen
- Krijg direct inzicht in prestaties in het paneel Prestaties
- Overmatige lay-outverschuivingen gemakkelijker opsporen
- Ontdek de niet-samengestelde animaties
- Hardwareconcurrentie verhuist naar sensoren
- Negeer anonieme scripts en concentreer je op je code in stack traces
- Elementen > Stijlen: Ondersteuning voor zijwaartse* schrijfmodi voor rasteroverlays en CSS-brede trefwoorden
- Lighthouse-audits voor niet-HTTP-pagina's in de tijdspanne- en momentopnamemodi
- Verbeteringen in toegankelijkheid
- Diverse hoogtepunten
- Verbeteringen aan het netwerkpaneel
- Netwerkfilters opnieuw ontworpen
- HAR-exporten sluiten nu standaard gevoelige gegevens uit
- Verbeteringen aan het elementenpaneel
- Automatisch aanvullen van waarden voor text-emphasis-* eigenschappen
- Scroll overflows gemarkeerd met een badge
- Verbeteringen aan het prestatiepaneel
- Aanbevelingen in live statistieken
- Navigeren door broodkruimels
- Verbeteringen aan het geheugenpaneel
- Nieuw profiel 'Losse elementen'
- Verbeterde naamgeving van eenvoudige JS-objecten
- Dynamische thema's uitschakelen
- Chrome-experiment: proces delen
- Vuurtoren 12.2.1
- Diverse hoogtepunten
- Recorder ondersteunt export naar Puppeteer voor Firefox
- Verbeteringen aan het prestatiepaneel
- Live metrische observaties
- Zoekopdrachten in het Netwerkspoor
- Bekijk stack traces van performance.mark en performance.measure aanroepen
- Testadresgegevens gebruiken in het paneel Automatisch invullen
- Verbeteringen aan het elementenpaneel
- Dwing meer staten af voor specifieke elementen
- Elementen > Stijlen vullen nu automatisch meer rastereigenschappen in
- Vuurtoren 12.2.0
- Diverse hoogtepunten
- Console-inzichten van Gemini worden in de meeste Europese landen live
- Updates van het prestatiepaneel
- Enhanced Network-track
- Pas prestatiegegevens aan met de uitbreidbaarheids-API
- Details in het Timings-spoor
- Kopieer alle weergegeven verzoeken in het paneel Netwerk
- Snellere heap snapshots met benoemde HTML-tags en minder rommel
- Open het Animatiepaneel om animaties vast te leggen en @keyframes live te bewerken
- Vuurtoren 12.1.0
- Verbeteringen in toegankelijkheid
- Diverse hoogtepunten
- Controleer de CSS-ankerpositie in het Elementenpaneel
- Verbeteringen aan het bronnenpaneel
- Verbeterde 'Nooit pauzeren hier'
- Nieuwe scroll snap-gebeurtenisluisteraars
- Verbeteringen aan het netwerkpaneel
- Bijgewerkte netwerkbeperkingsinstellingen
- Informatie over servicemedewerkers in aangepaste velden van het HAR-formaat
- WebSocket-gebeurtenissen verzenden en ontvangen in het Prestatiepaneel
- Diverse hoogtepunten
- Verbeteringen aan het prestatiepaneel
- Verplaats en verberg sporen met de bijgewerkte spoorconfiguratiemodus
- Negeer scripts in de vlamgrafiek
- Verlaag de CPU 20 keer
- Het paneel Prestatie-inzichten wordt verouderd
- Overmatig geheugengebruik detecteren met nieuwe filters in heapsnapshots
- Inspecteer opslagbuckets in Toepassing > Opslag
- Schakel self-XSS-waarschuwingen uit met een opdrachtregelvlag
- Vuurtoren 12.0.0
- Diverse hoogtepunten
- Begrijp fouten en waarschuwingen in de console beter met Gemini
- @position-try regels ondersteuning in Elementen > Stijlen
- Verbeteringen aan het bronnenpaneel
- Automatisch mooi afdrukken en haakjes sluiten configureren
- Afgehandelde afgewezen beloften worden herkend als betrapt
- Foutoorzaken in de console
- Verbeteringen aan het netwerkpaneel
- Inspecteer de kopteksten van Early Hints
- Verberg de watervalkolom
- Verbeteringen aan het prestatiepaneel
- CSS-selectorstatistieken vastleggen
- Volgorde wijzigen en tracks verbergen
- Negeer houders in het geheugenpaneel
- Vuurtoren 11.7.1
- Diverse hoogtepunten
- Nieuw paneel Automatisch invullen
- Verbeterde netwerkbeperking voor WebRTC
- Ondersteuning voor scroll-gestuurde animaties in het Animaties-paneel
- Verbeterde CSS-nestondersteuning in Elementen > Stijlen
- Verbeterde prestatiepaneel
- Verberg functies en hun kinderen in het vlamdiagram
- Pijlen van geselecteerde initiatiefnemers naar evenementen die zij hebben geïnitieerd
- Vuurtoren 11.6.0
- Tooltips voor speciale categorieën in Geheugen > Heap-snapshots
- Toepassing > Opslagupdates
- Bytes gebruikt voor gedeelde opslag
- Web SQL is volledig verouderd
- Verbeteringen aan het dekkingspaneel
- Het paneel Lagen is mogelijk verouderd
- JavaScript Profiler-deprecation: Fase vier, definitief
- Diverse hoogtepunten
- Vind het paasei
- Updates van het elementenpaneel
- Een gerichte pagina emuleren in Elementen > Stijlen
- Kleurenkiezer, hoekklok en easing-editor in
var()fallbacks - CSS-lengtetool is verouderd
- Popover voor het geselecteerde zoekresultaat in het spoor Prestaties > Hoofd
- Updates van het netwerkpaneel
- Knop Wissen en zoekfilter op het tabblad Netwerk > EventStream
- Tooltips met uitzonderingsredenen voor cookies van derden in Netwerk > Cookies
- Alle breekpunten in Bronnen in- en uitschakelen
- Bekijk geladen scripts in DevTools voor Node.js
- Vuurtoren 11.5.0
- Verbeteringen in toegankelijkheid
- Diverse hoogtepunten