Wat is er nieuw in DevTools (Chrome 85)

Stijlbewerking voor CSS-in-JS-frameworks

Het deelvenster Stijlen biedt nu betere ondersteuning voor het bewerken van stijlen die zijn gemaakt met de CSS Object Model (CSSOM) API's. Veel CSS-in-JS-frameworks en -bibliotheken gebruiken de CSSOM API's onder de motorkap om stijlen te construeren.

U kunt nu ook stijlen bewerken die in JavaScript zijn toegevoegd met behulp van Constructable Stylesheets . Constructable Stylesheets zijn een nieuwe manier om herbruikbare stijlen te maken en te distribueren bij het gebruik van Shadow DOM .

De h1 stijlen die zijn toegevoegd met CSSStyleSheet (CSSOM API's) kunnen bijvoorbeeld niet eerder worden bewerkt. Er zijn nu bewerkbare opties in het deelvenster Stijlen:

Chroomnummer 946975

Vuurtoren 6 in het Vuurtorenpaneel

In het Lighthouse-paneel wordt nu Lighthouse 6 uitgevoerd. Bekijk Wat is er nieuw in Lighthouse 6.0 voor een samenvatting van alle belangrijke wijzigingen, of de releaseopmerkingen van v6.0.0 voor een volledige lijst van alle wijzigingen.

Lighthouse 6.0 introduceert drie nieuwe statistieken in het rapport: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) en Total Blocking Time (TBT). LCP en CLS zijn twee van Google's nieuwe Core Web Vitals , en TBT is een proxy voor laboratoriummetingen voor een andere Core Web Vital, First Input Delay.

De formule voor de prestatiescore is ook opnieuw gewogen om de laadervaring van de gebruikers beter weer te geven.

Nieuwe prestatiestatistieken in Lighthouse 6.0

Chroomnummer 772558

Eerste beëindiging van Meaningful Paint (FMP).

First Meaningful Paint (FMP) is verouderd in Lighthouse 6.0. Het is ook verwijderd uit het prestatiepaneel. Largest Contentful Paint is de aanbevolen vervanging voor FMP. Zie First Meaningful Paint voor een uitleg waarom het verouderd is.

Chroom nummer 1096008

Ondersteuning voor nieuwe JavaScript-functies

DevTools heeft nu betere ondersteuning voor enkele van de nieuwste JavaScript-taalfuncties:

  • Optionele automatisch aanvullen van ketensyntaxis - het automatisch aanvullen van eigenschappen in de console ondersteunt nu optionele ketensyntaxis, bijvoorbeeld name?. werkt nu naast name. en name[ .
  • Syntaxisaccentuering voor privévelden - privéklassevelden worden nu correct syntaxisgemarkeerd en mooi afgedrukt in het Bronnenpaneel.
  • Syntaxisaccentuering voor de nullish-coalescerende operator - DevTools drukt de nullish-coalescerende operator nu op de juiste manier mooi af in het deelvenster Bronnen.

Chroomproblemen #1083214 , #1073903 , #1083797

Nieuwe app-snelkoppelingswaarschuwingen in het manifestvenster

App-snelkoppelingen helpen gebruikers snel algemene of aanbevolen taken binnen een web-app te starten.

In het manifestvenster worden nu waarschuwingen weergegeven als:

  • de app-snelkoppelingspictogrammen zijn kleiner dan 96 x 96 pixels
  • de app-snelkoppelingspictogrammen en manifestpictogrammen zijn niet vierkant (omdat ze worden genegeerd)

Waarschuwingen voor app-snelkoppelingen

Chroomnummer 955497

Servicemedewerker respondWith gebeurtenissen op het tabblad Timing

Het tabblad Timing van het paneel Netwerk bevat nu respondWith gebeurtenissen voor servicemedewerkers. respondWith is de tijd onmiddellijk voordat de fetch van de servicemedewerker wordt uitgevoerd tot het tijdstip waarop de respondWith belofte van de fetch wordt afgehandeld.

servicemedewerker `respondWith`

Chroom nummer 1066579

Consistente weergave van het berekende deelvenster

Het berekende deelvenster in het deelvenster Elementen wordt nu consistent weergegeven als een deelvenster voor alle vensterformaten. Voorheen zou het Computed-paneel samengaan met het Styles-paneel als de breedte van de DevTools-viewport smal was.

Chroom nummer 1073899

Bytecode-offsets voor WebAssembly-bestanden

DevTools gebruikt nu bytecode-offsets voor het weergeven van regelnummers van Wasm-demontage. Dit maakt het duidelijker dat u naar binaire gegevens kijkt en komt consistenter overeen met de manier waarop de Wasm-runtime naar locaties verwijst.

Bytecode-offsets

Chroom nummer 1071432

Lijnsgewijs kopiëren en knippen in het Bronnenpaneel

Wanneer u kopieert of knipt zonder selectie in de paneeleditor Bronnen , kopieert of knipt DevTools de huidige regelinhoud. In de onderstaande video staat de cursor bijvoorbeeld aan het einde van regel 1. Nadat u op de sneltoets Knippen hebt gedrukt, wordt de hele regel naar het klembord gekopieerd en verwijderd.

Chroomnummer 800028

Console-instellingen worden bijgewerkt

Degroepeer dezelfde consoleberichten

De schakelaar Groepssoortgelijken in Console-instellingen is nu van toepassing op dubbele berichten. Voorheen gold dit alleen voor soortgelijke berichten.

Voorheen heeft DevTools bijvoorbeeld de berichten hello niet gedegroepeerd, ook al is Groep vergelijkbaar niet aangevinkt. Nu zijn de hello berichten niet meer gegroepeerd:

Chroom nummer 1082963

Blijvend Geselecteerde instellingen voor alleen context

De instellingen voor Alleen geselecteerde context in Console-instellingen blijven nu behouden. Voorheen werden de instellingen opnieuw ingesteld telkens wanneer u DevTools sloot en opnieuw opende. Deze wijziging zorgt ervoor dat het instellingsgedrag consistent is met andere opties voor Console-instellingen.

Alleen geselecteerde context

Chroom nummer 1055875

Updates van het prestatiepaneel

Informatie over de JavaScript-compilatiecache in het paneel Prestaties

Informatie over de JavaScript-compilatiecache wordt nu altijd weergegeven op het tabblad Samenvatting van het paneel Prestaties. Voorheen liet DevTools niets zien dat verband hield met codecaching als er geen codecaching plaatsvond.

JavaScript-compilatiecache-informatie

Chroomnummer 912581

In het paneel Prestaties werden tijden in de linialen weergegeven op basis van het moment waarop de opname begon. Dit is nu veranderd voor opnames waarbij de gebruiker navigeert, waarbij DevTools nu liniaaltijden toont ten opzichte van de navigatie.

Lijn de navigatietiming uit in het prestatiepaneel

We hebben ook de tijden voor DOMContentLoaded , First Paint, First Contentful Paint en Largest Contentful Paint-gebeurtenissen bijgewerkt zodat ze relatief zijn ten opzichte van het begin van de navigatie, wat betekent dat ze overeenkomen met de timings die worden gerapporteerd door PerformanceObserver .

Chroomnummer 974550

Nieuwe pictogrammen voor breekpunten, voorwaardelijke breekpunten en logpunten

Het paneel Bronnen heeft nieuwe ontwerpen voor breekpunten, voorwaardelijke breekpunten en logpunten. Breekpunten krijgen een vernieuwd vlagontwerp met helderdere en vriendelijkere kleuren. Er zijn pictogrammen toegevoegd om onderscheid te maken tussen voorwaardelijke breekpunten en logpunten.

Breekpunten

Chroom nummer 1041830

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 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 is behandeld in de What's New In DevTools- serie.

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