Wat is er nieuw in DevTools (Chrome 68)

Kayce Basken

Nieuw bij DevTools in Chrome 68:

Lees verder of bekijk de videoversie van de releaseopmerkingen hieronder.

Hulpconsole

Chrome 68 wordt geleverd met een paar nieuwe Console-functies met betrekking tot automatisch aanvullen en voorbeelden bekijken.

Enthousiaste evaluatie

Wanneer u een uitdrukking in de console typt, kan de console nu onder uw cursor een voorbeeld van het resultaat van die uitdrukking weergeven.

De console drukt het resultaat van de sort()-bewerking af voordat deze expliciet is uitgevoerd.

Figuur 1 . De console drukt het resultaat van de sort() -bewerking af voordat deze expliciet is uitgevoerd

Eager Evaluatie inschakelen:

  1. Open de console .
  2. Open Console-instellingen De knop Console-instellingen .
  3. Schakel het selectievakje Eager evaluatie in.

DevTools wil niet graag evalueren of de uitdrukking bijwerkingen veroorzaakt.

Argumenttips

Terwijl u functies typt, toont de console u nu de argumenten die de functie verwacht.

Argumenthints in de console.

Figuur 2 . Verschillende voorbeelden van argumenthints in de console

Opmerkingen:

  • Een vraagteken vóór een arg, zoals ?options , vertegenwoordigt een optioneel arg.
  • Een weglatingsteken vóór een arg, zoals ...items , vertegenwoordigt een spread .
  • Sommige functies, zoals CSS.supports() , accepteren meerdere argumenthandtekeningen.

Automatisch aanvullen na uitvoering van functies

Nadat u Eager Evaluation hebt ingeschakeld, laat de Console u nu ook zien welke eigenschappen en functies beschikbaar zijn nadat u een functie hebt getypt.

Nadat u document.querySelector('p') hebt uitgevoerd, kan de console u nu de beschikbare eigenschappen en functies voor dat element tonen.

Figuur 3 . De bovenste schermafbeelding vertegenwoordigt het oude gedrag en de onderste schermafbeelding vertegenwoordigt het nieuwe gedrag dat automatische aanvulling van functies ondersteunt

ES2017-trefwoorden in automatisch aanvullen

ES2017-trefwoorden, zoals await , zijn nu beschikbaar in de gebruikersinterface voor automatisch aanvullen van de console.

De console suggereert nu 'wachten' in de gebruikersinterface voor automatisch aanvullen.

Figuur 4 . De console suggereert nu await in de gebruikersinterface voor automatisch aanvullen

Snellere, betrouwbaardere audits, een nieuwe gebruikersinterface en nieuwe audits

Chrome 68 wordt geleverd met Lighthouse 3.0. De volgende secties zijn een overzicht van enkele van de grootste veranderingen. Zie Aankondiging van Lighthouse 3.0 voor het volledige verhaal.

Snellere, betrouwbaardere audits

Lighthouse 3.0 heeft een nieuwe interne auditengine, met de codenaam Lantern, die uw audits sneller voltooit, en met minder variatie tussen runs.

Nieuwe gebruikersinterface

Lighthouse 3.0 brengt ook een nieuwe gebruikersinterface met zich mee, dankzij een samenwerking tussen de Lighthouse- en Chrome UX-teams (Research & Design).

De nieuwe rapport-UI in Lighthouse 3.0.

Figuur 5 . De nieuwe rapport-UI in Lighthouse 3.0

Nieuwe audits

Lighthouse 3.0 wordt ook geleverd met 4 nieuwe audits:

  • Eerste inhoudsvolle verf
  • robots.txt is niet geldig
  • Gebruik videoformaten voor geanimeerde inhoud
  • Vermijd meerdere, dure retourvluchten naar welke herkomst dan ook

BigInt-ondersteuning

Chrome 68 ondersteunt een nieuwe numerieke primitief genaamd BigInt . BigInt kunt u gehele getallen met willekeurige precisie weergeven. Probeer het uit in de console:

Een voorbeeld van BigInt in de console.

Figuur 6 . Een voorbeeld van BigInt in de console

Voeg een eigendomspad toe om te bekijken

Terwijl u bent gepauzeerd op een breekpunt, klikt u met de rechtermuisknop op een eigenschap in het deelvenster Bereik en selecteert u Eigenschapspad toevoegen om te bewaken om die eigenschap toe te voegen aan het deelvenster Controle.

Een voorbeeld van het toevoegen van een eigenschapspad om te bekijken.

Figuur 7 . Een voorbeeld van het toevoegen van een eigenschapspad om te bekijken

'Tijdstempels weergeven' verplaatst naar instellingen

Het selectievakje Tijdstempels weergeven eerder in Console-instellingen De knop Console-instellingen is verplaatst naar Instellingen .

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 .