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.

Je kunt nu ook stijlen bewerken die in JavaScript zijn toegevoegd met Constructable Stylesheets . Constructable Stylesheets zijn een nieuwe manier om herbruikbare stijlen te maken en te distribueren met Shadow DOM .

De h1 stijlen die met CSSStyleSheet (CSSOM API's) zijn toegevoegd, waren bijvoorbeeld voorheen niet bewerkbaar. Nu wel in het deelvenster Stijlen:

Chromium-probleem #946975

Vuurtoren 6 in het Vuurtorenpaneel

Het Lighthouse-paneel draait nu op Lighthouse 6. Bekijk Wat is er nieuw in Lighthouse 6.0 voor een overzicht van alle belangrijke wijzigingen of bekijk de release notes voor v6.0.0 voor een volledig overzicht 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.

Ook de formule voor de prestatiescore is opnieuw gewogen, zodat deze de laadervaring van de gebruikers beter weerspiegelt.

Chromium-probleem #772558

Eerste afkeuring van Meaningful Paint (FMP)

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

Chromium-probleem #1096008

Ondersteuning voor nieuwe JavaScript-functies

DevTools biedt nu betere ondersteuning voor een aantal van de nieuwste JavaScript-taalfuncties:

• Optionele automatische aanvulling van ketensyntaxis: automatische aanvulling van eigenschappen in de console ondersteunt nu optionele ketensyntaxis, bijvoorbeeld name?. werkt nu als aanvulling op name. en name[ .
• Syntaxismarkering voor privévelden : privéklassevelden worden nu correct syntaxisgemarkeerd en mooi weergegeven in het paneel Bronnen.
• Syntaxisaccentuering voor Nullish coalescing operator : DevTools drukt de Nullish coalescing operator nu correct mooi af in het paneel Bronnen.

Chromium-problemen #1083214 , #1073903 , #1083797

Waarschuwingen voor nieuwe app-snelkoppelingen in het Manifest-paneel

Met app-snelkoppelingen kunnen gebruikers snel veelvoorkomende of aanbevolen taken binnen een web-app starten.

Het Manifest-venster toont nu waarschuwingen als:

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

Chromium-probleem #955497

Servicemedewerkers respondWith gebeurtenissen op het tabblad Timing

Het tabblad Timing van het paneel Netwerk bevat nu respondWith -gebeurtenissen van de service worker. respondWith is de tijd onmiddellijk voorafgaand aan de uitvoering van de fetch -gebeurtenisafhandeling van de service worker tot het tijdstip waarop de respondWith belofte van de fetch -afhandeling wordt afgehandeld.

Chromium-probleem #1066579

Consistente weergave van het Berekende deelvenster

Het Berekend-paneel in het Elementenpaneel wordt nu consistent weergegeven als een paneel in alle viewportgroottes. Voorheen werd het Berekend-paneel samengevoegd met het Stijlenpaneel wanneer de DevTools-viewport smal was.

Chromium-probleem #1073899

Bytecode-offsets voor WebAssembly-bestanden

DevTools gebruikt nu bytecode-offsets voor het weergeven van regelnummers van Wasm-disassembly. Dit maakt het duidelijker dat u naar binaire gegevens kijkt en is consistenter met hoe de Wasm-runtime naar locaties verwijst.

Chromium-probleem #1071432

Lijngewijs kopiëren en knippen in het bronnenpaneel

Bij het kopiëren of knippen zonder selectie in de editor van het Bronnenpaneel , kopieert of knipt DevTools de inhoud van de huidige regel. In de onderstaande video staat de cursor bijvoorbeeld aan het einde van regel 1. Nadat u op de sneltoets 'Knippen' hebt gedrukt, wordt de volledige regel naar het klembord gekopieerd en verwijderd.

Chromium-probleem #800028

Updates van console-instellingen

Groepering van dezelfde consoleberichten opheffen

De schakelaar 'Groeperen als vergelijkbaar ' in de console-instellingen is nu van toepassing op dubbele berichten. Voorheen was dit alleen van toepassing op vergelijkbare berichten.

Voorheen deed DevTools bijvoorbeeld de groepering van de berichten hello niet op, ook al was 'Groepeer vergelijkbare' niet aangevinkt. Nu zijn de hello -berichten wel opgesplitst:

Chromium-probleem #1082963

Behouden geselecteerde context-alleen instellingen

De geselecteerde contextinstellingen in de Console-instellingen blijven nu behouden. Voorheen werden de instellingen gereset telkens wanneer u DevTools sloot en opnieuw opende. Door deze wijziging is het gedrag van de instellingen consistent met andere opties in de Console-instellingen.

Chromium-probleem #1055875

Updates van het prestatiepaneel

Informatie over JavaScript-compilatiecache in het Prestatiepaneel

Informatie over de JavaScript-compilatiecache wordt nu altijd weergegeven op het tabblad Samenvatting van het paneel Prestaties. Voorheen toonde DevTools niets over codecaching als er geen codecaching plaatsvond.

Chromium-probleem #912581

Navigatietiminguitlijning in het Prestatiepaneel

Het Prestatiepaneel toonde voorheen tijden in de linialen op basis van het begin van de opname. Dit is nu gewijzigd voor opnames waarbij de gebruiker navigeert, waarbij DevTools nu de tijden in de linialen relatief ten opzichte van de navigatie weergeeft.

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

Chromium-probleem #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 voorwaardelijke breekpunten en logpunten te onderscheiden.

Chromium-probleem #1041830

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.