Wat is er nieuw in DevTools (Chrome 90)

Jecelyn Yeen

Nieuwe CSS-flexbox-foutopsporingstools

DevTools heeft nu speciale CSS-flexbox-foutopsporingstools!

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

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

Bovendien heeft het Lay- outvenster een Flexbox -sectie, waarin alle flexbox-elementen op de pagina worden weergegeven. U kunt de overlay van elk element wijzigen.

Chroomuitgaves: 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 begeleiding te bieden voor kwaliteitssignalen die essentieel zijn voor het leveren van een geweldige gebruikerservaring op internet.

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

De overlay wordt momenteel weergegeven:

• Grootste Contentful Paint (LCP) : meet de laadprestaties . Om een ​​goede gebruikerservaring te bieden, moet LCP plaatsvinden binnen 2,5 seconden nadat de pagina voor het eerst wordt geladen.
• First Input Delay (FID) : meet de interactiviteit . Om een ​​goede gebruikerservaring te bieden, moeten pagina's een FID van minder dan 100 milliseconden hebben.
• Cumulatieve Layout Shift (CLS) : meet de visuele stabiliteit . Om een ​​goede gebruikerservaring te bieden, moeten pagina's een CLS van minder dan 0,1 behouden.

Chroomuitgave: 1152089

Updates van het tabblad Problemen

Aantal problemen verplaatst naar de consolestatusbalk

Er is nu een nieuwe knop voor het tellen van problemen toegevoegd aan de consolestatusbalk om de zichtbaarheid van waarschuwingen over problemen te verbeteren. Dit vervangt het probleembericht in de console .

Chroomuitgave: 1140516

Rapporteer problemen met vertrouwde webactiviteiten

Op het tabblad Problemen worden nu problemen met vertrouwde webactiviteiten gerapporteerd. Dit is bedoeld om ontwikkelaars te helpen de Trusted Web Activity-problemen van hun sites te begrijpen en op te lossen, waardoor de kwaliteit van hun applicaties wordt verbeterd.

Open een vertrouwde webactiviteit. Open vervolgens de tabbladen Problemen door op de knop Problemen tellen in de consolestatusbalk te klikken om de problemen te bekijken. Bekijk deze lezing van Andre voor meer informatie over het creëren en implementeren van Trusted Web Activity.

Chroomuitgave: 1147479

Formatteer tekenreeksen als (geldige) letterlijke JavaScript-tekenreeksen in de console

Nu formatteert de console tekenreeksen als geldige letterlijke JavaScript-tekenreeksen in de console. Voorheen ontsnapte de console niet aan dubbele aanhalingstekens bij het afdrukken van tekenreeksen.

Chroomuitgave: 1178530

Nieuw deelvenster Vertrouwenstokens in het toepassingspaneel

DevTools geeft nu alle beschikbare Trust Tokens weer in de huidige browsercontext in het nieuwe Trust Tokens -paneel, onder het paneel Applicaties .

Trust Token is een nieuwe API om fraude te bestrijden en bots van echte mensen te onderscheiden, zonder passieve tracking. Leer hoe u aan de slag kunt gaan met Trust Tokens .

Chroomuitgave: 1126824

Emuleer de CSS-kleurengamma-mediafunctie

Met de mediaquery color-gamut kunt u bij benadering het 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 Commandomenu , voer de opdracht Rendering weergeven uit en stel vervolgens het kleurengamma van de CSS-mediafunctie emuleren in.

Chroomuitgave: 1073887

Verbeterde Progressive Web Apps-tools

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

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

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

Chroomuitgave: 1146450 , 1169689 , 965802

Nieuwe kolom Remote Address Space in het netwerkpaneel

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

Chroomuitgave: 1128885

Prestatieverbeteringen

De prestaties bij het laden van pagina's met geopende DevTools zijn nu verbeterd. In sommige extreme gevallen zagen we 10x prestatieverbeteringen.

DevTools verzamelt stacktraces en voegt deze toe aan consoleberichten of asynchrone taken voor later gebruik door de ontwikkelaar in geval van een probleem. Omdat deze verzameling synchroon in de browserengine moet plaatsvinden, kan de langzame stacktrace-verzameling de pagina aanzienlijk vertragen als DevTools geopend is. We zijn erin geslaagd de overhead van het verzamelen van stacktraces aanzienlijk te verminderen.

Houd ons in de gaten voor een meer gedetailleerde technische blogpost met uitleg over de implementatie.

Chroomuitgaves: 1069425 , 1077657

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

De framedetailsweergave toont nu een lijst met toegestane en niet-toegestane browserfuncties die worden beheerd door het machtigingenbeleid.

Het toestemmingsbeleid is een webplatform-API die een website de mogelijkheid geeft om het gebruik van browserfuncties in zijn eigen frame of in iframes die hij insluit, toe te staan ​​of te blokkeren.

Chroomuitgave: 1158827

Nieuwe SameParty kolom in het Cookies-paneel

In het deelvenster Cookies in het toepassingspaneel wordt nu het SameParty kenmerk van de cookies weergegeven. Het SameParty -attribuut is een nieuw booleaans attribuut om aan te geven of een cookie moet worden opgenomen in verzoeken aan de oorsprong van dezelfde First-Party Sets .

Chroomuitgave: 1161427

Verouderde niet-standaard fn.displayName ondersteuning

Ondersteuning voor de niet-standaard fn.displayName is beëindigd. Gebruik in plaats daarvan fn.name .

Chrome ondersteunt traditioneel de niet-standaard eigenschap fn.displayName als een manier voor ontwikkelaars om debug-namen te beheren voor functies die verschijnen in error.stack en in DevTools-stacktraces. In het bovenstaande voorbeeld zou de Call Stack voorheen noLongerSupport tonen.

Vervang fn.displayName door 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 was onbetrouwbaar en niet consistent in alle browserengines. Het vertraagt ​​het verzamelen van stacktraces, kosten die ontwikkelaars altijd betalen, ongeacht of ze fn.displayName daadwerkelijk gebruiken of niet.

Chroomuitgave: 1177685

Beëindiging 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 beëindigd .

Chroomuitgave: 1056922

Experimentele kenmerken

Automatische probleemrapportage 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 deze problemen gemakkelijker ontdekken.

Open een pagina met problemen met weinig contrast (bijvoorbeeld deze demo ). Open vervolgens de tabbladen Problemen door op de knop Problemen tellen in de consolestatusbalk te klikken om de problemen te bekijken.

Chroomuitgave: 1155460

Boomstructuurweergave met volledige toegankelijkheid in het paneel Elementen

U kunt nu schakelen om de nieuwe en verbeterde structuurweergave van een pagina met volledige toegankelijkheid te bekijken.

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

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

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.

Chroomuitgave: 887173

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 .