Wat is er nieuw in DevTools, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Nieuw paneel voor automatisch invullen

Deze versie introduceert het nieuwe Autofill- paneel in DevTools. Chrome Autofill biedt een handige manier om formulieren op websites automatisch in te vullen met opgeslagen adressen. Met het nieuwe Autofill- paneel kunt u de koppeling tussen uw formuliervelden, voorspelde autofill-waarden en opgeslagen gegevens bekijken.

Probeer het nieuwe paneel op deze demopagina met testgegevens:

  1. Klik in Profiel automatisch invullen op een van de knoppen ' Formulier invullen...' , klik op 'Verzenden' en klik vervolgens in het dialoogvenster 'Adres opslaan?' op 'Opslaan '. Ga daarna terug naar de pagina met het formulier.
  2. Open DevTools en activeer een autofill-gebeurtenis: selecteer een formulierveld en kies het adres uit de vervolgkeuzelijst.

Het paneel 'Automatisch invullen' wordt automatisch geopend en toont de gedetecteerde formuliervelden, de velden die door de automatische invulling zijn afgeleid en de opgeslagen waarden.

Het paneel voor automatisch aanvullen.

Voor meer informatie, zie Formulieren en automatisch invullen leren.

Verbeterde netwerkbeperking voor WebRTC

Met de recente toevoeging van pakketgerelateerde parameters aan aangepaste netwerkthrottlingprofielen kunt u uw WebRTC- applicaties nu rechtstreeks in DevTools beperken. Dit is handig om uw implementatie van realtime communicatie te testen, zonder dat u software van derden nodig hebt.

De nieuwe parameters zijn: Pakketverlies (percentage), Pakketwachtrijlengte (aantal pakketten) en het Pakketherordening .

De situatie vóór en na het toevoegen van nieuwe pakketgerelateerde opties aan aangepaste throttlingprofielen.

Om een ​​WebRTC-verbinding te beperken, specificeert u de pakketgerelateerde parameters in een aangepast profiel in onder Instellingen > Beperking en selecteert u dit profiel in het netwerkpaneel .

Probeer de nieuwe parameters op deze demopagina . Sta eerst toe dat de pagina de camera gebruikt. Selecteer vervolgens in het paneel Netwerk het aangepaste profiel dat u hebt geconfigureerd en klik op Start en Bellen op de pagina.

Chromium-probleem: 41175925 .

Scroll-gestuurde animaties worden ondersteund in het paneel Animaties.

In het paneel Animaties kunt u nu scroll-gestuurde animaties inspecteren.

Probeer deze functie uit op deze demopagina . Open het paneel Animaties en vernieuw de pagina om scroll-gestuurde animaties vast te leggen.

Een groep scroll-gestuurde animaties, gemarkeerd met een muisicoon.

In het overzicht verschijnt een animatiegroep, gemarkeerd met een . Je kunt deze nu inspecteren . De groep toont pixelwaarden in plaats van milliseconden in de tijdlijn .

Verbeterde ondersteuning voor geneste CSS in Elementen > Stijlen

Het tabblad Elementen > Stijlen biedt verbeterde ondersteuning voor geneste CSS-stijlen en toont nu geneste stijlen met inspringing en tussen accolades. Geneste CSS-stijlen groeperen is een manier om CSS-regels overzichtelijker en gestructureerder te maken.

Het verschil voor en na het toevoegen van inspringingen en het omsluiten van geneste stijlen met accolades.

Chromium-probleem: 40166888 .

Verbeterd prestatiepaneel

Deze versie bevat diverse verbeteringen aan het prestatiepaneel .

Verberg functies en hun subfuncties in het vlamdiagram.

Om ruis uit het flame chart in Performance > Main te filteren, kunt u nu irrelevante functies en hun subfuncties verbergen. Klik in het flame chart met de rechtermuisknop op een functie en kies een optie in het contextmenu.

De situatie vóór en na het toevoegen van een contextmenu waarmee je functies en hun subfuncties kunt verbergen.

Functies met verborgen subfuncties hebben een pijltje naar beneden ) rechts ervan. Beweeg de muis eroverheen om het aantal verborgen subfuncties te zien en klik erop om ze weer zichtbaar te maken. Om terug te keren naar de beginstand van het vlamdiagram, klikt u met de rechtermuisknop op een functie en selecteert u 'Reset trace' .

Pijlen van geselecteerde initiatiefnemers naar de gebeurtenissen die zij hebben geïnitieerd.

Voorheen toonde het hoofdoverzicht een pijl van de initiator naar de geselecteerde gebeurtenis wanneer je een gebeurtenis in het hoofdoverzicht selecteerde. Nu toont het overzicht ook een pijl van de geselecteerde gebeurtenis naar de gebeurtenis die deze heeft geïnitieerd, indien aanwezig.

De voor- en na-afbeeldingen tonen pijlen van geselecteerde naar gestarte gebeurtenissen en benoemde links in plaats van 'Onthul'.

Bovendien hebben alle initiatiefnemers nu velden met de naam 'Initiator voor' in het tabblad 'Samenvatting' en hebben zowel de velden 'Initiator voor' als 'Geïnitieerd door' benoemde links in plaats van 'Onthullen' .

Chromium-problemen: 325604258 , 325024819 , 326055289 .

Lighthouse 11.6.0

Het Lighthouse- paneel draait nu op Lighthouse 11.6.0. Bekijk de volledige lijst met wijzigingen .

Een van de opvallende wijzigingen is de nieuwe opt-in -instelling 'JS-sampling inschakelen '. Deze instelling is standaard uitgeschakeld.

Voor en na het toevoegen van een opt-in JS-samplinginstelling.

Door JS-sampling in te schakelen worden gedetailleerde JavaScript-aanroepstacks aan de prestatietrace toegevoegd, maar dit kan de rapportgeneratie vertragen.

Prestatiegrafiek zonder (links) en met (rechts) JS-sampling.

De trace is beschikbaar onder het menu 'Tools' > ' trace bekijken' nadat het Lighthouse- rapport is gegenereerd.

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

Chromium-probleem: 772558 .

Tooltips voor speciale categorieën in Geheugen > Heap-snapshots

In het geheugenpaneel worden heap-snapshots weergegeven met speciale groepen objecten die niet op constructors zijn gebaseerd. Wanneer u de muis over dergelijke objecten beweegt, toont het geheugenpaneel nu een tooltip met een korte beschrijving en een link naar een uitgebreidere beschrijving in de documentatie.

De afbeelding voor en na toont een beschrijvende tooltip voor specifieke groepen objecten.

Chromium-probleem: 41490331 .

Applicatie > Opslagupdates

Deze versie bevat een aantal updates voor Toepassing > Opslag .

Bytes gebruikt voor gedeelde opslag

In het gedeelte Toepassing > Opslag > Gedeelde opslag wordt nu het aantal bytes weergegeven dat door een bron wordt gebruikt.

De afbeelding voor en na laat zien hoeveel bytes er worden gebruikt voor gedeelde opslag.

Gedeelde opslag biedt onbeperkte schrijftoegang tot opslag op verschillende locaties, met privacyvriendelijke leestoegang.

Chromium-probleem: 324464353 .

WebSQL is volledig verouderd.

Chrome heeft Web SQL in versie 119 afgeschaft en het bijbehorende proeftoken verwijderd, waardoor Web SQL niet langer beschikbaar is.

Vervolgens verwijderde DevTools de sectie Web SQL uit het toepassingspaneel .

Chromium-probleem: 327254049 .

Verbeteringen in het dekkingspaneel

Deze versie bevat een aantal updates voor het dekkingspaneel :

  • De statusbalk berekent nu correct de gebruiksstatistieken voor gefilterde URL's. Voorheen telde de statusbalk niet de gebruiksgegevens van de subpagina's die aan het filter voldeden, maar die van de bovenliggende pagina.

De statistieken voor en na de correcte berekening van de overeenkomende kinderen.

  • De gebruikte code is nu grijs in plaats van groen om de zichtbaarheid te verbeteren, met name voor mensen met een kleurenblindheid die geen groen kunnen zien.

De situatie vóór en na het wijzigen van de kleur van de gebruikte code naar grijs.

Chromium-probleem: 41494198 , 329253687 .

Het paneel Lagen is mogelijk verouderd.

Het paneel 'Lagen ' wordt mogelijk binnenkort uitgefaseerd vanwege het geringe gebruik ervan. Het paneel toont nu een waarschuwingsbanner bovenaan.

De waarschuwingsbanner bovenaan het paneel 'Lagen' kondigt de mogelijke uitfasering aan.

U kunt uw gedachten en zorgen gerust delen voordat het team de definitieve beslissing neemt om het paneel uit te faseren.

Uitfasering van JavaScript Profiler: Fase vier, definitief

In deze versie is het JS Profiler- paneel volledig afgeschaft en kan het niet meer opnieuw worden ingeschakeld.

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

Chromium-probleem: 40262073 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Netwerk :
    • Een bug met betrekking tot de onjuiste verwerking van cookies met meerdere regels is verholpen ( 325410304 ).
    • De weergave van de aanroepstack in de kolom 'Initiator' is gecorrigeerd ( 327665602 ).
  • Prestatiemonitor : De selectievakjes voor het volgen van gegevens zijn nu hetzelfde als in de rest van de gebruikersinterface ( 1467464 ).
  • Bronnen : Syntaxmarkering toegevoegd voor XHTML-documenten ( 327940244 ).
  • Instellingen > Apparaten : De oude Galaxy Fold is vervangen door de nieuwere Galaxy Z Fold 5 ( 40113439 ).
  • Prestatie : Alle overeenkomende zoekresultaten worden nu gemarkeerd bij het zoeken met Ctrl / Cmd + F ( 1523279 ).
  • Ontwikkelaarsbronnen : Toont nu ook bronnen die geladen zijn via taalextensies, zoals de Chrome-extensie C/C++ DevTools Support (DWARF) ( 40746829 ).
  • Prestatie : Opgelost: de afgesneden aanroepstack en de slechte lay-out ervan in het tabblad Samenvatting ( 325314708 ).
  • Lade : Sluitknoppen zijn nu selecteerbaar, zodat panelen met het toetsenbord kunnen worden gesloten.

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