Wat is er nieuw in DevTools (Chrome 106)

Jecelyn Yeen

Groepeer bestanden op Auteur/Geïmplementeerd in het Bronnenpaneel

De groep bestanden op Auteur/Geïmplementeerd wordt nu weergegeven onder het menu met drie puntjes. Voorheen werd dit direct in het navigatievenster weergegeven.

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

Chromium-bug: 1352488

Verbeterde stack traces

Gekoppelde stacktraceringen voor asynchrone bewerkingen

Wanneer bepaalde bewerkingen asynchroon gepland zijn, vertellen de stacktraces in DevTools nu het "volledige verhaal" van de bewerking. Voorheen vertelden ze slechts een deel van het verhaal.

Open bijvoorbeeld deze demo en klik op de knop 'Verhogen'. Vouw de foutmelding in Console uit. In onze broncode bevat de bewerking een asynchrone timeout outbewerking.

// application.component.ts

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

Voorheen toonde de stacktrace alleen de time-outbewerking, niet de "hoofdoorzaak" van de bewerking.

Met de laatste wijzigingen geeft DevTools nu aan dat de bewerking afkomstig is van de onClick -gebeurtenis in het knopcomponent, vervolgens de increment functie en ten slotte de time-outbewerking.

Achter de schermen introduceerde DevTools een nieuwe functie voor "Async Stack Tagging". Je kunt het hele verhaal van de bewerking vertellen door beide delen van de async-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. (Angular heeft bijvoorbeeld deze wijzigingen doorgevoerd)

Chromium-bug: 1334585

Negeer automatisch bekende scripts van derden

Identificeer problemen in uw 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 'Increment'. Vouw de foutmelding in Console uit. 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 broncode, maar wordt gegenereerd door bundlers (bijv. webpack) of frameworks (bijv. Angular). Het duurde langer om de hoofdoorzaak van een fout te achterhalen.

Achter de schermen negeert DevTools scripts van derden op basis van de nieuwe eigenschap x_google_ignoreList in bronkaarten. Frameworks en bundelaars moeten deze informatie verstrekken. Zie casestudy: Beter Angular debuggen met DevTools .

Als u er de voorkeur aan geeft om altijd de volledige stack traces te bekijken, kunt u de instelling uitschakelen via Instellingen > Negeerlijst > Automatisch bekende scripts van derden toevoegen aan negeerlijst .

Chromium-bug: 1323199

Verbeterde call stack tijdens het debuggen

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

Open deze demo en stel een breekpunt in bij de increment() -functie in app.component.ts . Klik op de knop 'increment' op de pagina om het breekpunt te activeren. De call stack toont alleen frames uit uw code (bijvoorbeeld app.component.ts en button.component.ts ).

Om alle frames te bekijken, schakelt u 'Frames die niet in de negeerlijst staan' in . Voorheen gaf DevTools standaard alle frames weer.

Chromium-bug: 1352488

Het verbergen van bronnen die op de negeerlijst staan in het paneel Bronnen

Schakel 'Verberg bronnen die niet in de negeerlijst staan' in om irrelevante bestanden in het navigatievenster te verbergen. Zo kunt u zich concentreren op uw code.

Open deze demo . In het paneel Bronnen . node_modules en webpack zijn de scripts van derden. Klik op het menu met de drie puntjes en selecteer 'Verberg bronnen die in de negeerlijst staan' om ze in het paneel te verbergen.

Chromium-bug: 1352488

Bestanden die op de negeerlijst staan, verbergen in het opdrachtmenu

Met de instelling 'Geïdentificeerde bronnen verbergen' kunt u uw bestand sneller vinden via het menu 'Opdracht' . Voorheen leverde het zoeken naar bestanden via het menu 'Opdracht' bestanden van derden op die mogelijk niet relevant voor u waren.

Schakel bijvoorbeeld de instelling 'Bronnen die niet in de negeerlijst staan' in en klik op het menu met de drie puntjes. Selecteer 'Bestand openen '. Typ 'ton' om te zoeken naar knopcomponenten. Voorheen bevatten de resultaten bestanden van node_modules ; een van de node_modules bestanden werd zelfs als eerste resultaat weergegeven.

Chromium-bug: 1336604

Nieuw interactiespoor in het paneel Prestaties

Gebruik het nieuwe Interacties -spoor in het Prestatiepaneel om interacties te visualiseren en mogelijke problemen met de responsiviteit op te sporen.

Start bijvoorbeeld een performance-opname op deze demopagina . Klik op een kopje koffie en stop de opname. Er worden twee interacties weergegeven in de Interactietrack . Beide interacties hebben dezelfde ID's, wat aangeeft dat de interacties door dezelfde gebruikersinteractie worden geactiveerd.

Chromium-bug: 1347390

Overzicht van LCP-timings in het paneel Prestatie-inzichten

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

Chromium-bug: 1351735

Genereer automatisch een standaardnaam voor opnamen in het Recorder-paneel

Het paneel Recorder genereert nu automatisch een naam voor nieuwe opnames.

Chromium-bug: 1351383

Diverse hoogtepunten

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

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