Wat is er nieuw in DevTools (Chrome 68)

Kayce Basques

Nieuw bij DevTools in Chrome 68:

• Enthousiaste evaluatie . Terwijl u uitdrukkingen typt, bekijkt de console een voorbeeld van het resultaat.
• Argumenttips . Terwijl u functies typt, toont de console de verwachte argumenten voor die functie.
• Functie automatisch aanvullen . Nadat u een functieaanroep zoals document.querySelector('p') hebt getypt, toont de console u de functies en eigenschappen die de geretourneerde waarde ondersteunt.
• ES2017-trefwoorden in de console . Trefwoorden zoals await zijn nu beschikbaar in de gebruikersinterface voor automatisch aanvullen van de console.
• Lighthouse 3.0 in het deelvenster Audits . Snellere, consistentere audits, een nieuwe gebruikersinterface en nieuwe audits.
• BigInt ondersteuning . Probeer het nieuwe geheel getal met willekeurige precisie van JavaScript uit in de console.
• Eigenschapspaden toevoegen aan het controlevenster . Voeg eigenschappen uit het deelvenster Bereik toe aan het deelvenster Controle.
• 'Tijdstempels weergeven' verplaatst naar Instellingen .

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.

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 .
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.

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.

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.

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 audit-engine, met de codenaam Lantern, waarmee u uw audits sneller kunt voltooien, 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).

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:

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.

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 is verplaatst naar Instellingen .

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

• Stuur ons een suggestie of feedback via crbug.com .
• Rapporteer een DevTools-probleem met behulp van de opties Meer > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

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