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.

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.

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.

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).

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 .

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 .

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.

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> .

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.

Chroomuitgave: 1226371

Vervang aangepaste tooltips door native HTML-tooltips

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.

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.

Chroomuitgave: 1175722

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

• Stuur feedback en functieverzoeken naar ons op crbug.com .
• Rapporteer een DevTools-probleem met more_vert Meer opties > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .