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 begrijpen waar de indicator betrekking op heeft: of de prestaties goed zijn, voor verbetering vatbaar zijn of slecht zijn.

Chromium-probleem: 1147872

Visualiseer CSS-scrollsnap

Je kunt nu de scroll-snap badge in het paneel Elementen in- of uitschakelen om de CSS-scroll-snap-uitlijning te inspecteren.

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

In het bovenstaande voorbeeld zie je stippen op de randen van de snap-elementen. De scrollpoort heeft een doorlopende omlijning, terwijl de snap-elementen een stippellijnomlijning hebben. De scrollpadding is groen gekleurd en de scrollmarge oranje.

Chromium-probleem: 862450

Nieuwe geheugeninspecteur

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 plaats een breakpoint op regel 18.

Vernieuw de pagina. Vouw het gedeelte 'Bereik' uit in het rechter debugvenster . Let op het nieuwe pictogram naast de bufferwaarde . Klik erop om de geheugeninspecteur 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 instellingenpaneel voor badges in het Elementen-paneel.

Je kunt badges nu selectief in- of uitschakelen via de badge-instellingen in het paneel Elementen . Gebruik deze functie om badges aan te passen en je te concentreren op de belangrijke badges tijdens het inspecteren van webpagina's.

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

Chromium-probleem: 1066772

Verbeterde beeldvoorvertoning met informatie over de beeldverhouding.

In de afbeeldingsvoorbeelden in het paneel Elementen wordt nu meer informatie over de afbeelding weergegeven: de weergegeven grootte, de weergegeven beeldverhouding, de intrinsieke grootte, de intrinsieke beeldverhouding en de bestandsgrootte.

Deze informatie helpt je je afbeeldingen beter te begrijpen en ze indien nodig te optimaliseren.

De informatie over de beeldverhouding is ook beschikbaar in het netwerkpaneel wanneer u op de afbeelding klikt om deze te bekijken.

Chromium-problemen: 1149832 , 1170656

Nieuwe knop voor netwerkcondities met opties om Content-Encoding te configureren.

Er is een nieuwe knop voor netwerkcondities toegevoegd aan het paneel Netwerk . Klik erop om het tabblad Netwerkcondities te openen.

Een nieuwe optie 'Geaccepteerde inhoudscoderingen' is toegevoegd aan het tabblad 'Netwerkcondities' . Configureer deze om te testen of serverreacties correct zijn gecodeerd in browsers die geen ondersteuning bieden voor gzip, brotli of andere toekomstige Content-Encoding .

Chromium-probleem: 1162042

Verbeteringen aan het deelvenster Stijlen

Nieuwe sneltoets om de berekende waarde in het deelvenster Stijlen te bekijken.

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

Chromium-probleem: 1076198

Ondersteuning voor het trefwoord accent-color

De automatische aanvulfunctie van het deelvenster Stijlen herkent nu het CSS-trefwoord ` accent-color , waardoor webontwikkelaars de accentkleur kunnen specificeren voor UI-elementen (zoals selectievakjes en 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 deze te testen.

Chromium-probleem: 1092093

Categoriseer probleemtypen met kleuren en pictogrammen.

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

• Paginafouten (rood) . Problemen die direct van invloed zijn op de functionaliteit van de pagina, zoals het niet correct instellen van CORS- headers, enz.
• Aanstaande ingrijpende wijzigingen (geel) . Meldingen die wijzen op een aanstaande, incompatibele wijziging van het webplatform die kan leiden tot verlies van paginafunctionaliteit (bijv. waarschuwing voor aanstaande CORS RFC 1918-wijzigingen ).
• Mogelijke verbeteringen (blauw) . Potentiële verbeteringen aan de pagina die momenteel de basisfunctionaliteit van de pagina niet belemmeren (bijv. toegankelijkheidsproblemen).

Chromium-probleem: 1183241

Verwijder vertrouwenstokens

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

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

Chromium-probleem: 1126824

Bekijk details over geblokkeerde functies in de Frame-detailsweergave.

U kunt nu details over geblokkeerde functies bekijken onder het gedeelte 'Toestemmingsbeleid' in de weergave 'Frame-details'.

Open deze demopagina . Ga naar het paneel Toepassing en selecteer een frame. Scroll in het gedeelte Machtigingsbeleid naar de eigenschap Uitgeschakelde functies . Klik op Details weergeven om de details te bekijken over waarom de functie is geblokkeerd. Klik op het pictogram naast elk beleid om naar het iframe of netwerkverzoek te navigeren dat de functie heeft geblokkeerd.

Een machtigingsbeleid is een API van een webplatform waarmee een website het gebruik van browserfuncties in zijn eigen frame of in ingesloten iframes kan toestaan ​​of blokkeren.

Chromium-probleem: 1158827

Filter experimenten in de Experimenten-instelling

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

Nieuwe kolom Vary Header ' in het cache-opslagvenster.

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

Chromium-probleem: 1186049

Verbeteringen aan het bronnenpaneel

Ondersteuning voor nieuwe JavaScript-functies

DevTools ondersteunt nu de nieuwe JavaScript-taalfunctie voor het controleren van private merken , ook wel bekend als #foo in obj .

Deze functie voor het controleren van private merken breidt de 'in'-operator uit om het testen van private klassevelden op elk willekeurig object te ondersteunen.

Probeer het uit in het paneel Console en Bronnen . Je kunt de privévelden ook inspecteren in het gedeelte Bereik onder het debugpaneel .

Chromium-probleem: 11374

Verbeterde ondersteuning voor breakpoint-debugging

DevTools stelt nu correct breakpoints in meerdere scripts in. Moderne JavaScript-bundlers (zoals Webpack en Rollup ) ondersteunen code splitting – er zijn scenario's waarbij één gedeeld component in meerdere routes kan worden opgenomen (code splits).

Voorheen kon DevTools alleen breakpoints instellen op één ruwe locatie. Met deze nieuwste verbetering kan DevTools nu correct breakpoints instellen op alle relevante locaties.

Chromium-problemen: 1142705 , 979000 , 1180794

Ondersteuning voor hover-preview met [] -notatie

DevTools biedt nu ondersteuning voor hover-preview op JavaScript-lidexpressies die de [] -notatie gebruiken in het paneel Bronnen .

Chromium-probleem: 1178305

Verbeterde structuur van HTML-bestanden

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

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

Chromium-probleem: 761019 , 1191465

Correcte foutstacktraceringen voor Wasm-debugging

DevTools lost nu inline functieaanroepen op en toont correcte foutstacktraceringen voor Wasm-debugging.

Voorheen toonde DevTools alleen algemene Wasm-verwijzingen in de foutmeldingen.

De oude versie van Chrome aan de linkerkant toont de bronlocatie (bijv. dsquare ) niet in de foutmeldingen, terwijl de nieuwe versie aan de rechterkant dat wel doet.

Chromium-probleem: 1189161

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .