Deze pagina is vertaald door de Cloud Translation API.

Wat is er nieuw in DevTools (Chrome 114)

Sofia Emelianova

Jecelyn Yeen

Ondersteuning voor WebAssembly-foutopsporing

DevTools maakt het mogelijk Instellingen > Experimenten > WebAssembly-foutopsporing: Schakel DWARF-ondersteuning standaard in. Zie WebAssembly debuggen met moderne tools voor meer informatie.

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

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

Een Wasm-applicatie is gepauzeerd in de Debugger.

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

Chromium-probleem: 1414289 .

Verbeterd stapgedrag in Wasm-apps

Door nu over te stappen in je originele code wordt pauzeren tijdens het disassembleren ( .wasm bestand) vermeden. Voorheen werd daar gepauzeerd.

Het stappen eindigt echter wanneer het buiten de functie belandt waar het begon, bijvoorbeeld na terugkeer van die functie.

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

De nieuwe instelling vindt u onder Voorkeuren en vervolgens onder Bronnen.

Chromium-probleem: 1418938 .

Autofill debuggen met behulp van het paneel Elementen en het tabblad Problemen

Chrome Autofill vult formulieren automatisch in met opgeslagen informatie, zoals uw adressen of betalingsgegevens. Om u te helpen problemen met Autofill eenvoudig op te lossen, kan het Elementenpaneel deze nu markeren met rode, gekrulde onderstrepingen.

Om deze functie te bekijken, schakelt u het volgende in: Instellingen > Experimenten > Markeert een knooppunt of kenmerk in de DOM-boom van het Elementen-paneel en inspecteert deze demopagina .

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

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

Chromium-probleem: 1399414 .

Beweringen in Recorder

Met het paneel Recorder kunt u nu direct tijdens het opnemen beweringen toevoegen, waarbij alle runtime-gegevens voor u beschikbaar zijn.

Om een bewering toe te voegen, start u een nieuwe opname, werkt 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 beweringen in actie te zien in de demo van de koffiekar .

In deze video ziet u hoe u het volgende kunt beweren:

HTML-kenmerken, bijvoorbeeld de class van een element.
JavaScript-eigenschappen in JSON, bijvoorbeeld .innerText .

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

Bovendien onthoudt de Recorder nu uw voorkeursscriptformaat in de codeweergave naast elkaar en het menu met rechtsklikstappen.

Chromium-probleem: 1423624 .

Vuurtoren 10.1.1

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

Gegroepeerde audits per entiteit.

Voor de basisbeginselen van het gebruik van het Lighthouse- paneel in DevTools raadpleegt u Lighthouse: Optimaliseer de snelheid van uw website .

Chromium-probleem: 772558 .

Prestatieverbeteringen

`performance.mark()` toont timing bij hover in Prestaties > Timing

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

Pop-up met timing bij zweven in het gedeelte Timing.

Chromium-probleem: 1426762 .

De opdracht `profile()` vult Prestaties > Hoofd

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 in het paneel Prestaties gemaakt.

Chromium-probleem: 1429191 .

Waarschuwing voor trage gebruikersinteracties

Bij gebruikersinteracties die langer dan 200 milliseconden duren, verschijnt er een Interaction to Next Paint (INP) -waarschuwing op het tabblad Prestaties > Samenvatting .

De INP-waarschuwing.

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

Chromium-problemen: 1432512 , 1432509 .

Het Web Vitals-spoor is verplaatst

Het paneel Prestaties heeft de volgende tracks verwijderd:

De Web Vitals -track. Bekijk in plaats daarvan de relevante timings in de Timings- track bij het bewegen van de muis.
Het subspoor Lange Taken . Je vindt dergelijke taken al in het hoofdspoor , rood gearceerd en met een rode driehoek .

Zowel de Web Vitals- als de Long Tasks -tracks bevatten informatie die elders ook al 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 het Timings-spoor.

Bovendien is de naam van het Experiences -spoor gewijzigd in Layout Shifts , zodat het beter aansluit bij het gebruik ervan.

Meer informatie over Web Vitals .

JavaScript Profiler-deprecation: 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 de CPU-prestaties van JavaScript.

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

Selecteer het selectievakje JavaScript-profiler in Instellingen en vervolgens in Experimenten.

Gebruik het paneel Prestaties om een profiel van de CPU-prestaties te maken.

Chromium-probleem: 1428026 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

De kleurenkiezer detecteert nu HWB-waarden die buiten het kleurbereik vallen wanneer ze worden bijgesneden ( 1429271 ).
Het paneel Bronnen :
- JSON-syntaxisaccentuering ingeschakeld voor bronkaarten ( 1385374 ).
- De berichten 'Bronkaart gedetecteerd' worden niet meer weergegeven wanneer u handmatig bronkaarten uitschakelt ( 1423718 ).
Met de console kunt u nu onvolledige JavaScript-expressies evalueren met Ctrl + Enter en worden syntaxisfouten weergegeven ( 1314700 ).
Het dialoogvenster Breakpoint-bewerking heeft nu een sluitknop. Voorheen moest u op Enter drukken of de focus van het dialoogvenster verwijderen ( 1412980 ).

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