Wat is er nieuw in DevTools (Chrome 78)

Kayce Basken

Ondersteuning voor meerdere clients in het paneel Audits

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

Stel bijvoorbeeld dat in het rapport Audits staat dat de prestatiescore van uw pagina 70 is en dat een van uw grootste prestatiekansen het elimineren van render-blokkerende bronnen is.

De initiële prestatiescore is 70.

Figuur 1. De initiële prestatiescore .

In het eerste rapport staat dat er een probleem is met drie scripts die het renderen blokkeren.

Figuur 2. Het initiële rapport meldt dat er 3 render-blokkerende scripts een probleem vormen.

Nu het paneel Audits kan worden gebruikt in combinatie met aanvraagblokkering, kunt u snel meten hoeveel invloed de scripts voor het blokkeren van het renderen hebben op de laadprestaties door eerst de aanvragen voor de scripts voor het blokkeren van het renderen te blokkeren :

Gebruik het tabblad Verzoekblokkering om de scripts die problemen veroorzaken te blokkeren.

Figuur 3. Het tabblad Verzoekblokkering gebruiken om problematische scripts te blokkeren.

En dan de pagina opnieuw controleren:

De prestatiescore verbeterde naar 97 nadat verzoekblokkering was ingeschakeld.

Figuur 4. De prestatiescore verbeterde naar 97 nadat de problematische scripts waren geblokkeerd.

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

Chromium-probleem #991906

Foutopsporing voor betalingshandler

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

  1. Ga naar het paneel 'Toepassing' .
  2. Open het deelvenster Betalingsafhandeling .

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

    Registratie van Payment Handler-gebeurtenissen.

    Figuur 5. Registratie van betalingsafhandelingsgebeurtenissen.

  4. Schakel Gebeurtenissen van andere domeinen weergeven in als uw Payment Handler-gebeurtenissen op een andere oorsprong plaatsvinden.

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

    Een Payment Handler-gebeurtenis bekijken.

    Figuur 6. Een Payment Handler-gebeurtenis bekijken.

Chromium-probleem #980291

Lighthouse 5.2 in het Audits-paneel

Het paneel Audits draait nu op Lighthouse 5.2 . De nieuwe diagnostische audit voor gebruik door derden laat zien 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-rapportgebruikersinterface.

Figuur 7. Controle van het gebruik door derden .

Chromium-probleem #772558

Grootste contentful verf in het uitvoeringspaneel

Bij het analyseren van de laadprestaties in het paneel Prestaties bevat de sectie Timings nu een markering voor Largest Contentful Paint (LCP). LCP rapporteert de rendertijd van het grootste contentelement dat zichtbaar is in de viewport.

De LCP-markering in het gedeelte Timings.

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

Om het DOM-knooppunt gekoppeld aan LCP te markeren:

  1. Klik op de LCP -markering in het gedeelte Timings .

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

    Het gedeelte Gerelateerde knooppunten op het tabblad Samenvatting.

    Figuur 9. Het gedeelte Gerelateerde knoop van het tabblad Samenvatting .

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

Problemen met Bestandsontwikkelingstools vanuit het hoofdmenu

Als je ooit een bug in DevTools tegenkomt en een probleem wilt melden, of als je een idee hebt om DevTools te verbeteren en een nieuwe functie wilt aanvragen, ga dan naar Hoofdmenu > Help > Meld een DevTools-probleem om een ​​probleem aan te maken in de tracker van het DevTools-engineeringteam. Door een minimaal, reproduceerbaar voorbeeld op Glitch te plaatsen, vergroot je de kans aanzienlijk dat het team je bug kan oplossen of je functieverzoek kan implementeren!

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

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

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.

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.