Wat is er nieuw in DevTools (Chrome 105)

Jecelyn Yeen

Stapsgewijze herhaling in de Recorder

Je kunt nu een breekpunt instellen en een gebruikersstroom stap voor stap afspelen in het opnamepaneel .

Om een ​​breekpunt in te stellen, klikt u op de blauwe stip naast een stap. Speel uw gebruikersstroom opnieuw af; de weergave pauzeert voordat de stap wordt uitgevoerd. Vanuit hier kunt u de weergave hervatten, een stap uitvoeren of de weergave annuleren.

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

Zie de functiereferentie van de recorder voor meer informatie.

Chromium-probleem: 1257499

Ondersteuning voor muisover-gebeurtenissen in het Recorder-paneel

De recorder biedt nu de mogelijkheid om handmatig een muisoverstap (hover) toe te voegen aan een opname.

Deze demo laat een pop-upmenu zien dat verschijnt wanneer je de muis eroverheen beweegt. Probeer een gebruikersflow op te nemen en klik op een menu-item.

Als je de gebruikersflow nu opnieuw afspeelt, zal deze mislukken omdat de Recorder muisbewegingen niet automatisch vastlegt tijdens de opname. Om dit op te lossen, voeg je handmatig een stap toe waarbij de muis over de selector beweegt voordat je op het menu-item klikt.

Chromium-probleem: 1257499

Grootste inhoudsgebied (LCP) in het Performance Insights-paneel

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

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

Bekijk Prestatie-inzichten om te leren 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 oorzaken van lay-outverschuivingen.

Het paneel 'Prestatie-inzichten' detecteert nu flitsen van onzichtbare tekst (FOIT) en flitsen van niet-opgemaakte tekst (FOUT) als mogelijke oorzaken van lay-outverschuivingen.

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

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

Chromium-problemen: 1334628 , 1328873

Protocolhandlers in het manifestvenster

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

De registratie van de URL-protocolhandler zorgt ervoor dat geïnstalleerde PWA's links kunnen verwerken die een specifiek protocol gebruiken (bijv. magnet , web+example ) voor een meer geïntegreerde gebruikerservaring.

Ga 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 'Protocol Handlers ' 'americano' en klik op 'Test protocol' om de koffiepagina in de PWA te openen.

Chromium-problemen: 1300613

Bovenste laagbadge 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 je een dialoogvenster opent, wordt het in een bovenliggende laag geplaatst. Inhoud op het hoogste niveau wordt boven alle andere inhoud weergegeven.

Klik in deze demo op 'Dialoogvenster openen' .

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

Om vanuit het containerelement van de bovenste laag naar het boomstructuurelement van de bovenste laag te springen, klikt u op de knop ' onthullen ' naast het element of de achtergrond ervan in de container van de bovenste laag.

Klik naast het element van de bovenste laag van de boomstructuur (bijvoorbeeld het dialoogvenster) op het pictogram van de bovenste laag om naar de container van de bovenste laag te gaan.

Chromium-probleem: 1313690

Voeg Wasm-debuginformatie toe tijdens de uitvoering.

Je kunt nu tijdens runtime DWARF-debuginformatie voor wasm toevoegen. Voorheen kon je via het paneel 'Bronnen ' alleen bronkaarten toevoegen 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 foutopsporingsinformatie naar behoefte toe te voegen.

Chromium-probleem: 1341255

Ondersteuning voor live bewerken tijdens het debuggen.

Je kunt nu de bovenste functie op de stack bewerken zonder de debugger opnieuw te starten.

In Chrome 104 is de functie voor het herstarten van het venster teruggebracht in de ontwikkelaarstools. Het was echter niet mogelijk om de functie waarin je momenteel gepauzeerd bent te bewerken. Het is gebruikelijk dat ontwikkelaars een pauze in een functie inlassen en deze vervolgens bewerken terwijl de applicatie gepauzeerd is.

Met deze update start de debugger de functie automatisch opnieuw 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 stack.

Chromium-probleem: 1334484

Bekijk en bewerk @scope-regels in het deelvenster Stijlen.

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

De @scope -regels maken deel uit van de CSS Cascading and Inheritance Level 6-specificatie . Met deze regels kunnen ontwikkelaars stijlregels in CSS definiëren en de reikwijdte ervan beperken.

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

Chromium-probleem: 1337777

Bronkaartverbeteringen

Hieronder volgen enkele verbeteringen aan source maps om de algehele debugervaring te optimaliseren:

• DevTools lost nu correct source map-identifiers op, inclusief leestekens. Sommige moderne minifiers (zoals esbuild ) produceren source maps waarin identifiers worden samengevoegd met daaropvolgende leestekens (komma, haakjes, puntkomma).
• DevTools lost nu de namen van bronkaarten op voor constructors met een ` super aanroep.
• De indexering van bronmap-URL's is gecorrigeerd voor dubbele canonieke URL's. Voorheen werden breakpoints in sommige bestanden niet geactiveerd vanwege dubbele canonieke URL's.

Chromium-probleem: 1335338 , 1333411

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen in deze release:

• Verwijder een sleutel-waardepaar uit de lokale opslag correct uit de tabel in het deelvenster Toepassing > Lokale opslag wanneer deze wordt verwijderd. ( 1339280 )
• De kleurvoorbeelden worden nu correct weergegeven bij het bekijken van CSS-bestanden in het paneel Bronnen . Voorheen stonden ze op de verkeerde plek. ( 1340062 )
• De CSS flex- en grid-items moeten consistent worden weergegeven in het lay- outpaneel en als badges in het elementenpaneel . Voorheen ontbraken de flex- en grid-items willekeurig op beide plaatsen. ( 1340441 , 1273992 )
• Er is een nieuwe link naar advertentiescripts voor Creator beschikbaar voor advertentiekaders als DevTools het script heeft gevonden dat ervoor zorgde dat het kader als advertentie werd gemarkeerd. U kunt een kader openen via Toepassing > Kaders . ( 1217041 )

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' .