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 intern om stijlen te genereren.

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

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

Chromium-probleem #946975

Vuurtoren 6 in het Vuurtorenpaneel

Het Lighthouse-paneel draait nu op Lighthouse 6. Bekijk 'Wat is nieuw in Lighthouse 6.0' voor een overzicht van alle belangrijke wijzigingen, of de release-opmerkingen van versie 6.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 laboratoriummeting die een proxy vormt voor een andere Core Web Vital, namelijk First Input Delay.

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

Chromium-probleem #772558

Afschaffing van First Meaningful Paint (FMP)

First Meaningful Paint (FMP) is afgeschaft 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 is afgeschaft.

Chromium-probleem #1096008

Ondersteuning voor nieuwe JavaScript-functies

DevTools biedt nu betere ondersteuning voor enkele van de nieuwste JavaScript-taalfunctionaliteiten:

• Automatische aanvulling van optionele ketensyntaxis - eigenschapsaanvulling in de console ondersteunt nu optionele ketensyntaxis, bijvoorbeeld name?. werkt nu naast name. en name[ .
• Syntaxmarkering voor privévelden - privéklassevelden worden nu correct van syntaxmarkering voorzien en mooi opgemaakt in het paneel Bronnen.
• Syntaxmarkering voor de nullish coalescing operator - DevTools print de nullish coalescing operator nu correct en netjes af in het paneel Bronnen.

Chromium-problemen #1083214 , #1073903 , #1083797

Nieuwe app-snelkoppelingswaarschuwingen in het Manifest-venster

App-snelkoppelingen helpen gebruikers om snel veelvoorkomende of aanbevolen taken binnen een webapplicatie te starten.

Het Manifest-venster geeft nu waarschuwingen weer als:

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

Chromium-probleem #955497

Servicemedewerker respondWith gebeurtenissen in het tabblad Timing.

Het tabblad Timing in het netwerkpaneel bevat nu ook respondWith -gebeurtenissen van de service worker. respondWith is de tijd direct voordat de fetch -gebeurtenishandler van de service worker wordt uitgevoerd tot het moment dat de respondWith belofte van de fetch handler is afgehandeld.

Chromium-probleem #1066579

Consistente weergave van het paneel 'Berekend'

Het deelvenster 'Berekend' in het paneel 'Elementen' wordt nu consistent als een apart deelvenster weergegeven, ongeacht de schermgrootte. Voorheen werd het deelvenster 'Berekend' samengevoegd met het deelvenster 'Stijlen' wanneer de breedte van het scherm van de ontwikkelaarstools smal was.

Chromium-probleem #1073899

Bytecode-offsets voor WebAssembly-bestanden

DevTools gebruikt nu bytecode-offsets voor het weergeven van regelnummers in de Wasm-disassemblage. Dit maakt duidelijker dat je naar binaire data kijkt en is consistenter met de manier waarop de Wasm-runtime naar locaties verwijst.

Chromium-probleem #1071432

Kopieer en knip regel voor regel in het paneel Bronnen

Wanneer je in de editor van het paneel Bronnen een tekst kopieert of knipt zonder een selectie te maken, kopieert of knipt DevTools de inhoud van de huidige regel. In de onderstaande video staat de cursor bijvoorbeeld aan het einde van regel 1. Na het indrukken van de sneltoets voor knippen wordt de hele regel naar het klembord gekopieerd en verwijderd.

Chromium-probleem #800028

Updates van de console-instellingen

Dezelfde consoleberichten ontgroeperen

De optie 'Groeperen met vergelijkbare berichten' in de console-instellingen is nu ook van toepassing op dubbele berichten. Voorheen gold deze optie alleen voor vergelijkbare berichten.

Zo werden de hello -berichten in DevTools bijvoorbeeld voorheen niet uit de groep gehaald, ook al was 'Groepeer vergelijkbare berichten' uitgeschakeld. Nu worden de hello -berichten wél uit de groep gehaald:

Chromium-probleem #1082963

Instellingen voor de geselecteerde context behouden

De instelling 'Alleen voor geselecteerde context' in de console-instellingen wordt nu permanent opgeslagen. Voorheen werden de instellingen gereset telkens wanneer u DevTools sloot en opnieuw opende. Deze wijziging zorgt ervoor dat het gedrag van de instelling consistent is met andere opties in de console-instellingen.

Chromium-probleem #1055875

Updates van het prestatiepaneel

Informatie over de JavaScript-compilatiecache in het prestatiepaneel

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

Chromium-probleem #912581

Navigatietiming afstemmen in het Prestatiepaneel

Het paneel Prestaties toonde voorheen tijden in de linialen op basis van het startmoment van de opname. Dit is nu veranderd voor opnames waarbij de gebruiker navigeert; in DevTools worden de tijden in de linialen nu weergegeven ten opzichte van de navigatie.

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

Chromium-probleem #974550

Nieuwe pictogrammen voor breakpoints, conditionele breakpoints en logpoints.

Het paneel 'Bronnen' heeft nieuwe ontwerpen voor breakpoints, voorwaardelijke breakpoints en logpoints. Breakpoints hebben een vernieuwd vlagontwerp met helderdere en vriendelijkere kleuren. Er zijn pictogrammen toegevoegd om voorwaardelijke breakpoints en logpoints van elkaar te onderscheiden.

Chromium-probleem #1041830

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.

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

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