Wat is er nieuw in DevTools (Chrome 68)

Kayce Basques

Nieuw bij DevTools in Chrome 68:

• Eager Evaluation . Terwijl u expressies typt, geeft de console een voorbeeld van het resultaat weer.
• Argumenthints . Terwijl u functies typt, toont de console de verwachte argumenten voor die functie.
• Automatische aanvulling van functies . Nadat u een functieaanroep hebt getypt, zoals document.querySelector('p') , toont de console de functies en eigenschappen die de retourwaarde 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 Audits-paneel . Snellere, consistentere audits, een nieuwe gebruikersinterface en nieuwe audits.
• BigInt -ondersteuning . Probeer JavaScript's nieuwe integer met willekeurige precisie in de console.
• Eigenschapspaden toevoegen aan het deelvenster 'Watch' . Eigenschappen uit het deelvenster 'Scope' toevoegen aan het deelvenster 'Watch'.
• 'Tijdstempels weergeven' is verplaatst naar Instellingen .

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

Hulpconsole

Chrome 68 wordt geleverd met een aantal nieuwe consolefuncties die betrekking hebben op automatisch aanvullen en voorvertoningen.

Gretige evaluatie

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

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

Om Eager Evaluation in te schakelen:

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

DevTools evalueert niet direct of de expressie bijwerkingen veroorzaakt.

Argumentatiehints

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 voor een arg, zoals ?options , vertegenwoordigt een optioneel arg.
• Een ellips voor een arg, zoals ...items , vertegenwoordigt een spread .
• Sommige functies, zoals CSS.supports() , accepteren meerdere argumenthandtekeningen.

Automatisch aanvullen na functie-uitvoeringen

Nadat u Eager Evaluation hebt ingeschakeld, ziet u in de console ook welke eigenschappen en functies beschikbaar zijn nadat u een functie hebt getypt.

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

ES2017-trefwoorden in autocomplete

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 bevatten een overzicht van enkele van de grootste veranderingen. Zie Aankondiging Lighthouse 3.0 voor het volledige verhaal.

Snellere en betrouwbaardere audits

Lighthouse 3.0 beschikt over een nieuwe interne audit-engine met de codenaam Lantern. Hiermee worden uw audits sneller en met minder variatie tussen runs uitgevoerd.

Nieuwe gebruikersinterface

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

Figuur 5. De nieuwe rapport-UI in Lighthouse 3.0

Nieuwe audits

Lighthouse 3.0 wordt ook geleverd met 4 nieuwe audits:

• Eerste Contentful Paint
• robots.txt is niet geldig
• Gebruik videoformaten voor geanimeerde inhoud
• Vermijd meerdere, kostbare retourvluchten naar elke herkomst

BigInt-ondersteuning

Chrome 68 ondersteunt een nieuwe numerieke primitieve genaamd BigInt . Met 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 Pad naar eigenschap toevoegen om te volgen om die eigenschap toe te voegen aan het deelvenster Volgen.

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

'Tijdstempels weergeven' verplaatst naar instellingen

Het selectievakje Tijdstempels weergeven was voorheen beschikbaar in Console-instellingen is verplaatst naar Instellingen .

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.

• Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
• Meld een DevTools-probleem met more_vert Meer opties > Help > Meld een DevTools-probleem in DevTools.
• Tweet naar @ChromeDevTools .
• Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.