Wat is er nieuw in DevTools (Chrome 94)

Jecelyn Yeen

Gebruik DevTools in uw voorkeurstaal

Chrome DevTools ondersteunt nu meer dan 80 talen, zodat u in uw voorkeurstaal kunt werken!

Open Instellingen , selecteer de gewenste taal onder de vervolgkeuzelijst Voorkeuren > Taal en laad DevTools opnieuw.

Voorkeuren" breedte="800" hoogte="494">

Chromium-probleem: 1163928

Nieuwe Nest Hub-apparaten in de apparaatenlijst

U kunt nu de afmetingen van Nest Hub en Nest Hub Max simuleren in de apparaatmodus .

Klik op de knop Apparaatwerkbalk in-/uitschakelen , selecteer Nest Hub of Nest Hub Max onder de lijst met apparaten.

Chromium-probleem: 1223525

Oorsprongsproeven in het Frame-detailsoverzicht

U kunt nu informatie over de oorsprongsproeven van een site vinden in het framedetailsoverzicht onder het paneel Toepassing.

Met Origin-proefversies krijgt u toegang tot een nieuwe of experimentele functie, waarmee u functionaliteit kunt bouwen die uw gebruikers gedurende een beperkte tijd kunnen uitproberen voordat de functie voor iedereen beschikbaar wordt gesteld.

Open een pagina met originele proefversies (bijvoorbeeld een demopagina ). Scrol in het paneel 'Toepassing' naar beneden naar het gedeelte 'Frames' en selecteer het bovenste frame.

Chromium-probleem: 607555

Nieuwe CSS-containerquery's-badge

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 query-afstammelingen op de pagina in of uit te schakelen.

Chromium-probleem: 1146422

Nieuw selectievakje om de netwerkfilters om te keren

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

U kunt bijvoorbeeld 'status-code: 404' typen om de netwerkverzoeken met status 404 te filteren. Schakel het selectievakje Omkeren in om het filter te negeren (alle netwerkverzoeken weergeven die geen status 404 hebben).

Chromium-probleem: 1054464

Aankomende veroudering van de console-zijbalk

De consolezijbalk wordt verwijderd en de filterinterface wordt verplaatst naar de werkbalk. Heeft u vragen of feedback? Laat het ons weten via deze issue tracker .

Chromium-probleem: 1232937

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

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

Voorheen toonde DevTools geen misvormde cookies (onjuiste Set-Cookie header) in het paneel Netwerk. Met het nieuwe filter response-header-set-cookie in het paneel Netwerk kunnen gebruikers de onbewerkte Set-Cookie headerrespons filteren. DevTools koppelt de onbewerkte Set-Cookie headers op het tabblad Problemen aan het paneel Netwerk .

Chromium-probleem: 1179186

Consistente weergave van native accessors als eigen eigenschappen in de console

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

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

Chromium-problemen: 1076820 , ​​1199247

Correcte foutstapeltraceringen voor inline-scripts met #sourceURL

DevTools verwerkt inline-scripts met #sourceURL nu op de juiste manier en toont de juiste stacktraceringen voor fouten bij het opsporen van fouten.

Voorheen gaf DevTools de 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> .

Chromium-problemen: 1183990 , ​​578269

Kleuropmaak wijzigen in het Berekend-paneel

U kunt nu de kleuropmaak van elk element in het Berekend-paneel wijzigen door Shift + te klikken op de kleurvoorvertoning.

Chromium-probleem: 1226371

Vervang aangepaste tooltips door native HTML-tooltips

DevTools maakt nu gebruik van native HTML-tooltips voor alle componenten. DevTools had lange tijd een aangepaste tooltip-implementatie vanwege het gebrek aan styling van een native HTML-tooltip.

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

Nadat we de voordelen van de aangepaste implementaties opnieuw hebben beoordeeld, concluderen we dat de native HTML-tooltips voldoende zijn voor DevTools. Door de tooltips te implementeren, voorkomen we bovendien een groot aantal problemen voor onze gebruikers.

Chromium-probleem: 1223391

[Experimenteel] Problemen verbergen op het tabblad Problemen

Schakel het experiment 'Problemen verbergen' in om problemen op het tabblad 'Problemen' te verbergen. Zo kunt u zich concentreren op de belangrijke problemen die voor u van belang zijn.

Beweeg in het tabblad Probleem de muis over een probleem en klik op het menu Probleem Selecteer rechts 'Problemen als deze verbergen' om het probleem te verbergen.

Chromium-probleem: 1175722

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 more_vert 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 dat in de serie Wat is er nieuw in DevTools is behandeld.