Wat is er nieuw in DevTools (Chrome 91)

Jecelyn Yeen

Web Vitals-informatie verschijnt in het prestatiepaneel

Plaats de muisaanwijzer op een Web Vitals-markering in het prestatiepaneel om te begrijpen waar de indicator over gaat: of de prestaties goed zijn, verbetering behoeven of slecht zijn.

Chroomuitgave: 1147872

Visualiseer CSS-scroll-snap

U kunt nu de scroll-snap badge in het Elementen -paneel omschakelen om de uitlijning van de CSS-scroll-snap te inspecteren.

Wanneer op een HTML-element op uw pagina (bijvoorbeeld deze demopagina ) scroll-snap-type is toegepast, ziet u ernaast een scroll-snap badge in het paneel Elementen . Klik op de badge om de weergave van een scroll-snap-overlay op de pagina in of uit te schakelen.

In het bovenstaande voorbeeld ziet u puntmarkeringen op snapranden. De scrollpoort heeft een effen omlijning, terwijl de snap-items streepjesomtrekken hebben. De scroll-opvulling is groen, terwijl de scroll-marge oranje is.

Chroomuitgave: 862450

Nieuwe geheugeninspecteur

Gebruik de nieuwe Geheugeninspecteur om een ArrayBuffer in JavaScript te inspecteren, evenals het Wasm-geheugen.

Open deze demopagina . Open in het deelvenster Bronnen het bestand demo-js.js en stel een breekpunt in op regel 18.

Vernieuw de pagina. Vouw de sectie Bereik uit in het rechter foutopsporingsvenster . Let op het nieuwe pictogram naast de bufferwaarde . Klik erop om de Memory Inspector weer te geven.

Bekijk de documentatie voor meer informatie over het inspecteren van JavaScript ArrayBuffer en WebAssembly.Memory met deze nieuwe geheugeninspecteur.

Chroomuitgave: 1166577

Nieuw paneel met badge-instellingen in het paneel Elementen

Je kunt nu selectief badges in- of uitschakelen via de Badge-instellingen in het Elementenpaneel . Gebruik deze functie om de belangrijke badges aan te passen en erop gefocust te blijven terwijl u webpagina's inspecteert.

Klik in het paneel Elementen met de rechtermuisknop op een element. Selecteer Badge-instellingen in het contextmenu; het paneel met badge-instellingen verschijnt bovenaan. Schakel elk selectievakje in of uit om de badges te tonen/verbergen.

Chroomuitgave: 1066772

Verbeterd beeldvoorbeeld met informatie over de beeldverhouding

Afbeeldingsvoorbeelden in het paneel Elementen geven nu meer informatie over de afbeelding weer: gerenderde grootte, gerenderde beeldverhouding, intrinsieke grootte, intrinsieke beeldverhouding en bestandsgrootte.

Met deze informatie kunt u uw afbeeldingen beter begrijpen en indien nodig optimalisatie toepassen.

De informatie over de beeldverhouding van de afbeelding is ook beschikbaar in het Netwerkpaneel wanneer u klikt om een ​​voorbeeld van de afbeelding te bekijken.

Chroomuitgaves: 1149832 , 1170656

Knop Nieuwe netwerkvoorwaarden met opties om Content-Encoding -programma's te configureren

Er is een nieuwe knop Netwerkvoorwaarden toegevoegd in het Netwerkpaneel . Klik erop om het tabblad Netwerkvoorwaarden te openen.

Er is een nieuwe optie Geaccepteerde inhoudcoderingen toegevoegd aan het tabblad Netwerkvoorwaarden . Configureer het om te testen of serverreacties correct worden gecodeerd in browsers die geen gzip, brotli of andere toekomstige Content-Encoding ondersteunen.

Chroomuitgave: 1162042

Verbeteringen in het deelvenster Stijlen

Nieuwe snelkoppeling om de berekende waarde te bekijken in het deelvenster Stijlen

U kunt nu met de rechtermuisknop op een CSS-eigenschap klikken in het deelvenster Stijlen en Berekende waarde bekijken selecteren om de berekende CSS-waarde te bekijken.

Chroomuitgave: 1076198

Ondersteuning voor het trefwoord accent-color

De automatisch aanvulbare gebruikersinterface van het deelvenster Stijlen detecteert nu het CSS accent-color , waardoor webontwikkelaars de accentkleur kunnen opgeven voor UI-besturingselementen (bijvoorbeeld selectievakjes, keuzerondjes) die door het element worden gegenereerd.

De CSS-eigenschap accent-color is momenteel experimenteel . Schakel chrome://flags/#enable-experimental-web-platform-features in om het te testen.

Chroomuitgave: 1092093

Categoriseer probleemtypen met kleuren en pictogrammen

Op het tabblad Problemen worden problemen nu gecategoriseerd in paginafouten, komende belangrijke wijzigingen en mogelijke verbeteringen voor een betere indicatie van de ernst. U kunt het tabblad Problemen openen door op de knop voor het tellen van problemen in de console te klikken.

• Paginafouten (rood) . Problemen die directe gevolgen hebben voor de paginafunctionaliteit, zoals het niet instellen van de juiste CORS- headers, enz.
• Aankomende belangrijke wijzigingen (geel) . Problemen die informatie geven over een aanstaande, incompatibele wijziging van het webplatform die kan resulteren in verlies van paginafunctionaliteit (bijvoorbeeld waarschuwing voor komende CORS RFC 1918-wijzigingen ).
• Mogelijke verbeteringen (blauw) . Potentiële verbeteringen op de pagina, maar hebben momenteel geen invloed op de basisfunctionaliteit van de pagina (bijvoorbeeld toegankelijkheidsproblemen)

Chroomuitgave: 1183241

Vertrouwenstokens verwijderen

U kunt nu vertrouwenstokens verwijderen met de nieuwe verwijderknop in het deelvenster Vertrouwenstokens , onder het paneel Toepassingen .

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

Bekijk details over geblokkeerde elementen in de weergave Framedetails

U kunt nu details over geblokkeerde functies bekijken onder het gedeelte Machtigingenbeleid in de weergave Framedetails.

Open deze demopagina . Ga naar het toepassingspaneel en selecteer een frame. Blader in de sectie Machtigingenbeleid naar de eigenschap Uitgeschakelde functies . Klik op Details weergeven om details te bekijken over waarom de functie is geblokkeerd. Klik op het pictogram naast elk beleid om naar het iframe of netwerkverzoek te gaan dat de functie heeft geblokkeerd.

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

Filter experimenten in de instelling Experimenten

Vind experimenten sneller met het nieuwe experimentfilter. Ga bijvoorbeeld naar Instellingen > Experimenten en typ in het tekstvak Filter 'contrast' om alle experimenten te filteren met het woord 'contrast'.

Nieuwe kolom Vary Header in het cacheopslagvenster

Gebruik de nieuwe kolom Vary Header in het deelvenster Cacheopslag om de Vary HTTP-antwoordheader te bekijken.

Chroomuitgave: 1186049

Verbeteringen in het bronnenpaneel

Ondersteuning voor nieuwe JavaScript-functies

DevTools ondersteunen nu de nieuwe JavaScript-taalfunctie voor huismerkcontrole , ook wel #foo in obj genoemd.

Deze functie voor huismerkcontroles breidt de in-operator uit om het testen van privéklassevelden op een bepaald object te ondersteunen.

Probeer het uit in het paneel Console en bronnen . U kunt de privévelden ook inspecteren in de sectie Bereik onder het foutopsporingsvenster .

Chroomuitgave: 11374

Verbeterde ondersteuning voor het opsporen van fouten in breekpunten

DevTools stelt breekpunten nu correct in meerdere scripts correct in. Moderne JavaScript-bundelaars (bijv. Webpack , Rollup ) ondersteunen de functie voor het splitsen van code - er zijn scenario's waarin één gedeelde component kan worden opgenomen in meerdere routes (codesplitsingen).

Voorheen kon DevTools slechts breekpunten op één onbewerkte locatie instellen. Met deze nieuwste verbetering kan DevTools breekpunten op alle relevante locaties correct instellen.

Chroomuitgaves: 1142705 , 979000 , 1180794

Ondersteuning van hover-preview met [] -notatie

DevTools ondersteunt nu een hovervoorbeeld op JavaScript-lidexpressies die de notatie [] gebruiken in het deelvenster Bronnen .

Chroomuitgave: 1178305

Verbeterd overzicht van HTML-bestanden

DevTools heeft nu betere overzichtsondersteuning voor HTML-bestanden. Open een HTML-bestand in het deelvenster Bronnen. U kunt de codeomtrek wisselen met het toetsenbord Cmd + Shift + O op Mac of Ctrl + Shift + O in Windows.

In het onderstaande voorbeeld vermeldt DevTools nu correct alle functies in het overzicht. Voorheen toonde DevTools slechts enkele functies.

Chroomuitgave: 761019 , 1191465

Juiste foutstack-traceringen voor Wasm-foutopsporing

DevTools lost nu inline functieaanroepen op en toont de juiste foutstack-traceringen voor Wasm-foutopsporing.

Voorheen gaf DevTools alleen generieke Wasm-referenties weer in de Error-stack-traceringen.

De oude versie van Chrome aan de linkerkant toont de bronlocatie (bijvoorbeeld dsquare ) niet in de Error-stack-traceringen, terwijl de nieuwe versie aan de rechterkant dat wel doet.

Chroomuitgave: 1189161

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 .