Wat is er nieuw in DevTools (Chrome 64)

Kayce Basken

Welkom terug! Nieuwe functies voor DevTools in Chrome 64 zijn onder andere:

Lees verder of bekijk hieronder de videoversie van deze release-opmerkingen.

Prestatiemonitor

Met de Prestatiemeter krijgt u realtime inzicht in verschillende aspecten van de laad- of runtimeprestaties van een pagina, waaronder:

  • CPU-gebruik.
  • JavaScript-heapgrootte.
  • Het totale aantal DOM-knooppunten, JavaScript-gebeurtenisluisteraars, documenten en frames op de pagina.
  • Lay-outs en stijlherberekeningen per seconde.

Als gebruikers aangeven dat uw app traag of haperend aanvoelt, kunt u in de Prestatiemonitor zoeken naar aanwijzingen.

Waarom laadprestaties belangrijk zijn : BookMyShow behaalde een conversiestijging van 80% met een Progressive Web App die zich richtte op snelheid. Lees meer .

Om de Prestatiemeter te gebruiken:

  1. Open het opdrachtmenu .

  2. Begin met het typen van Performance en selecteer Show Performance Monitor .

    De prestatiemonitor Figuur 1. De prestatiemonitor

  3. Klik op een metriek om deze weer te geven of te verbergen. In Figuur 1 worden de grafieken CPU-gebruik , JS-heapgrootte en JS-gebeurtenislisteners weergegeven.

Gerelateerde functies:

  • Prestatiepaneel . Doorloop een kritische gebruikersreis en registreer alles wat er op de pagina gebeurt, inclusief JavaScript-activiteit, netwerkverzoeken, CPU-gebruik en nog veel meer. Kan ook worden gebruikt om de laadprestaties te analyseren. Meer informatie .
  • Auditpaneel . Voer een reeks geautomatiseerde laad- en runtime-prestatietests uit op elke URL. Meer informatie .

Als u nog maar net begint met het analyseren van prestaties, raden we u aan eerst het paneel Audits te gebruiken. Vervolgens kunt u verder onderzoek doen met behulp van het paneel Prestaties of de Prestatiemonitor .

Console zijbalk

Op grote sites kan de console snel overspoeld raken met irrelevante berichten. Gebruik de nieuwe consolezijbalk om de ruis te verminderen en je te concentreren op de berichten die voor jou belangrijk zijn.

De consolezijbalk gebruiken om alleen foutmeldingen weer te geven

Figuur 2. De consolezijbalk gebruiken om alleen foutmeldingen weer te geven

De consolezijbalk is standaard verborgen. Klik op Consolezijbalk weergeven. Console-zijbalk weergeven om het te laten zien.

Gerelateerde functies:

  • Filtertekstvak . Voer wat tekst in en de console toont alleen berichten die die tekst bevatten. Ondersteunt ook regex-patronen, negatieve filters en URL-filters .

Groepeer vergelijkbare consoleberichten

De console groepeert nu standaard vergelijkbare berichten. In Figuur 3 zijn er bijvoorbeeld 27 exemplaren van het bericht [Violation] Avoid using document.write() .

Een voorbeeld van de console die soortgelijke berichten groepeert

Figuur 3. Een voorbeeld van de console waarin soortgelijke berichten worden gegroepeerd

Klik op een groep om deze uit te vouwen en elk exemplaar van het bericht te bekijken.

Een voorbeeld van een uitgebreide groep consoleberichten

Figuur 4. Een voorbeeld van een uitgebreide groep consoleberichten

Schakel het selectievakje 'Groepeer vergelijkbare items ' uit om deze functie uit te schakelen.

Gerelateerde functies:

Lokale overschrijvingen

Oeps! We hadden deze functie oorspronkelijk gepland voor Chrome 64, maar hebben dit vlak voor de deadline uitgesteld om wat kleine puntjes weg te werken. Blijkbaar is de gebruikersinterface 'Wat is er nieuw?' niet op tijd bijgewerkt. Sorry!

Deze functie wordt standaard meegeleverd in Chrome 65, dat ongeveer 6 weken na Chrome 64 beschikbaar zal zijn. Bekijk Lokale overschrijvingen voor meer informatie. Als je Windows of Mac gebruikt, kun je Chrome 65 nu uitproberen door Chrome Canary te downloaden.

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.