Wat is er nieuw in DevTools (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Ondersteuning voor het debuggen van WebAssembly

DevTools maakt het mogelijk Instellingen. Instellingen > Experimenten > Selectievakje. Foutopsporing van WebAssembly: DWARF-ondersteuning standaard inschakelen . Zie Foutopsporing van WebAssembly met moderne tools voor meer informatie.

Met dit experiment kunt u de uitvoering pauzeren en C- en C++-code in Wasm-apps debuggen, waarbij alle debuginformatie beschikbaar is:

  • Uw originele broncode, in kaart gebracht met behulp van DWARF -debuginformatie.
  • Duidelijke functienamen in de aanroepstack.
  • Ondersteuning voor breakpoints, en meer.

Een Wasm-applicatie is gepauzeerd in de debugger.

Om Wasm-debugging te testen, installeer je de C/C++ DevTools Support (DWARF)-extensie en doorloop je de code in de Mandelbrot-demo .

Chromium-probleem: 1414289 .

Verbeterd stapsgewijs gedrag in Wasm-apps

Stap opzij. Door nu in je originele code stap voor stap verder te gaan, voorkom je dat de code stopt tijdens het demonteren ( .wasm bestand). Voorheen gebeurde dat wel.

Het doorlopen van de code stopt echter wanneer deze buiten de functie terechtkomt waar hij begon, bijvoorbeeld na het terugkeren uit de functie.

Dit gedrag is standaard ingeschakeld in Instellingen. Instellingen > Voorkeuren > Bronnen .

De nieuwe instelling vind je in Voorkeuren, vervolgens Bronnen.

Chromium-probleem: 1418938 .

Foutopsporing bij automatisch invullen via het paneel Elementen en het tabblad Problemen

Chrome Autofill vult formulieren automatisch in met opgeslagen informatie, zoals je adresgegevens of betaalgegevens. Om problemen met Autofill eenvoudig op te sporen en op te sporen, kun je deze nu in het paneel Elementen markeren met een rode, gekrulde onderstreping.

Om deze functie te bekijken, moet u deze inschakelen. Instellingen. Instellingen > Experimenten > Selectievakje. Markeer een knooppunt of attribuut dat een overtreding begaat in de DOM-structuur van het paneel Elementen en inspecteer deze demopagina .

Problemen met automatisch invullen worden gemarkeerd in het paneel Elementen en gerapporteerd in het paneel Problemen.

Beweeg de muis over een gemarkeerd probleem in de DOM-structuur en klik op 'Probleem bekijken' om het tabblad ' Problemen' te openen. Hier worden alle gedetecteerde problemen weergegeven en worden aanwijzingen gegeven over wat er mis is gegaan.

Chromium-probleem: 1399414 .

Beweringen in Recorder

Met het opnamepaneel kunt u nu direct tijdens de opname beweringen toevoegen, waarbij alle runtimegegevens beschikbaar zijn.

Om een ​​bewering toe te voegen, start je een nieuwe opname, ga je naar je pagina en klik je op 'Bewering toevoegen' . De recorder voegt een stap in met het type waitForElement , die je direct kunt aanpassen. Bekijk de video om beweringen in actie te zien in de demo van de koffiekar .

Deze video laat je zien hoe je een bewering kunt doen:

  • HTML-attributen, bijvoorbeeld class van een element.
  • JavaScript-eigenschappen in JSON, bijvoorbeeld .innerText .

U kunt ook stappen configureren om bijvoorbeeld voorwaardelijke instructies in JavaScript te controleren, het aantal kinderen van een knooppunt ( count ), de zichtbaarheid van elementen en meer. Zie Stappen configureren voor meer informatie.

Bovendien onthoudt de Recorder nu uw voorkeursscriptindeling in de codeweergave naast elkaar en in het rechtermuisklikmenu voor stappen.

Chromium-probleem: 1423624 .

Lighthouse 10.1.1

Het Lighthouse- paneel draait nu op Lighthouse 10.1.1, met een belangrijke wijziging die is doorgevoerd in versie 10.1.0 . Alle audits die betrekking hebben op URL's worden nu gegroepeerd per entiteit en er worden numerieke statistieken zoals grootte of duur samengevoegd. Populaire externe partijen worden ook getagd met hun categorie, waardoor het gemakkelijker is om hun rol op de pagina te identificeren.

Audits gegroepeerd per entiteit.

Om de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools te leren, raadpleegt u Lighthouse: Websitesnelheid optimaliseren .

Chromium-probleem: 772558 .

Prestatieverbeteringen

performance.mark() toont de timing wanneer je met de muis over Performance > Timings beweegt.

De methode performance.mark() toont nu de timing wanneer u de muis over de corresponderende markering in Prestaties > Timings beweegt. De timing is hier een tijdstempel ten opzichte van de vorige navigatiegebeurtenis.

Het pop-upvenster met de tijdsindicatie verschijnt wanneer je met de muis over het gedeelte 'Tijdsindicatie' beweegt.

Chromium-probleem: 1426762 .

Het commando profile() vult Performance > Main in.

De commando's profile() en profileEnd() in de console starten en stoppen nu de CPU-profilering in de hoofdthread van het prestatiepaneel .

Met de opdracht `console()` wordt een profiel aangemaakt in het paneel Prestaties.

Chromium-probleem: 1429191 .

Waarschuwing voor trage gebruikersinteracties

Gebruikersinteracties die langer dan 200 milliseconden duren, krijgen een waarschuwing 'Interactie tot volgende weergave' (INP) in het tabblad Prestaties > Samenvatting .

De INP-waarschuwing.

Bovendien is de ID van de interactie verplaatst van de tooltip naar het overzicht .

Chromium-problemen: 1432512 , 1432509 .

Het Web Vitals-nummer is verplaatst.

Het paneel Prestaties heeft de volgende nummers verwijderd:

  • De Web Vitals -track. Bekijk in plaats daarvan de relevante tijden in de Timings- track wanneer u de muis eroverheen beweegt.
  • De subtrack 'Lange taken' . Dergelijke taken vind je al in de hoofdtrack , gemarkeerd met een rode driehoek .

Zowel de Web Vitals- als de Long Tasks -tracks bevatten informatie die elders al te vinden was. Ze waren bovendien niet interactief in vergelijking met de uitgebreidere alternatieven die, wanneer erop geklikt wordt, gedetailleerdere informatie bieden.

Voor en na het verplaatsen van de Web Vitals naar het Timings-spoor.

Daarnaast is de track 'Experiences' hernoemd naar 'Layout Shifts' om het gebruik ervan beter weer te geven.

Leer meer over Web Vitals .

Uitfasering van JavaScript Profiler: Fase drie

Al in Chrome 58 was het DevTools-team van plan om de JavaScript Profiler uiteindelijk uit te faseren en Node.js- en Deno-ontwikkelaars het Performance- paneel te laten gebruiken voor het profileren van de CPU-prestaties van JavaScript.

DevTools versie 114 markeert de derde fase van de vierfasige uitfasering van de JavaScript Profiler . Tijdens deze fase wordt het JavaScript Profiler- paneel verwijderd uit DevTools, maar u kunt het nog steeds tijdelijk inschakelen via Instellingen. Ga naar Instellingen > Experimenten en open het vanuit de instellingen. Menu met drie puntjes. Menu met drie puntjes.

Schakel het selectievakje voor de JavaScript-profiler in bij Instellingen en vervolgens bij Experimenten.

Gebruik het paneel Prestaties om de CPU-prestaties te profileren.

Chromium-probleem: 1428026 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen in deze release:

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