Wat is er nieuw in DevTools (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Ondersteuning voor foutopsporing door WebAssembly

DevTools maakt dit mogelijk Instellingen. Instellingen > Experimenten > Selectievakje. WebAssembly-foutopsporing: schakel DWARF-ondersteuning standaard in. Zie Foutopsporing in WebAssembly met moderne tools voor meer informatie.

Met dit experiment kunt u de uitvoering onderbreken en fouten opsporen in C- en C++-code in Wasm-apps, waarbij alle foutopsporingsinformatie voor u beschikbaar is:

  • Uw originele broncode, in kaart gebracht met behulp van DWARF- foutopsporingsinformatie.
  • Begrijpelijke functienamen in call-stack.
  • Ondersteuning voor breekpunten en meer.

Een Wasm-toepassing is gepauzeerd in Debugger.

Om Wasm-foutopsporing te testen, installeert u de C/C++ DevTools Support (DWARF)-extensie en doorloopt u de code in de Mandelbrot-demo .

Chroomuitgave: 1414289 .

Verbeterd stapgedrag in Wasm-apps

Stap over. Stap over in uw originele code, zodat u niet hoeft te pauzeren bij het demonteren ( .wasm bestand). Voorheen stopte het daar.

De stap eindigt echter wanneer deze buiten de functie belandt waarin deze is begonnen, bijvoorbeeld na terugkeer uit de functie.

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

De nieuwe instelling vind je in Voorkeuren en vervolgens in Bronnen.

Chroomuitgave: 1418938 .

Debug automatisch aanvullen met behulp van het paneel Elementen en het tabblad Problemen

Chrome Automatisch invullen vult formulieren automatisch in met opgeslagen informatie, zoals uw adressen of betalingsgegevens. Om ervoor te zorgen dat u gemakkelijk problemen met betrekking tot automatisch aanvullen kunt opsporen, kan het paneel Elementen deze nu markeren met rode, gekrulde onderstrepingen.

Schakel in om deze functie te bekijken Instellingen. Instellingen > Experimenten > Selectievakje. Markeert een inbreukmakend knooppunt of attribuut in de DOM-boom van het Elementenpaneel en inspecteert deze demopagina .

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

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

Chroomuitgave: 1399414 .

Beweringen in Recorder

In het Recorder- paneel kunt u nu direct tijdens de opname beweringen toevoegen, waarbij alle runtimegegevens voor u beschikbaar zijn.

Om een ​​bewering toe te voegen, start u een nieuwe opname, communiceert u met uw pagina en klikt u op Bewering toevoegen . De Recorder voegt een stap in met het waitForElement -type dat u direct kunt aanpassen. Bekijk de video om de beweringen in actie te zien tijdens de koffiekardemonstratie .

In deze video ziet u hoe u kunt beweren:

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

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

Bovendien onthoudt de Recorder nu uw favoriete scriptformaat in de naast elkaar weergegeven codeweergave en het rechtermuisknop-stapmenu.

Chroomuitgave: 1423624 .

Vuurtoren 10.1.1

Het Lighthouse -paneel draait nu Lighthouse 10.1.1, met een opmerkelijke verandering geïntroduceerd in 10.1.0 . Alle audits die met URL's te maken hebben, zijn nu gegroepeerd op entiteit en verzamelen numerieke statistieken zoals grootte of duur. Populaire derde partijen worden ook getagd met hun categorie, zodat het gemakkelijker is om hun doel op de pagina te identificeren.

Gegroepeerde audits per entiteit.

Zie Lighthouse: Websitesnelheid optimaliseren voor meer informatie over de basisprincipes van het gebruik van het Lighthouse -paneel in DevTools.

Chroomuitgave: 772558 .

Prestatieverbeteringen

performance.mark() toont de timing bij het zweven in Prestaties > Timings

De performance.mark() methode toont nu de timing wanneer u over het overeenkomstige teken beweegt in Performance > Timings . De timing hier is een tijdstempel ten opzichte van de vorige navigatiegebeurtenis.

De pop-up met timing in de sectie Timings.

Chroomuitgave: 1426762 .

profile() commando vult Prestaties > Hoofd in

De opdrachten profile() en profileEnd() in de console starten en stoppen nu CPU-profilering in de hoofdthread van het paneel Prestaties .

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

Chroomuitgave: 1429191 .

Waarschuwing voor langzame gebruikersinteracties

Gebruikersinteracties die langer dan 200 milliseconden duren, krijgen een waarschuwing Interaction to Next Paint (INP) op het tabblad Prestaties > Samenvatting .

De INP-waarschuwing.

Bovendien is de ID van de interactie verplaatst van de knopinfo naar Samenvatting .

Chroomuitgaves: 1432512 , 1432509 .

De Web Vitals-track is verplaatst

Het paneel Prestaties heeft de volgende nummers verwijderd:

Zowel de Web Vitals- als de Lange Taken -tracks bevatten informatie die elders werd gedupliceerd. Ze waren ook niet-interactief in vergelijking met hun meer complete alternatieven, die meer gedetailleerde informatie bieden wanneer erop wordt geklikt.

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

Bovendien werd de track Ervaringen hernoemd naar Layout Shifts om het gebruik ervan nauwkeuriger weer te geven.

Meer informatie over Web Vitals .

Beëindiging van JavaScript Profiler: fase drie

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

DevTools versie 114 start fase drie van de vierfasige beëindiging van JavaScript Profiler . Tijdens deze fase wordt het JavaScript Profiler- paneel verwijderd uit DevTools, maar u kunt het nog steeds tijdelijk inschakelen via Instellingen. Instellingen > Experimenten en open het vanuit de Menu met drie stippen. menu met drie stippen.

JavaScript-profiler-selectievakje in Instellingen en vervolgens Experimenten.

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

Chroomuitgave: 1428026 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

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 .