Wat is er nieuw in DevTools (Chrome 106)

Jecelyn Yeen

Groepeer bestanden op Auteur/Geïmplementeerd in het Bronnenpaneel

De groepsbestanden op auteur/geïmplementeerd worden nu weergegeven onder het menu met 3 stippen. Voorheen werd dit rechtstreeks in het navigatievenster weergegeven.

Open deze demo . Schakel de instelling Groepeer bestanden op Auteurd/Geïmplementeerd in om eerst uw originele broncode (Authored) te bekijken en er sneller naartoe te navigeren.

Groepeer bestanden op Auteur/Geïmplementeerd

Chromium-bug: 1352488

Verbeterde stapelsporen

Gekoppelde stacktraces voor asynchrone bewerkingen

Wanneer sommige bewerkingen asynchroon moeten plaatsvinden, vertellen de stacktraces in DevTools nu het “volledige verhaal” van de bewerking. Voorheen vertelt het slechts een deel van het verhaal.

Open bijvoorbeeld deze demo en klik op de knop Verhogen. Vouw het foutbericht uit in Console . In onze broncode omvat de bewerking een asynchrone timeout outbewerking.

// application.component.ts

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

Voorheen liet de stacktracering alleen de time-outbewerking zien. Het toonde niet de “oorzaak” van de operatie aan.

Met de laatste wijzigingen laat DevTools nu zien dat de bewerking afkomstig is van de onClick gebeurtenis in de knopcomponent, vervolgens van de increment -functie, gevolgd door de time-outbewerking.

Gekoppelde stacktraces voor asynchrone bewerkingen

Achter de schermen introduceerde DevTools een nieuwe “Async Stack Tagging” -functie. Je kunt het hele verhaal van de operatie vertellen door beide delen van de asynchrone code te koppelen aan de nieuwe console.createTask() -methode. Zie Moderne foutopsporing in DevTools voor meer informatie.

Klinkt het ingewikkeld? Helemaal niet. Meestal zorgt het raamwerk dat u gebruikt voor de planning en asynchrone uitvoering. In dat geval is het aan het framework om de API te gebruiken, jij hoeft je daar geen zorgen over te maken. (bijvoorbeeld Angular heeft deze wijzigingen geïmplementeerd)

Chromium-bug: 1334585

Negeer automatisch bekende scripts van derden

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

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

Voorheen omvatte de stacktracering scripts van derden, zoals zone.js en core.mjs . Dit is niet uw broncode, deze wordt gegenereerd door bundelaars (bijvoorbeeld webpack) of frameworks (bijvoorbeeld Angular). Het duurde langer om de oorzaak 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 bronkaarten. Frameworks en bundelaars moeten deze informatie aanleveren. Zie Casestudy: Beter hoekfoutopsporing met DevTools .

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

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

Chromium-bug: 1323199

Verbeterde call-stack tijdens foutopsporing

Met de instelling Automatisch bekende scripts van derden toevoegen om de lijst te negeren , toont de call-stack nu alleen frames die relevant zijn voor uw code.

Open deze demo en stel een breekpunt in voor de functie increment() in app.component.ts . Klik op de knop Verhogen 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 ).

Als u alle frames wilt bekijken, schakelt u Negeer-lijst-frames weergeven in. Voorheen gaf DevTools standaard alle frames weer.

Verbeterde call-stack tijdens foutopsporing

Chromium-bug: 1352488

Bronnen op de negeerlijst verbergen in het paneel Bronnen

Schakel bronnen op de negeerlijst verbergen in om irrelevante bestanden in het navigatievenster te verbergen. Op deze manier kunt u zich alleen op uw code concentreren.

Open deze demo . In het Bronnenpaneel . De node_modules en webpack zijn scripts van derden. Klik op het menu met drie stippen en selecteer bronnen op de negeerlijst verbergen om ze in het paneel te verbergen.

Bronnen op de negeerlijst verbergen in het paneel Bronnen

Chromium-bug: 1352488

Met de instelling voor het verbergen van bronnen die op de negeerlijst staan , kunt u uw bestand sneller vinden via het Commandomenu . Voorheen leverde het zoeken naar bestanden in het Commandomenu bestanden van derden op die mogelijk niet relevant voor u waren.

Schakel bijvoorbeeld de instelling voor het verbergen van bronnen in de negeerlijst in en klik op het menu met drie stippen. Selecteer Bestand openen . Typ “ton” om naar knopcomponenten te zoeken. Voorheen bevatten de resultaten bestanden van node_modules , waarbij een van de node_modules -bestanden zelfs als eerste resultaat werd weergegeven.

Bestanden op de negeerlijst verbergen in het Commandomenu

Chromium-bug: 1336604

Nieuwe interactietrack in het prestatiepaneel

Gebruik het nieuwe Interacties -spoor in het Prestatiepaneel om interacties te visualiseren en potentiële responsiviteitsproblemen op te sporen.

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

Interacties volgen in het deelvenster Prestaties

Chromium-bug: 1347390

Uitsplitsing van LCP-timing in het paneel Prestatie-inzichten

Het paneel Prestatie-inzichten toont nu de uitsplitsing van de timing van de Largest Contentful Paint (LCP) . Gebruik deze timinginformatie om een ​​kans te begrijpen en te identificeren om de LCP-prestaties te verbeteren.

Uitsplitsing van LCP-timing in het paneel Prestatie-inzichten

Chroombug: 1351735

Genereer automatisch een standaardnaam voor opnamen in het Recorder-paneel

Het Recorder- paneel genereert nu automatisch een naam voor nieuwe opnamen.

Standaardnaam voor opnamen in het Recorderpaneel

Chroombug: 1351383

Diverse hoogtepunten

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

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 .