Wat is er nieuw in DevTools (Chrome 78)

Kayce Basken
Kayce Basques
X GitHub

Ondersteuning voor meerdere klanten in het auditpaneel

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

Stel bijvoorbeeld dat het rapport in uw auditpaneel aangeeft dat de prestatiescore van uw pagina 70 is en dat een van de grootste verbeterpunten het elimineren van render-blocking resources is.

De initiële prestatiescore is 70.

Figuur 1. De initiële prestatiescore .

Het eerste rapport meldt dat 3 render-blocking scripts een probleem vormen.

Figuur 2. Het eerste rapport meldt dat 3 render-blocking scripts een probleem vormen.

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

Gebruik het tabblad 'Verzoek blokkeren' om de problematische scripts te blokkeren.

Afbeelding 3. Het tabblad 'Verzoekblokkering' gebruiken om de problematische scripts te blokkeren.

En vervolgens de pagina opnieuw controleren:

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

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

Je zou ook Local Overrides kunnen gebruiken om async attributen toe te voegen aan elk van de scripttags, maar "dat laten we als oefening voor de lezer." Bekijk deze tweet voor een videodemonstratie.

Chromium-probleem #991906

Foutopsporing van de betalingsverwerker

Het gedeelte Achtergrondservices in het toepassingspaneel ondersteunt nu gebeurtenissen van de betalingsverwerker .

  1. Ga naar het toepassingspaneel .
  2. Open het paneel Betalingsverwerker .

  3. Klik op Opnemen . DevTools registreert gebeurtenissen van de betalingsverwerker gedurende 3 dagen, zelfs wanneer DevTools gesloten is.

    Het vastleggen van gebeurtenissen van de betalingsverwerker.

    Afbeelding 5. Registratie van gebeurtenissen van de betalingsverwerker.

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

  5. Nadat een Payment Handler-gebeurtenis is geactiveerd, klikt u op de rij van de gebeurtenis om meer over de gebeurtenis te weten te komen.

    Een gebeurtenis van de betalingsverwerker bekijken.

    Afbeelding 6. Een gebeurtenis van de betalingsverwerker bekijken.

Chromium-probleem #980291

Lighthouse 5.2 in het paneel Audits

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 de hoofdthread heeft geblokkeerd tijdens het laden van de pagina. Zie Optimaliseer uw bronnen van derden voor meer informatie over hoe code van derden de laadprestaties kan verslechteren.

Een schermafbeelding van de audit 'Gebruik door derden' in de Lighthouse-rapportage-interface.

Figuur 7. De audit van het gebruik door derden .

Chromium-probleem #772558

Grootste inhoudelijke verf in het prestatiepaneel

Bij het analyseren van de laadprestaties in het paneel Prestaties bevat het gedeelte Timings nu een markering voor Grootste Inhoudselement (LCP). LCP geeft de rendertijd weer van het grootste inhoudselement dat zichtbaar is in de viewport.

De LCP-marker in het gedeelte 'Timing'.

Figuur 8. De LCP -marker in het gedeelte 'Timing' .

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

  1. Klik op de LCP- markering in het gedeelte 'Timing' .

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

    Het gedeelte 'Gerelateerde knooppunten' van het tabblad 'Samenvatting'.

    Afbeelding 9. Het gedeelte 'Gerelateerde knooppunten' van het tabblad 'Samenvatting' .

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

Meld problemen met DevTools via 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 > Een DevTools-probleem melden om een ​​probleem aan te maken in de bugtracker van het DevTools-engineeringteam. Het aanleveren van een minimaal, reproduceerbaar voorbeeld vergroot de kans dat het team je bug kan oplossen of je functieverzoek kan implementeren aanzienlijk!

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

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

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.

Wat is er nieuw in DevTools?

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