Wat is er nieuw in DevTools (Chrome 105)

Jecelyn Yeen

Stap-voor-stap herhaling in de Recorder

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

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

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

Zie de Recorder-functies voor meer informatie.

Chromium-probleem: 1257499

Ondersteuning voor muisbewegingen over gebeurtenissen in het Recorder-paneel

De recorder ondersteunt nu het handmatig toevoegen van een muisstap (hover) in een opname.

Deze demo toont een pop-upmenu bij het bewegen van de muis. Probeer een gebruikersstroom op te nemen en op een menu-item te klikken.

Als u de gebruikersstroom nu opnieuw afspeelt, mislukt dit omdat de recorder de muisbewegingen tijdens de opname niet automatisch vastlegt. Om dit probleem op te lossen, kunt u handmatig een stap toevoegen om met de muis over de selector te bewegen voordat u op het menu-item klikt.

Chromium-probleem: 1257499

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

LCP is een belangrijke, gebruikersgerichte metriek voor het meten van de waargenomen laadsnelheid . U kunt nu de kritieke paden en grondoorzaken van een Largest Contentful Paint (LCP) achterhalen.

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

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

Chromium-probleem: 1326481

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

Het paneel Prestatie-inzichten detecteert nu het knipperen van onzichtbare tekst (FOIT) en het knipperen van tekst zonder opmaak (FOUT) als mogelijke hoofdoorzaken van lay-outverschuivingen.

Om de mogelijke grondoorzaken van een lay-outverschuiving te bekijken, klikt u op een schermafbeelding in het spoor Lay-outverschuivingen .

Zie WebFont-laden en -rendering optimaliseren voor informatie over de techniek om lay-outverschuivingen te voorkomen.

Chromium-problemen: 1334628 , 1328873

Protocolhandlers in het Manifest-paneel

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

Met de registratie van het URL-protocolhandler kunnen geïnstalleerde PWA's koppelingen verwerken die gebruikmaken van een specifiek protocol (bijvoorbeeld magnet , web+example ), voor een meer geïntegreerde ervaring.

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

Installeer bijvoorbeeld deze demo-PWA . Typ 'americano' in het gedeelte 'Protocolhandlers' en klik op 'Testprotocol' om de pagina 'Koffie' in de PWA te openen.

Chromium-problemen: 1300613

Badge van de bovenste laag in het Elementenpaneel

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 sinds kort stabiel in alle browsers. Wanneer u een dialoogvenster opent, wordt het in een bovenste laag geplaatst. De inhoud op het hoogste niveau wordt bovenop alle andere inhoud weergegeven.

Klik in deze demo op Dialoog openen .

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

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

Klik naast het bovenste laagboomelement (bijvoorbeeld het dialoogelement) op de badge van de bovenste laag om naar de bovenste laagcontainer te gaan.

Chromium-probleem: 1313690

Voeg Wasm-foutopsporingsinformatie toe tijdens runtime

U kunt nu DWARF-foutopsporingsinformatie voor Wasm toevoegen tijdens runtime. Voorheen ondersteunde het Bronnenpaneel alleen het toevoegen van bronkaarten aan JavaScript- en Wasm-bestanden.

Open een Wasm-bestand in het Bronnenpaneel . Klik met de rechtermuisknop in de editor en selecteer DWARF-foutopsporingsinformatie toevoegen… om foutopsporingsinformatie op aanvraag toe te voegen.

Chromium-probleem: 1341255

Ondersteuning voor live-bewerking tijdens het debuggen

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

In Chrome 104 brengt DevTools de herstartfunctie terug. Je kon echter de functie waarin je momenteel gepauzeerd was niet bewerken. Het komt vaak voor dat ontwikkelaars een functie blokkeren en die functie vervolgens bewerken terwijl de browser gepauzeerd is.

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

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

Chromium-probleem: 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 at rules maakt deel uit van de CSS Cascading and Inheritance Level 6-specificatie . Deze regels stellen ontwikkelaars in staat om stijlregels in CSS te definiëren.

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

Chromium-probleem: 1337777

Verbeteringen aan de bronkaart

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

• DevTools verwerkt nu bronkaart-ID's correct met leestekens. Sommige moderne minifiers (bijvoorbeeld esbuild ) produceren bronkaarten die ID's samenvoegen met daaropvolgende leestekens (komma's, haakjes, puntkomma's).
• DevTools verwerkt nu bronmapnamen voor constructoren met een super .
• URL-indexering van bronmap hersteld voor dubbele canonieke URL's. Voorheen werden breekpunten in sommige bestanden niet geactiveerd vanwege dubbele canonieke URL's.

Chromium-probleem: 1335338 , 1333411

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

• Verwijder een lokale opslagsleutelwaardepaar correct uit de tabel in het deelvenster Toepassing > Lokale opslag wanneer het is verwijderd. ( 1339280 )
• De kleurvoorbeelden worden nu correct weergegeven bij het bekijken van CSS-bestanden in het Bronnenpaneel . Voorheen waren hun posities verkeerd geplaatst. ( 1340062 )
• Geef de CSS-flex- en rasteritems consistent weer in het deelvenster Lay-out en als badges in het deelvenster Elementen . Voorheen ontbraken de flex- en rasteritems 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 Toepassing > Frames . ( 1217041 )

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 wat in de serie Wat is er nieuw in DevTools is behandeld.