Wat is er nieuw in DevTools, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Nieuw paneel Automatisch invullen

Deze versie introduceert het nieuwe paneel Automatisch invullen in DevTools. Chrome Automatisch invullen biedt een handige manier om formulieren op websites met opgeslagen adressen automatisch in te vullen. Met het nieuwe paneel Automatisch invullen kunt u de koppeling tussen uw formuliervelden, voorspelde waarden voor automatisch invullen 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 en ga terug naar de pagina met het formulier.
  2. Open DevTools en activeer een automatisch ingevulde 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 het automatisch invullen zijn afgeleid en opgeslagen waarden.

Het paneel Automatisch invullen.

Zie Formulieren en Automatisch invullen leren voor meer informatie.

Verbeterde netwerkbeperking voor WebRTC

Dankzij de toevoeging van pakketgerelateerde parameters aan aangepaste netwerkbeperkingsprofielen kunt u uw WebRTC -applicaties nu rechtstreeks in DevTools beperken. Dit is handig om uw realtime communicatie-implementatie te testen, zonder dat u hiervoor software van derden hoeft te gebruiken.

De nieuwe parameters zijn: pakketverlies (percentage), pakketwachtrijlengte (aantal pakketten) en het Pakketherordeningsvlag .

Voor en na het toevoegen van nieuwe pakketgerelateerde opties aan aangepaste bandbreedteprofielen.

Om een ​​WebRTC-verbinding te beperken, geeft u de pakketgerelateerde parameters op in een aangepast profiel in Instellingen Beperkingen en selecteert u dit in het deelvenster Netwerk .

Probeer de nieuwe parameters op deze demopagina . Laat de pagina eerst de camera gebruiken. Selecteer vervolgens in het deelvenster Netwerk het aangepaste profiel dat u hebt geconfigureerd en klik, terug op de pagina, op Starten en bellen .

Chromium-probleem: 41175925 .

Ondersteuning voor scroll-gestuurde animaties in het Animaties-paneel

Via het paneel Animaties kunt u nu scroll-aangedreven animaties bekijken.

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

Een groep scroll-aangedreven animaties, gemarkeerd met een muispictogram.

Een animatiegroep, gemarkeerd met een , verschijnt in het Overzicht . U kunt deze nu inspecteren . De groep toont pixelwaarden in plaats van milliseconden in de Tijdlijn .

Verbeterde CSS-nestondersteuning in Elementen > Stijlen

Het tabblad Elementen > Stijlen verbetert de ondersteuning voor CSS-nesting en toont nu geneste stijlen met inspringing en tussen accolades. CSS-nesting is een manier om CSS-regels te groeperen en zaken minder omslachtig en meer gestructureerd te maken.

Voor en na het toevoegen van inspringing en het omsluiten van geneste stijlen tussen accolades.

Chromium-probleem: 40166888 .

Verbeterde prestatiepaneel

Deze versie brengt diverse verbeteringen aan het Prestatiepaneel .

Verberg functies en hun kinderen in het vlamdiagram

Om de ruis uit het vlamdiagram te filteren in Prestaties > Hoofdmenu , kunt u nu irrelevante functies en hun onderliggende functies verbergen. Klik in het vlamdiagram met de rechtermuisknop op een functie en kies een optie in het contextmenu.

Voor en na het toevoegen van een contextmenu waarmee u functies en hun onderliggende functies kunt verbergen.

Functies met verborgen onderliggende elementen hebben een omlaag-dropdown- knop aan de rechterkant. Beweeg de muis erover om het aantal verborgen onderliggende elementen te bekijken en klik erop om ze weer te tonen. Om terug te keren naar de begintoestand van de vlamgrafiek, klikt u met de rechtermuisknop op een functie en selecteert u Trace resetten .

Pijlen van geselecteerde initiatiefnemers naar evenementen die zij hebben geïnitieerd

Voorheen, wanneer u een gebeurtenis in het hoofdspoor selecteerde, toonde het spoor een pijl van de initiator naar de geselecteerde gebeurtenis . Nu toont het spoor ook een pijl van de geselecteerde gebeurtenis naar de gebeurtenis die het initieerde, indien van toepassing.

De voor- en na-weergave toont pijlen van geselecteerde naar geïnitieerde gebeurtenissen en benoemde koppelingen in plaats van Onthullen.

Bovendien hebben alle initiators nu Initiator voor velden in het tabblad Samenvatting en hebben zowel Initiator voor als Geïnitieerd door velden benoemde koppelingen in plaats van Onthullen .

Chromium-problemen: 325604258 , 325024819 , 326055289 .

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

Als u JS-sampling inschakelt, worden gedetailleerde JavaScript-aanroepstacks aan de prestatietracering toegevoegd, maar dit kan de rapportgeneratie vertragen.

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

De trace is beschikbaar via het menu Extra > Trace zonder beperkingen weergeven nadat het Lighthouse -rapport is gegenereerd.

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

Chromium-probleem: 772558 .

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

Heapsnapshots in het paneel Geheugen bevatten speciale groepen objecten die niet op constructors gebaseerd zijn. Wanneer u met de muis over dergelijke objecten beweegt, toont het paneel Geheugen nu een tooltip met een korte beschrijving en een link naar een langere beschrijving in de documentatie.

Voor en na met een beschrijvende tooltip voor speciale groepen objecten.

Chromium-probleem: 41490331 .

Toepassing > Opslagupdates

Deze versie bevat een aantal updates voor Toepassing > Opslag .

Bytes gebruikt voor gedeelde opslag

In het gedeelte Toepassing > Opslag > Gedeelde opslag ziet u nu het aantal bytes dat door een oorsprong wordt gebruikt.

De voor- en na-afbeeldingen laten zien hoeveel bytes er worden gebruikt voor gedeelde opslag.

Met gedeelde opslag hebt u onbeperkte schrijftoegang tot alle sites, met privacybeschermende leestoegang.

Chromium-probleem: 324464353 .

Web SQL is volledig verouderd

Chrome heeft Web SQL in versie 119 afgeschaft en de verouderingsproeftoken in deze versie verwijderd. U kunt Web SQL dus niet meer gebruiken.

DevTools volgde dit voorbeeld en verwijderde de Web SQL- sectie uit het paneel Toepassing .

Chromium-probleem: 327254049 .

Verbeteringen aan het dekkingspaneel

Deze versie bevat een aantal updates voor het Dekking -paneel:

  • De statusbalk berekent nu correct de gebruiksstatistieken voor gefilterde URL's. Voorheen werden in plaats van de gebruiksgegevens van kinderen die aan het filter voldeden, de gegevens van hun ouders opgeteld.

Voor en na het correct berekenen van de statistieken voor de bijpassende kinderen.

  • De kleur van de gebruikte code is nu grijs in plaats van groen om de zichtbaarheid te verbeteren, vooral bij mensen met een kleurenblindheid die geen groen bevat.

Voor en na het veranderen 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 niet meer gebruikt vanwege het lage gebruik. Het paneel toont nu een waarschuwingsbanner bovenaan.

De waarschuwingsbanner bovenaan het deelvenster Lagen die de mogelijke veroudering aankondigt.

U bent vrij om uw gedachten en zorgen te delen voordat het team de definitieve beslissing neemt om het paneel af te keuren.

JavaScript Profiler-deprecation: Fase vier, definitief

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

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

Chromium-probleem: 40262073 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Netwerk :
    • Er is een bug opgelost met het onjuist parsen van cookies met meerdere regels ( 325410304 ).
    • Preview van de call stack in de Initiator- kolom hersteld ( 327665602 ).
  • Prestatiemonitor : de selectievakjes voor het bijhouden van gegevens zijn nu hetzelfde als in de rest van de gebruikersinterface ( 1467464 ).
  • Bronnen : Syntaxisaccentuering 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 zijn geladen via taalextensies, zoals de C/C++ DevTools Support (DWARF) Chrome-extensie ( 40746829 ).
  • Prestaties : De bijgesneden call stack en de slechte lay-out ervan op het tabblad Samenvatting zijn hersteld ( 325314708 ).
  • Lade : Sluitknoppen hebben nu de focus, zodat panelen gesloten kunnen worden met behulp van het toetsenbord.

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.

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.