Wat is er nieuw in DevTools (Chrome 68)

Kayce Basken
Kayce Basques
X GitHub

Nieuw in DevTools in Chrome 68:

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

Hulpconsole

Chrome 68 wordt geleverd met een aantal nieuwe consolefuncties met betrekking tot automatisch aanvullen en voorbeeldweergave.

Enthousiaste evaluatie

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

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

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

Om Eager Evaluation in te schakelen:

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

DevTools evalueert niet direct of de expressie bijwerkingen veroorzaakt.

Argumentatietips

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

Argumenthints in de console.

Afbeelding 2. Diverse voorbeelden van argumenthints in de console.

Opmerkingen:

  • Een vraagteken voor een argument, zoals ?options , geeft aan dat het een optioneel argument is.
  • Een ellipsis vóór een argument, zoals ...items , geeft een spread aan.
  • Sommige functies, zoals CSS.supports() , accepteren meerdere argumenten.

Automatische aanvulling na het uitvoeren van functies

Nadat je Eager Evaluation hebt ingeschakeld, toont de console nu ook welke eigenschappen en functies beschikbaar zijn nadat je een functie hebt ingevoerd.

Na het uitvoeren van document.querySelector('p'), kan de console nu de beschikbare eigenschappen en functies voor dat element weergeven.

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

ES2017-trefwoorden in de autocomplete-functie

ES2017-trefwoorden, zoals await , zijn nu beschikbaar in de autocomplete-interface van de console.

De console suggereert nu 'await' in de automatische aanvullingsfunctie.

Afbeelding 4. De console suggereert nu await in de automatische aanvullingsinterface.

Snellere, betrouwbaardere audits, een nieuwe gebruikersinterface en nieuwe auditmethoden.

Chrome 68 wordt geleverd met Lighthouse 3.0. De volgende paragrafen geven een overzicht van enkele van de belangrijkste wijzigingen. Zie 'Aankondiging 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 en met minder variatie tussen de verschillende uitvoeringen voltooit.

Nieuwe gebruikersinterface

Lighthouse 3.0 introduceert ook een nieuwe gebruikersinterface, dankzij een samenwerking tussen de Lighthouse- en Chrome UX-teams (onderzoek en ontwerp).

De nieuwe rapportage-UI in Lighthouse 3.0.

Afbeelding 5. De nieuwe rapport-UI in Lighthouse 3.0.

Nieuwe audits

Lighthouse 3.0 wordt ook geleverd met 4 nieuwe audits:

  • Eerste tevredenstellende verf
  • robots.txt is niet geldig
  • Gebruik videoformaten voor geanimeerde content.
  • Vermijd meerdere, kostbare retourvluchten naar elke vertrekplaats.

BigInt-ondersteuning

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

Een voorbeeld van BigInt in de console.

Afbeelding 6. Een voorbeeld van BigInt in de console.

Voeg het pad van de eigenschap toe aan de watch.

Als de applicatie op een breekpunt is gepauzeerd, klikt u met de rechtermuisknop op een eigenschap in het deelvenster Bereik en selecteert u 'Eigenschapspad toevoegen aan de lijst met te bewaken eigenschappen' om die eigenschap aan het deelvenster Bewaken toe te voegen.

Een voorbeeld van het toevoegen van een eigenschapspad aan de watch-functie.

Afbeelding 7. Een voorbeeld van het toevoegen van een eigenschapspad aan de watch.

"Tijdstempels weergeven" is verplaatst naar de instellingen.

Het selectievakje 'Tijdstempels weergeven' was voorheen te vinden in de console-instellingen. De knop Console-instellingen is verplaatst naar Instellingen .

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .