Wat is er nieuw in DevTools (Chrome 78)

Kayce Basken

Ondersteuning voor meerdere klanten in het paneel Audits

U kunt het paneel Audits nu gebruiken in combinatie met andere DevTools-functies, zoals Request Blocking en Local Overrides .

Stel bijvoorbeeld dat in het rapport van uw Audits- paneel staat dat de prestatiescore van uw pagina 70 is en dat een van uw grootste prestatiemogelijkheden het elimineren van weergaveblokkeringsbronnen is.

De initiële prestatiescore is 70.

Figuur 1. De initiële prestatiescore .

Het eerste rapport zegt dat drie scripts die het renderen blokkeren een probleem vormen.

Figuur 2. Het eerste rapport zegt dat drie scripts die het renderen blokkeren een probleem vormen.

Nu het paneel Audits kan worden gebruikt in combinatie met het blokkeren van verzoeken, kunt u snel meten hoeveel invloed de render-blocking scripts hebben op uw laadprestaties door eerst de verzoeken voor de render-blocking scripts te blokkeren :

Gebruik het tabblad Blokkering aanvragen om de problematische scripts te blokkeren.

Figuur 3. Het tabblad Request Blocking gebruiken om de problematische scripts te blokkeren.

En dan de pagina opnieuw controleren:

De prestatiescore verbeterde naar 97 nadat het blokkeren van verzoeken was ingeschakeld.

Figuur 4. De prestatiescore verbeterde naar 97 na het blokkeren van de problematische scripts.

U kunt ook Local Overrides gebruiken om async attributen toe te voegen aan elk van de scripttags, maar "dat laten we over als een oefening voor de lezer." Ga naar Multi-client demo om het uit te proberen. Of bekijk deze tweet voor een videodemonstratie.

Chroomnummer 991906

Foutopsporing in betalingshandler

De sectie Achtergrondservices van het paneel Applicaties ondersteunt nu Payment Handler- gebeurtenissen.

  1. Ga naar het applicatiepaneel .
  2. Open het deelvenster Betalingsverwerker .

  3. Klik op Opnemen . DevTools registreert Payment Handler-gebeurtenissen gedurende 3 dagen, zelfs wanneer DevTools gesloten is.

    Betalingsafhandelingsgebeurtenissen registreren.

    Figuur 5. Gebeurtenissen van betalingsverwerkers registreren.

  4. Schakel Gebeurtenissen uit andere domeinen weergeven in als uw Betalingshandlergebeurtenissen op een andere oorsprong plaatsvinden.

  5. Nadat u een Payment Handler-gebeurtenis heeft geactiveerd, klikt u op de rij van de gebeurtenis voor meer informatie over de gebeurtenis.

    Een betalingsverwerkergebeurtenis bekijken.

    Figuur 6. Een betalingsverwerkergebeurtenis bekijken.

Chroomnummer 980291

Lighthouse 5.2 in het paneel Audits

Het paneel Audits draait nu Lighthouse 5.2 . De nieuwe diagnostische audit voor gebruik door derden vertelt u hoeveel code van derden is opgevraagd en hoe lang die code van derden de hoofdthread heeft geblokkeerd terwijl de pagina werd geladen. Zie Uw bronnen van derden optimaliseren voor meer informatie over hoe code van derden de laadprestaties kan verslechteren.

Een screenshot van de audit 'Gebruik door derden' in de Lighthouse-rapportinterface.

Figuur 7. De gebruiksaudit door derden .

Chroomnummer 772558

Grootste inhoudsvolle verf in het paneel Prestaties

Bij het analyseren van de belastingsprestaties in het paneel Prestaties bevat de sectie Timings nu een markering voor de grootste inhoudsvolle verf (LCP). LCP rapporteert de weergavetijd van het grootste inhoudselement dat zichtbaar is in de viewport.

De LCP-markering in de sectie Timings.

Figuur 8. De LCP- markering in het gedeelte Timings .

Om het DOM-knooppunt dat aan LCP is gekoppeld te markeren:

  1. Klik op de LCP- markering in de sectie Timings .

  2. Beweeg de muis over het gerelateerde knooppunt op het tabblad Samenvatting om het knooppunt in de viewport te markeren.

    De sectie Gerelateerd knooppunt van het tabblad Samenvatting.

    Figuur 9. De sectie Gerelateerd knooppunt van het tabblad Samenvatting .

  3. Klik op het gerelateerde knooppunt om het in de DOM-structuur te selecteren.

Bestandsproblemen met DevTools vanuit het hoofdmenu

Als u ooit een bug in DevTools tegenkomt en een probleem wilt melden, of als u ooit een idee krijgt over hoe u DevTools kunt verbeteren en een nieuwe functie wilt aanvragen, ga dan naar Hoofdmenu > Help > Een DevTools-probleem melden om een ​​probleem aan te maken in de tracker van het DevTools-engineeringteam. Door een minimaal, reproduceerbaar voorbeeld van Glitch te geven, wordt de mogelijkheid van het team om uw bug op te lossen of uw functieverzoek te implementeren dramatisch vergroot!

Help > Een DevTools-probleem melden." width="800" height="604">

Figuur 10. Hoofdmenu > Help > Een DevTools-probleem melden .

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze 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 .