Wat is er nieuw in DevTools (Chrome 85)

Jecelyn Yeen

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 release-opmerkingen 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 te maken had 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 opnamen 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. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

Wat is er nieuw in DevTools

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