Wat is er nieuw in DevTools (Chrome 106)

Jecelyn Yeen

Groepeer bestanden op Auteur/Implementatie in het Bronnenpaneel

De optie 'Bestanden groeperen op auteur/implementatie' wordt nu weergegeven onder het menu met de drie puntjes. Voorheen stond deze optie direct in het navigatievenster.

Open deze demo . Schakel de instelling 'Bestanden groeperen op auteur/implementatie' in om eerst uw originele broncode (door u geschreven) te bekijken en er sneller naartoe te navigeren.

Groepeer bestanden op basis van auteur/implementatie

Chromium-bug: 1352488

Verbeterde stacktraces

Gekoppelde stacktraces voor asynchrone bewerkingen

Wanneer bepaalde bewerkingen asynchroon worden uitgevoerd, geven de stacktraces in DevTools nu het volledige beeld van de bewerking. Voorheen was dit slechts een deel van het beeld.

Open bijvoorbeeld deze demo en klik op de knop 'Verhogen'. Vouw het foutbericht uit in de console . In onze broncode bevat de bewerking een asynchrone timeout .

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

Voorheen toonde de stacktrace alleen de time-outbewerking. De "hoofdoorzaak" van de bewerking werd niet weergegeven.

Met de nieuwste wijzigingen laat DevTools nu zien dat de bewerking begint bij de onClick gebeurtenis in het knopcomponent, vervolgens de increment functie, gevolgd door de timeout-bewerking.

Gekoppelde stacktraces voor asynchrone bewerkingen

Achter de schermen heeft DevTools een nieuwe functie geïntroduceerd: "Async Stack Tagging". Je kunt het volledige verhaal van een bewerking vertellen door beide delen van de asynchrone code aan elkaar te koppelen met de nieuwe methode console.createTask() . Zie Modern debuggen in DevTools voor meer informatie.

Klinkt het ingewikkeld? Helemaal niet. Meestal regelt het framework dat je gebruikt de planning en asynchrone uitvoering. In dat geval is het aan het framework om de API te gebruiken, je hoeft je daar geen zorgen over te maken. (bijvoorbeeld Angular heeft deze wijzigingen doorgevoerd)

Chromium-bug: 1334585

Scripts van derden automatisch negeren

Identificeer problemen in je code sneller tijdens het debuggen, omdat DevTools nu automatisch bekende scripts van derden toevoegt aan de negeerlijst.

Open deze demo en klik op de knop 'Verhogen'. Vouw het foutbericht uit in de console . De stacktrace toont alleen uw code (bijv. app.component.ts button.component.ts ). Klik op 'Meer frames weergeven' om de volledige stacktrace te bekijken.

Voorheen bevatte de stacktrace scripts van derden zoals zone.js en core.mjs . Dit is niet je eigen broncode, maar wordt gegenereerd door bundlers (zoals webpack) of frameworks (zoals Angular). Het duurde daardoor langer om de hoofdoorzaak van een fout te achterhalen.

Negeer automatisch bekende scripts van derden in de stacktrace.

Achter de schermen negeert DevTools scripts van derden op basis van de nieuwe eigenschap x_google_ignoreList in source maps. Frameworks en bundlers moeten deze informatie zelf aanleveren. Zie de casestudy: Beter debuggen van Angular met DevTools .

Optioneel kunt u, als u liever altijd de volledige stacktraces wilt bekijken, deze instelling uitschakelen via Instellingen > Negeerlijst > Bekende scripts van derden automatisch toevoegen aan de negeerlijst .

Instelling om bekende scripts van derden automatisch toe te voegen aan de negeerlijst.

Chromium-bug: 1323199

Verbeterde aanroepstack tijdens het debuggen

Met de instelling 'Automatisch bekende scripts van derden toevoegen aan de negeerlijst' toont de aanroepstack nu alleen frames die relevant zijn voor uw code.

Open deze demo en plaats een breakpoint bij de functie increment() in app.component.ts . Klik op de knop 'Increment' op de pagina om het breakpoint te activeren. De aanroepstack toont alleen frames uit uw code (bijv. app.component.ts en button.component.ts ).

Om alle frames te bekijken, schakelt u 'Frames uit de negeerlijst weergeven' in . Voorheen werden in DevTools standaard alle frames weergegeven.

Verbeterde aanroepstack tijdens het debuggen

Chromium-bug: 1352488

Bronnen op de negeerlijst verbergen in het paneel Bronnen

Schakel de optie 'Bronnen op de negeerlijst verbergen' in om irrelevante bestanden in het navigatievenster te verbergen. Zo kunt u zich volledig op uw code concentreren.

Open deze demo . In het paneel node_modules Bronnen' vind webpack de scripts van derden. Klik op het menu met de drie puntjes en selecteer 'Bronnen uit de negeerlijst verbergen' om ze uit het paneel te verwijderen.

Bronnen op de negeerlijst verbergen in het paneel Bronnen

Chromium-bug: 1352488

Met de instelling 'Bronnen uit de negeerlijst verbergen' kunt u uw bestand sneller vinden via het opdrachtmenu . Voorheen leverde het zoeken in het opdrachtmenu bestanden van derden op die mogelijk niet relevant voor u waren.

Schakel bijvoorbeeld de instelling 'Bronnen uit de negeerlijst verbergen' in en klik op het menu met de drie puntjes. Selecteer 'Bestand openen' . Typ 'ton' om te zoeken naar knopcomponenten. Eerder werden er bestanden uit de node_modules weergegeven, waarbij een van de bestanden node_modules zelfs als eerste resultaat verscheen.

Bestanden op de negeerlijst verbergen in het opdrachtmenu.

Chromium-bug: 1336604

Nieuwe interactietrack in het prestatiepaneel

Gebruik het nieuwe interactiespoor in het paneel Prestaties om interacties te visualiseren en mogelijke problemen met de responsiviteit op te sporen.

Start bijvoorbeeld een opname van een optreden op deze demopagina . Klik op een kopje koffie en stop de opname. Er verschijnen twee interacties in het interactieoverzicht . Beide interacties hebben dezelfde ID's, wat aangeeft dat de interacties door dezelfde gebruikersinteractie zijn geactiveerd.

Interacties worden bijgehouden in het paneel Prestaties.

Chromium-bug: 1347390

Een gedetailleerde uitleg van de LCP-timing in het Performance Insights-paneel.

Het paneel 'Prestatie-inzichten' toont nu de tijdsverdeling van de Largest Contentful Paint (LCP) . Gebruik deze tijdsinformatie om inzicht te krijgen in de prestaties van de LCP en mogelijkheden te identificeren om deze te verbeteren.

Een gedetailleerde uitleg van de LCP-timing in het Performance Insights-paneel.

Chromium-bug: 1351735

Genereer automatisch een standaardnaam voor opnames in het paneel 'Opname'.

Het opnamepaneel genereert nu automatisch een naam voor nieuwe opnames.

Standaardnaam voor opnames in het paneel 'Opname'

Chromium-bug: 1351383

Diverse hoogtepunten

  • Voorheen werden Recorder-extensies soms niet weergegeven in het Recorder- paneel. ( 1351416 )
  • Het deelvenster Stijlen toont nu een kleurenkiezer voor de eigenschap stop-color van het SVG <stop> -element. ( 1351096 )
  • Identificeer scripts die lay-outverschuivingen veroorzaken als mogelijke hoofdoorzaken voor lay-outverschuivingen in het paneel Prestatie-inzichten . ( 1343019 )
  • Toon het kritieke pad voor LCP-weblettertypen in het paneel Prestatie-inzichten . ( 1350390 )

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.

Wat is er nieuw in DevTools?

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