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.

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 . Diverse 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 audit-engine, 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 het gebruik van Chrome Canary , Dev of Beta 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 MeerMeer > 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 .

Chroom 124

Chroom 123

Chroom 122

Chroom 121

Chroom 120

Chroom 119

Chroom 118

Chroom 117

Chroom 116

Chroom 115

Chroom 114

Chroom 113

Chroom 112

Chroom 111

Chroom 110

Chroom 109

Chroom 108

Chroom 107

Chroom 106

Chroom 105

Chroom 104

Chroom 103

Chroom 102

Chroom 101

Chroom 100

Chroom 99

Chroom 98

Chroom 97

Chroom 96

Chroom 95

Chroom 94

Chroom 93

Chroom 92

Chroom 91

Chroom 90

Chroom 89

Chroom 88

Chroom 87

Chroom 86

Chroom 85

Chroom 84

Chroom 83

Chroom 82

Chrome 82 is geannuleerd .

Chroom 81

Chroom 80

Chroom 79

Chroom 78

Chroom 77

Chroom 76

Chroom 75

Chroom 74

Chroom 73

Chroom 72

Chroom 71

Chroom 70

Chroom 68

Chroom 67

Chroom 66

Chroom 65

Chroom 64

Chroom 63

Chroom 62

Chroom 61

Chroom 60

Chroom 59