Wat is er nieuw in DevTools (Chrome 64)

Kayce Basken

Welkom terug! Nieuwe functies die naar DevTools komen in Chrome 64 zijn onder meer:

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

Prestatiemonitor

Gebruik de Prestatiemeter om een ​​realtime beeld te krijgen van verschillende aspecten van de laad- of runtimeprestaties van een pagina, waaronder:

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

Als gebruikers melden dat uw app traag of janky aanvoelt, controleer dan de Prestatiemeter voor aanwijzingen.

Waarom laadprestaties belangrijk zijn : BookMyShow behaalde een conversiestijging van 80% toen ze een progressieve webapp bouwden die zich op snelheid concentreerde. Meer informatie .

Om de Prestatiemeter te gebruiken:

  1. Open het Commandomenu .

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

    De prestatiemonitor Figuur 1 . De prestatiemonitor

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

Gerelateerde kenmerken:

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

Als u net begint met het analyseren van prestaties, kunt u het beste eerst het deelvenster Audits gebruiken en vervolgens verder onderzoek doen met behulp van het deelvenster Prestaties of de Prestatiemonitor .

Console-zijbalk

Op grote sites kan de console snel overspoeld worden met irrelevante berichten. Gebruik de nieuwe consolezijbalk om de ruis te verminderen en u te concentreren op de berichten die voor u 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 Consolezijbalk weergeven om het te laten zien.

Gerelateerde kenmerken:

  • Tekstvak filteren . 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 Console-berichten

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

Een voorbeeld van hoe de console soortgelijke berichten groepeert

Figuur 3 . Een voorbeeld van hoe de console soortgelijke berichten groepeert

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

Een voorbeeld van een uitgebreide groep Console-berichten

Figuur 4 . Een voorbeeld van een uitgebreide groep Console-berichten

Schakel het selectievakje Groepsgelijkaardig uit om deze functie uit te schakelen.

Gerelateerde kenmerken:

Lokale overschrijvingen

Oeps! Oorspronkelijk hadden we de lancering van deze functie gepland in Chrome 64, maar we hebben de deadline dichtbij gehaald om wat ruwe randjes weg te werken. Blijkbaar is de gebruikersinterface van What's New niet op tijd bijgewerkt. Sorry!

Deze functie wordt geleverd in Chrome 65, dat ongeveer zes weken na Chrome 64 beschikbaar komt. Bekijk Lokale overschrijvingen voor meer informatie. Als u Windows of Mac gebruikt, kunt u Chrome 65 nu uitproberen door Chrome Canary te downloaden.

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .