Deze pagina is vertaald door de Cloud Translation API.

Wat is er nieuw in DevTools (Chrome 94)

Jecelyn Yeen

Gebruik DevTools in de taal van uw voorkeur

Chrome DevTools ondersteunt nu meer dan 80 talen, zodat u in de taal van uw voorkeur kunt werken!

Open Instellingen , selecteer vervolgens uw voorkeurstaal onder de vervolgkeuzelijst Voorkeuren > Taal en laad DevTools opnieuw.

Voorkeuren" width="800" height="494">

Chroomuitgave: 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 schakelen Selecteer Nest Hub of Nest Hub Max onder de apparatenlijst.

Nest Hub-apparaat in de apparaatmodus

Chroomuitgave: 1223525

Origin-proefversies in de weergave Framedetails

U kunt nu informatie krijgen over de oorsprongsproeven van een site in de framedetailsweergave onder het paneel Toepassingen.

Origin-proefversies geven u toegang tot een nieuwe of experimentele functie, waarmee u functionaliteit kunt opbouwen die uw gebruikers een beperkte tijd kunnen uitproberen voordat de functie voor iedereen beschikbaar wordt gemaakt.

Open een pagina met origin-proefversies (bijvoorbeeld demopagina ). Blader in het toepassingspaneel omlaag naar de sectie Frames en selecteer het bovenste frame.

Origin-proefversies in de weergave Framedetails

Chroomuitgave: 607555

Nieuwe badge voor CSS-containerquery's

Er wordt een nieuwe containerbadge toegevoegd naast de containerelementen (de bovenliggende elementen die voldoen aan de criteria van @container at-rules). Klik op de badge om de weergave van een overlay van de gekozen container en al zijn ondervragende nakomelingen op de pagina in of uit te schakelen.

Badge voor CSS-containerquery's

Chroomuitgave: 1146422

Nieuw selectievakje om de netwerkfilters om te keren

Gebruik het nieuwe selectievakje Omkeren om de filters in het netwerkpaneel om te keren.

U kunt bijvoorbeeld "statuscode: 404" typen om de netwerkverzoeken met status 404 te filteren. Schakel het selectievakje Omkeren in om het filter te negeren (toon alle netwerkverzoeken die niet de status 404 hebben).

Keer de netwerkfilters om

Chroomuitgave: 1054464

Aankomende beëindiging van de Console-zijbalk

De consolezijbalk wordt verwijderd en de filter-UI wordt verplaatst naar de werkbalk. Heeft u vragen of feedback? Laat het ons weten via deze issuetracker .

Bericht over beëindiging van de consolezijbalk

Chroomuitgave: 1232937

Geef onbewerkte `Set-Cookie` headers weer op het tabblad Problemen en het paneel Netwerk

DevTools geeft nu onbewerkte Set-Cookie headers weer op het tabblad Problemen .

Voorheen toonde DevTools geen verkeerd ingedeelde cookies (onjuiste Set-Cookie header) in het netwerkpaneel. Met het nieuwe response-header-set-cookie filter toegevoegd in het netwerkpaneel kunnen gebruikers het onbewerkte Set-Cookie headerantwoord filteren. DevTools koppelt de onbewerkte Set-Cookie headers op het tabblad Problemen aan het netwerkpaneel .

Onbewerkte 'Set-Cookie'-headers op het tabblad Problemen en het netwerkpaneel

Chroomuitgave: 1179186

Consistente weergave van native accessors als eigen eigenschappen in de console

De console geeft native accessors nu consistent weer als hun eigen eigenschappen.

Bij het evalueren van de new Int8Array([1, 2, 3]) expressie in de Console werden bijvoorbeeld native accessors zoals length , byteOffset niet weergegeven in de preview. Met deze nieuwste update worden native accessors in de preview getoond en worden waarden gretig geëvalueerd wanneer ze worden uitgevouwen.

Consistente weergave van native accessors als eigen eigenschappen in de console

Chroomafgiften: 1076820 , 1199247

Juiste foutstapeltraceringen voor inline scripts met #sourceURL

DevTools lost nu inline scripts met #sourceURL correct op en toont de juiste foutstack-traceringen voor foutopsporing.

Voorheen gaf DevTools een onjuiste locatie weer voor inline scripts met #sourceURL , relatief ten opzichte van het omringende document in plaats van relatief ten opzichte van de openingstag <script> .

Juiste foutstapeltraceringen voor inline scripts met #sourceURL

Chroomafgiften: 1183990 , 578269

Wijzig de kleurindeling in het deelvenster Berekend

U kunt nu de kleurindeling van elk element in het berekende venster wijzigen door Shift + klik op het kleurvoorbeeld.

Shift+klik op het kleurvoorbeeld om het kleurformaat te wijzigen

Chroomuitgave: 1226371

DevTools gebruikt nu native HTML-tooltips voor alle componenten. DevTools heeft al lange tijd een aangepaste tooltip-implementatie vanwege het gebrek aan stijl van een native HTML-tooltip.

Helaas is het onderhouden van een aangepaste tooltip-implementatie ingewikkeld en komen we regelmatig ingewikkelde bugs tegen.

Nadat we de voordelen van de aangepaste implementaties opnieuw hebben gewogen, komen we tot de conclusie dat de native HTML-tooltips voldoende zijn voor DevTools en dat het overnemen van de tooltips een grote verscheidenheid aan problemen voor onze gebruikers voorkomt.

DevTools-tooltip

Chroomuitgave: 1223391

[Experimenteel] Verberg problemen op het tabblad Problemen

Schakel het menu-experiment voor het verbergen van problemen in om problemen op het tabblad Problemen te verbergen. Zo kunt u zich richten op de zaken die voor u belangrijk zijn.

Plaats op het tabblad Probleem de muisaanwijzer op een probleem en klik op het probleemmenu aan de rechterkant selecteert u Problemen zoals deze verbergen om deze te verbergen.

Experimenteel contextmenu voor probleem verbergen

Chroomuitgave: 1175722

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

Stuur ons een suggestie of feedback via crbug.com .
Rapporteer een DevTools-probleem met behulp van de opties Meer > Help > Rapporteer een DevTools-probleem in DevTools.
Tweet op @ChromeDevTools .
Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .