Wat is er nieuw in DevTools (Chrome 105)

Jecelyn Yeen

Stapsgewijze herhaling in de Recorder

U kunt nu een breekpunt instellen en een gebruikersstroom stap voor stap afspelen in het Recorder- paneel.

Om een ​​breekpunt in te stellen, klikt u op de blauwe stip naast een stap. Speel uw gebruikersstroom opnieuw af. Het afspelen wordt gepauzeerd voordat de stap wordt uitgevoerd. Vanaf hier kunt u doorgaan met het opnieuw afspelen, een stap uitvoeren of het opnieuw afspelen annuleren.

Met deze functie kunt u uw gebruikersstroom eenvoudig volledig visualiseren en debuggen.

Zie Naslaginformatie over recorderfuncties voor meer informatie.

Stapsgewijze herhaling in de Recorder

Chroomuitgave: 1257499

Ondersteuning van muisbeweging over gebeurtenis in het Recorder-paneel

De Recorder ondersteunt nu het handmatig toevoegen van een muisbeweging (zweefbeweging) in een opname.

Deze demo toont een pop-upmenu tijdens het zweven. Probeer een gebruikersstroom vast te leggen en klik op een menu-item.

Als u de gebruikersstroom nu opnieuw afspeelt, mislukt dit omdat de Recorder tijdens het opnemen de muisbewegingen niet automatisch vastlegt. Om dit op te lossen, voegt u handmatig een stap toe om over de selector te bewegen voordat u op het menu-item klikt.

Ondersteuning van muis over gebeurtenis in de Recorder

Chroomuitgave: 1257499

Grootste Contentful Paint (LCP) in het paneel Prestatie-inzichten

LCP is een belangrijke, op de gebruiker gerichte maatstaf voor het meten van de waargenomen laadsnelheid . U kunt nu de kritieke paden en hoofdoorzaken van een Largest Contentful Paint (LCP) achterhalen.

Klik in een uitvoeringsopname op de LCP-badge in de tijdlijn . In het detailvenster kunt u de LCP-score bekijken, leren hoe u resources kunt repareren die het LCP vertragen en het kritieke pad voor de LCP-resource bekijken.

Zie Prestatie-inzichten voor informatie over hoe u bruikbare inzichten kunt verkrijgen en de prestaties van uw website kunt verbeteren met het panel.

LCP in het paneel Prestatie-inzichten

Chroomuitgave: 1326481

Identificeer tekstflitsen (FOIT, FOUT) als mogelijke hoofdoorzaken voor lay-outverschuivingen

Het paneel Prestatie-inzichten detecteert nu flitsen van onzichtbare tekst (FOIT) en flitsen van ongestylede tekst (FOUT) als potentiële hoofdoorzaken voor lay-outverschuivingen.

Om de mogelijke hoofdoorzaken van een lay-outverschuiving te bekijken, klikt u op een screenshot in de lay-outverschuivingstrack .

Zie Het laden en renderen van WebFont optimaliseren om de techniek te leren om lay-outverschuivingen te voorkomen.

FOUT in het paneel Prestatie-inzichten

Chroomuitgaves: 1334628 , 1328873

Protocolhandlers in het paneel Manifest

U kunt nu DevTools gebruiken om de registratie van de URL-protocolhandler voor Progressive Web Apps (PWA) te testen.

Dankzij de registratie van de URL-protocolhandler kunnen geïnstalleerde PWA's links afhandelen die een specifiek protocol gebruiken (bijvoorbeeld magnet , web+example ) voor een meer geïntegreerde ervaring.

Navigeer naar de sectie Protocolhandlers via het paneel Toepassing > Manifest . Hier kunt u alle beschikbare protocollen bekijken en testen.

Installeer bijvoorbeeld deze demo PWA . Typ in het gedeelte Protocolhandlers “americano” en klik op Testprotocol om de koffiepagina in de PWA te openen.

Protocolhandlers in het paneel Manifest

Chroomafgiften: 1300613

Badge voor de bovenste laag in het deelvenster Elementen

Gebruik de badge voor de bovenste laag om het concept van de bovenste laag te begrijpen en te visualiseren hoe de inhoud van de bovenste laag verandert.

Het <dialog> -element is onlangs stabiel geworden in alle browsers. Wanneer u een dialoogvenster opent, wordt het in een bovenste laag geplaatst. Inhoud op het hoogste niveau wordt weergegeven bovenop alle andere inhoud.

In deze demo klikt u op Dialoogvenster openen .

Om de elementen van de bovenste laag te helpen visualiseren, voegt DevTools een container voor de bovenste laag ( #top-layer ) toe aan de DOM-structuur. Het bevindt zich na de afsluitende </html> -tag.

Om van het containerelement van de bovenste laag naar het boomelement van de bovenste laag te springen, klikt u op de onthulknop naast het element of de achtergrond ervan in de container van de bovenste laag.

Klik naast het boomelement van de bovenste laag (bijvoorbeeld het dialoogelement) op de badge van de bovenste laag om naar de container van de bovenste laag te springen.

Badge voor de bovenste laag in het deelvenster Elementen

Chroomuitgave: 1313690

Voeg Wasm-foutopsporingsinformatie toe tijdens runtime

U kunt nu DWARF-foutopsporingsinformatie voor was tijdens runtime bijvoegen. Voorheen ondersteunde het paneel Bronnen alleen het koppelen van brontoewijzingen aan JavaScript- en Wasm-bestanden.

Open een Wasm-bestand in het paneel Bronnen . Klik met de rechtermuisknop in de editor en selecteer DWARF-foutopsporingsinformatie toevoegen... om op verzoek foutopsporingsinformatie toe te voegen.

ALT_TEXT_HIER

Chroomuitgave: 1341255

Ondersteuning van live bewerken tijdens foutopsporing

U kunt nu de bovenste functie op de stapel bewerken zonder de debugger opnieuw te starten.

In Chrome 104 brengt DevTools de herstartframefunctie terug. U kunt de functie waarin u momenteel bent gepauzeerd echter niet bewerken. Het is gebruikelijk dat ontwikkelaars een functie inbreken en vervolgens die functie bewerken terwijl deze is gepauzeerd.

Met deze update start de debugger de functie automatisch opnieuw met de volgende beperkingen:

  • Alleen de bovenste functie kan worden bewerkt terwijl deze is gepauzeerd
  • Geen recursieve aanroep van dezelfde functie verderop in de stapel

live bewerken tijdens foutopsporing

Chroomuitgave: 1334484

Bekijk en bewerk @scope bij regels in het deelvenster Stijlen

U kunt nu de CSS @scope at-regels bekijken en bewerken in het deelvenster Stijlen .

De @scope bij regels maakt deel uit van de CSS Cascading and Inheritance Level 6-specificatie . Met deze regels kunnen ontwikkelaars stijlregels in CSS bepalen.

Open deze demopagina en inspecteer de hyperlink binnen het <div class=”dark-theme”> element. Bekijk in het deelvenster Stijlen de @scope at-regels. Klik op de regeldeclaratie om deze te bewerken.

@scope bij regels in het deelvenster Stijlen

Chroomuitgave: 1337777

Verbeteringen in de bronkaart

Hier zijn een paar oplossingen voor bronkaarten om de algehele foutopsporingservaring te verbeteren:

  • DevTools lost bronkaart-ID's nu correct op met interpunctie. Sommige moderne minifiers (bijvoorbeeld esbuild ) produceren bronkaarten die identifiers samenvoegen met daaropvolgende interpunctie (komma, haakjes, puntkomma).
  • DevTools lost nu bronkaartnamen voor constructors op met een super . ALT_TEXT_HIER
  • Vaste bronkaart-URL-indexering voor dubbele canonieke URL's. Voorheen werden breekpunten in sommige bestanden niet geactiveerd vanwege dubbele canonieke URL's.

Chroomuitgave: 1335338 , 1333411

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

  • Verwijder een sleutelwaardepaar voor lokale opslag op de juiste manier uit de tabel in het deelvenster Toepassing > Lokale opslag wanneer het wordt verwijderd. ( 1339280 )
  • De kleurvoorbeelden worden nu correct weergegeven bij het bekijken van CSS-bestanden in het paneel Bronnen . Voorheen waren hun posities misplaatst. ( 1340062 )
  • Geef de CSS-flex- en grid-items consistent weer in het lay- outvenster, en geef ze ook weer als badges in het paneel Elementen . Voorheen ontbraken de flex- en grid-items willekeurig op beide plaatsen. ( 1340441 , 1273992 )
  • Er is een nieuwe Creator Ad Script- link beschikbaar voor advertentieframes als DevTools het script heeft gevonden dat ervoor zorgde dat het frame als advertentie werd gelabeld. U kunt een frame openen via Applicatie > Frames . ( 1217041 )

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 .