Wat is er nieuw in DevTools (Chrome 90)

Jecelyn Yeen

Nieuwe CSS Flexbox-foutopsporingstools

DevTools heeft nu speciale CSS flexbox debugging tools!

CSS Flexbox-foutopsporingshulpmiddelen

Wanneer een HTML-element op uw pagina is voorzien display: flex of display: inline-flex , ziet u ernaast een flex in het paneel Elementen. Klik op de badge om de weergave van een flexoverlay op de pagina in of uit te schakelen.

In het deelvenster Stijlen kunt u op het nieuwe pictogram naast display: flex of display: inline-flex klikken om de Flexbox -editor te openen. De Flexbox-editor biedt een snelle manier om de eigenschappen van de Flexbox te bewerken. Probeer het zelf!

Het deelvenster Lay-out heeft bovendien een Flexbox- sectie, waarmee alle flexbox-elementen op de pagina worden weergegeven. U kunt de overlay van elk element in- of uitschakelen.

Flexbox-sectie in het deelvenster Lay-out

Chromium-problemen: 1166710 , 1175699

Nieuwe Core Web Vitals-overlay

Visualiseer en meet de prestaties van uw pagina beter met de nieuwe Core Web Vitals-overlay.

Core Web Vitals is een initiatief van Google om uniforme richtlijnen te bieden voor kwaliteitssignalen die essentieel zijn voor een geweldige gebruikerservaring op het web.

Open het opdrachtmenu , voer de opdracht Rendering weergeven uit en schakel vervolgens het selectievakje Core Web Vitals in.

De overlay geeft momenteel het volgende weer:

  • Largest Contentful Paint (LCP) : meet de laadprestaties . Voor een goede gebruikerservaring moet LCP binnen 2,5 seconden na het starten van de pagina plaatsvinden.
  • First Input Delay (FID) : meet de interactiviteit . Voor een goede gebruikerservaring moeten pagina's een FID hebben van minder dan 100 milliseconden .
  • Cumulatieve lay-outverschuiving (CLS) : meet de visuele stabiliteit . Voor een goede gebruikerservaring moeten pagina's een CLS van minder dan 0,1 aanhouden.

Core Web Vitals-overlay

Chromium-probleem: 1152089

Updates op het tabblad Problemen

Aantal problemen verplaatst naar de statusbalk van de console

Er is nu een nieuwe knop voor het tellen van problemen toegevoegd aan de statusbalk van de console om de zichtbaarheid van probleemwaarschuwingen te verbeteren. Deze vervangt de probleemmelding in de console .

Aantal problemen in de statusbalk van de console

Chromium-probleem: 1140516

Problemen met vertrouwde webactiviteit melden

Het tabblad Problemen meldt nu problemen met vertrouwde webactiviteit . Dit is bedoeld om ontwikkelaars te helpen de problemen met vertrouwde webactiviteit op hun sites te begrijpen en op te lossen, wat de kwaliteit van hun applicaties verbetert.

Open een vertrouwde webactiviteit. Open vervolgens de tabbladen 'Problemen' door op de knop 'Problemen tellen' in de statusbalk van de console te klikken om de problemen te bekijken. Bekijk deze presentatie van André voor meer informatie over het maken en implementeren van vertrouwde webactiviteiten.

Problemen met vertrouwde webactiviteit op het tabblad Problemen

Chromium-probleem: 1147479

Formatteer strings als (geldige) JavaScript-stringliteralen in de console

De console formatteert strings nu als geldige JavaScript-stringliterals in de console. Voorheen kon de console dubbele aanhalingstekens niet weglaten bij het afdrukken van strings.

Formatteer strings als (geldige) JavaScript-stringliteralen

Chromium-probleem: 1178530

Nieuw Trust Tokens-paneel in het toepassingspaneel

DevTools geeft nu alle beschikbare Trust Tokens weer in de huidige browsecontext in het nieuwe Trust Tokens- deelvenster onder het paneel Toepassing .

Trust Token is een nieuwe API die fraude helpt bestrijden en bots van echte mensen onderscheidt, zonder passieve tracking. Leer hoe u aan de slag kunt met Trust Tokens .

Nieuw Trust Tokens-paneel

Chromium-probleem: 1126824

De CSS-kleurengamma-mediafunctie emuleren

De CSS-kleurengamma-mediafunctie emuleren

Met de mediaquery color-gamut kunt u het geschatte kleurenbereik testen dat door de browser en het uitvoerapparaat wordt ondersteund. Als de mediaquery ' color-gamut: p3 bijvoorbeeld overeenkomt, betekent dit dat het apparaat van de gebruiker de Display-P3-kleurruimte ondersteunt.

Open het Opdrachtmenu , voer de opdracht Rendering weergeven uit en stel vervolgens de vervolgkeuzelijst CSS-mediafunctiekleurengamma emuleren in.

Chromium-probleem: 1073887

Verbeterde Progressive Web Apps-tooling

DevTools geeft nu een gedetailleerdere waarschuwing over de installeerbaarheid van Progressive Web Apps (PWA) weer in de console , met een link naar de documentatie .

Waarschuwing over de installeerbaarheid van PWA

In het deelvenster Manifest wordt nu een waarschuwingsbericht weergegeven als de manifestbeschrijving langer is dan 324 tekens.

Waarschuwing voor afkapping van PWA-beschrijving

Bovendien toont het Manifest- paneel nu een waarschuwing als de schermafbeelding van de PWA niet aan de vereisten voldoet. Lees hier meer over de eigenschap PWA -schermafbeeldingen en de bijbehorende vereisten.

Waarschuwing voor PWA-screenshot

Chromium-probleem: 1146450 , 1169689 , 965802

Nieuwe kolom Remote Address Space in het paneel 'Netwerk'

Gebruik de nieuwe kolom Remote Address Space in het deelvenster Netwerk om de IP-adresruimte van elke netwerkbron te bekijken.

Nieuwe kolom 'Externe adresruimte'

Chromium-probleem: 1128885

Prestatieverbeteringen

De laadprestaties van pagina's met geopende DevTools zijn nu verbeterd. In sommige extreme gevallen zagen we een tienvoudige prestatieverbetering.

DevTools verzamelt stacktraces en koppelt deze aan consoleberichten of asynchrone taken, zodat de ontwikkelaar ze later kan gebruiken in geval van een probleem. Omdat deze verzameling synchroon in de browser moet plaatsvinden, kan een trage verzameling van stacktraces de pagina aanzienlijk vertragen wanneer DevTools geopend is. We zijn erin geslaagd de overhead van het verzamelen van stacktraces aanzienlijk te verminderen.

Blijf op de hoogte voor een meer gedetailleerde technische blogpost over de implementatie.

Chromium-problemen: 1069425 , 1077657

Geef toegestane/niet-toegestane functies weer in de weergave Framedetails

In de weergave met framedetails wordt nu een lijst met toegestane en niet-toegestane browserfuncties weergegeven die worden beheerd door het machtigingenbeleid.

Machtigingsbeleid is een API van een webplatform waarmee een website het gebruik van browserfuncties in het eigen frame of in de iframes die de website insluit, kan toestaan ​​of blokkeren.

Toegestane/niet-toegestane functies op basis van toestemmingsbeleid

Chromium-probleem: 1158827

Nieuwe SameParty kolom in het Cookies-paneel

Het deelvenster Cookies in het toepassingspaneel geeft nu het SameParty -kenmerk van de cookies weer. Het SameParty -kenmerk is een nieuw Booleaans kenmerk dat aangeeft of een cookie moet worden opgenomen in verzoeken naar bronnen van dezelfde First-Party Sets .

SameParty-kolom

Chromium-probleem: 1161427

Verouderde niet-standaard fn.displayName -ondersteuning

Ondersteuning voor de niet-standaard fn.displayName is verouderd. Gebruik in plaats daarvan fn.name .

Voorbeeldgebruik van displayName

Chrome ondersteunt traditioneel de niet-standaardeigenschap fn.displayName , waarmee ontwikkelaars debugnamen kunnen beheren voor functies die verschijnen in error.stack en stacktraces van DevTools. In het bovenstaande voorbeeld zou de Call Stack voorheen noLongerSupport weergeven.

Vervang fn.displayName met de standaard fn.name , die configureerbaar is gemaakt (via Object.defineProperty ) in ECMAScript 2015 om de niet-standaard eigenschap fn.displayName te vervangen.

Ondersteuning voor fn.displayName is onbetrouwbaar en niet consistent in alle browsers. Het vertraagt ​​de verzameling van stack traces, een prijs die ontwikkelaars altijd betalen, ongeacht of ze fn.displayName daadwerkelijk gebruiken of niet.

Voorbeeldgebruik van de naam

Chromium-probleem: 1177685

Veroudering van Don't show Chrome Data Saver warning in het menu 'Instellingen'

De instelling Don't show Chrome Data Saver warning is verwijderd, omdat Chrome Data Saver is verouderd .

Verouderde instellingen voor 'Chrome Data Saver-waarschuwing niet weergeven'

Chromium-probleem: 1056922

Experimentele kenmerken

Automatische rapportage van problemen met laag contrast op het tabblad Problemen

DevTools heeft experimentele ondersteuning toegevoegd voor het automatisch melden van contrastproblemen op het tabblad Problemen.

Tekst met laag contrast is het meest voorkomende automatisch detecteerbare toegankelijkheidsprobleem op internet. Door deze problemen weer te geven op het tabblad Problemen, kunnen ontwikkelaars ze gemakkelijker ontdekken.

Open een pagina met problemen met een laag contrast (bijvoorbeeld deze demo ). Open vervolgens de tabbladen Problemen door op de knop Problemenaantal in de statusbalk van de console te klikken om de problemen te bekijken.

Automatische rapportage van problemen met laag contrast

Chromium-probleem: 1155460

Volledige toegankelijkheidsboomweergave in het Elementenpaneel

U kunt nu schakelen tussen de nieuwe en verbeterde, volledige toegankelijkheidsboomweergave van een pagina.

Het huidige toegankelijkheidsvenster biedt een beperkte weergave van de knooppunten en toont alleen de directe voorouderketen van het hoofdknooppunt tot het geïnspecteerde knooppunt. De nieuwe toegankelijkheidsboomweergave beoogt dit te verbeteren en maakt de toegankelijkheidsboom beter verkenbaar, nuttiger en gebruiksvriendelijker voor ontwikkelaars.

Nadat u het experiment hebt ingeschakeld, wordt er een nieuwe knop weergegeven in het paneel Elementen . Klik hierop om te schakelen tussen de bestaande DOM-boom en de volledige toegankelijkheidsboom.

Houd er rekening mee dat dit een experiment in een vroeg stadium is. We zijn van plan de functionaliteit in de loop van de tijd te verbeteren en uit te breiden.

Volledige toegankelijkheidsboomweergave

Chromium-probleem: 887173

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.

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.