Wat is er nieuw in DevTools (Chrome 91)

Jecelyn Yeen

Web Vitals-informatie verschijnt in het Prestatiepaneel

Beweeg de muis over een Web Vitals-markering in het paneel Prestaties om te zien wat de indicator aangeeft: of de prestaties goed zijn, verbetering behoeven of slecht zijn.

Chromium-probleem: 1147872

Visualiseer CSS scroll-snap

U kunt nu de scroll-snap badge in het Elementenpaneel in- of uitschakelen om de CSS-scroll-snap-uitlijning te controleren.

Wanneer een HTML-element op uw pagina (bijvoorbeeld deze demopagina ) scroll-snap-type heeft, 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 zie je stippellijnen op de randen van de snaps. De scrollpoort heeft een effen omlijning, terwijl de snap-items een streepjescontour hebben. De scrollpadding is groen gekleurd, terwijl de scrollmarge oranje is.

Chromium-probleem: 862450

Nieuwe geheugeninspector

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

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

Vernieuw de pagina. Vouw de sectie Scope in het rechter debuggervenster uit. Let op het nieuwe pictogram naast de bufferwaarde . Klik erop om de geheugeninspector te openen.

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

Chromium-probleem: 1166577

Nieuw badge-instellingenpaneel in het Elementenpaneel

U kunt badges nu selectief in- of uitschakelen via de badge-instellingen in het deelvenster Elementen . Gebruik deze functie om badges aan te passen en u te concentreren op de belangrijke badges terwijl u webpagina's inspecteert.

Klik in het deelvenster Elementen met de rechtermuisknop op een element. Selecteer Badge-instellingen in het contextmenu; het deelvenster met badge-instellingen verschijnt bovenaan. Schakel selectievakjes in of uit om de badges weer te geven of te verbergen.

Chromium-probleem: 1066772

Verbeterde voorbeeldweergave van afbeeldingen met informatie over de beeldverhouding

Bij voorbeeldafbeeldingen in het deelvenster Elementen wordt nu meer informatie over de afbeelding weergegeven: gerenderde grootte, gerenderde beeldverhouding, intrinsieke grootte, intrinsieke beeldverhouding en bestandsgrootte.

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

Informatie over de beeldverhouding is ook beschikbaar in het paneel Netwerk wanneer u erop klikt om een ​​voorbeeld van de afbeelding te bekijken.

Chromium-problemen: 1149832 , 1170656

Nieuwe netwerkvoorwaardenknop met opties om Content-Encoding te configureren

Er is een nieuwe knop 'Netwerkvoorwaarden' toegevoegd aan het paneel 'Netwerk' . Klik erop om het tabblad 'Netwerkvoorwaarden' te openen.

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

Chromium-probleem: 1162042

Verbeteringen in het stijlenvenster

Nieuwe snelkoppeling om berekende waarde in het deelvenster Stijlen te bekijken

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

Chromium-probleem: 1076198

Ondersteuning voor het trefwoord accent-color

De gebruikersinterface voor automatisch aanvullen van het deelvenster Stijlen detecteert nu het CSS-trefwoord accent-color , waardoor webontwikkelaars de accentkleur voor gebruikersinterface-elementen (bijv. selectievakje of keuzerondje) kunnen opgeven die door het element worden gegenereerd.

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

Chromium-probleem: 1092093

Categoriseer probleemtypen met kleuren en pictogrammen

Het tabblad Problemen categoriseert problemen nu in paginafouten, aankomende wijzigingen en mogelijke verbeteringen voor een betere indicatie van de ernst. U kunt het tabblad Problemen openen door te klikken op de knop voor het aantal problemen in de console .

• Paginafouten (rood) . Problemen die direct gevolgen hebben voor de functionaliteit van de pagina, zoals het niet correct instellen van CORS- headers, enz.
• Aankomende wijzigingen (geel) . Problemen die informeren over een aankomende, incompatibele wijziging van het webplatform die kan leiden tot verlies van paginafunctionaliteit (bijv. waarschuwing voor aankomende CORS RFC 1918-wijzigingen ).
• Mogelijke verbeteringen (blauw) . Mogelijke verbeteringen op de pagina, die momenteel geen afbreuk doen aan de basisfunctionaliteit van de pagina (bijv. toegankelijkheidsproblemen).

Chromium-probleem: 1183241

Vertrouwenstokens verwijderen

U kunt nu vertrouwenstokens verwijderen met de nieuwe verwijderknop in het deelvenster Vertrouwstokens , 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 .

Chromium-probleem: 1126824

Bekijk details over geblokkeerde functies in het venster Framedetails

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

Open deze demopagina . Ga naar het paneel 'Toepassing' en selecteer een frame. Scrol in het gedeelte 'Machtigingsbeleid' naar de eigenschap 'Uitgeschakelde functies' . Klik op ' Details weergeven' om te zien waarom de functie is geblokkeerd. Klik op het pictogram naast elk beleid om naar het iframe of de netwerkaanvraag te navigeren die de functie heeft geblokkeerd.

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.

Chromium-probleem: 1158827

Filter experimenten in de instelling Experimenten

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

Nieuwe kolom Vary Header in het cacheopslagvenster

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

Chromium-probleem: 1186049

Verbeteringen aan het bronnenpaneel

Ondersteuning voor nieuwe JavaScript-functies

DevTools ondersteunen nu de nieuwe JavaScript-taalfunctie voor private brand checks , ook wel bekend als #foo in obj .

Deze functie voor privémerkcontroles breidt de in-operator uit om privéklasseveldtests op elk willekeurig object te ondersteunen.

Probeer het uit in het paneel Console en Bronnen . Je kunt de privévelden ook bekijken in het gedeelte Scope onder het debuggervenster .

Chromium-probleem: 11374

Verbeterde ondersteuning voor het debuggen van breekpunten

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

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

Chromium-problemen: 1142705 , 979000 , 1180794

Ondersteun hover-voorvertoning met [] -notatie

DevTools ondersteunt nu hover-voorvertoningen bij JavaScript-lidexpressies die de [] -notatie gebruiken in het paneel Bronnen .

Chromium-probleem: 1178305

Verbeterde overzicht van HTML-bestanden

DevTools biedt nu betere outline-ondersteuning voor HTML-bestanden. Open een HTML-bestand in het Bronnenpaneel . Je kunt de code-outline in- of uitschakelen met Cmd + Shift + O op Mac of Ctrl + Shift + O in Windows.

In het onderstaande voorbeeld geeft DevTools nu alle functies correct weer in het overzicht. Voorheen toonde DevTools slechts een deel van de functies.

Chromium-probleem: 761019 , 1191465

Correcte foutstapeltraceringen voor Wasm-foutopsporing

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

Voorheen gaven DevTools alleen algemene Wasm-verwijzingen weer in de foutstacktraceringen.

In de oude versie van Chrome wordt de bronlocatie (bijvoorbeeld dsquare ) niet weergegeven in de foutstacktraceringen, terwijl dat in de nieuwe versie aan de rechterkant wel het geval is.

Chromium-probleem: 1189161

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.