Wat is er nieuw in DevTools, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Nieuw paneel voor automatisch aanvullen

Deze versie brengt het nieuwe paneel Automatisch aanvullen naar DevTools. Chrome Automatisch aanvullen biedt een handige manier om automatisch formulieren in te vullen op websites met opgeslagen adressen. Met het nieuwe paneel Automatisch aanvullen kunt u de koppeling tussen uw formuliervelden, voorspelde waarden voor automatisch aanvullen en opgeslagen gegevens inspecteren.

Probeer het nieuwe paneel op deze demopagina met testgegevens:

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

Het venster Automatisch aanvullen wordt automatisch geopend en toont de gedetecteerde formuliervelden, velden die door automatisch aanvullen zijn afgeleid en opgeslagen waarden.

Het paneel Automatisch aanvullen.

Zie Formulieren leren en Automatisch aanvullen voor meer informatie.

Verbeterde netwerkbeperking voor WebRTC

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

De nieuwe parameters zijn: Pakketverlies (percentage), Pakketwachtrijlengte (aantal pakketten) en de Pakketherschikkingsvlag .

De voor en na het toevoegen van nieuwe pakketgerelateerde opties aan aangepaste beperkingsprofielen.

Om een ​​WebRTC-verbinding af te remmen, geeft u de pakketgerelateerde parameters op in een aangepast profiel in Instellingen > Beperking en selecteert u dit in het paneel Netwerk .

Probeer de nieuwe parameters op deze demopagina . Geef eerst de pagina toestemming om de camera te gebruiken. Selecteer vervolgens in het netwerkpaneel het aangepaste profiel dat u hebt geconfigureerd en klik, terug op de pagina, op Starten en bellen .

Chroomuitgave: 41175925 .

Ondersteuning voor scrollgestuurde animaties in het deelvenster Animaties

In het deelvenster Animaties kunt u nu scrollgestuurde animaties bekijken.

Probeer deze functie op deze demopagina . Open het deelvenster Animaties en laad de pagina opnieuw om scrollgestuurde animaties vast te leggen.

Een groep scrollgestuurde animaties gemarkeerd met een muispictogram.

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

Verbeterde ondersteuning voor CSS-nesten in Elementen > Stijlen

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

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

Chroomuitgave: 40166888 .

Verbeterd prestatiepaneel

Deze versie brengt verschillende verbeteringen aan in het Prestatiepaneel .

Verberg functies en hun kinderen in de vlammengrafiek

Om de ruis uit de vlammengrafiek in Prestatie > Hoofd te filteren, kunt u nu irrelevante functies en hun kinderen verbergen. Klik in het vlammendiagram 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 kinderen kunt verbergen.

Functies met verborgen kinderen hebben aan de rechterkant een dropdown- knop . Beweeg erover om het aantal verborgen kinderen te zien en klik erop om ze opnieuw te tonen. Om terug te keren naar de oorspronkelijke status van het vlammendiagram, klikt u met de rechtermuisknop op een functie en selecteert u Trace opnieuw instellen .

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

Als je voorheen een evenement selecteerde op de hoofdtrack , toonde de track een pijl van de initiator naar de geselecteerde gebeurtenis . Nu toont de track ook een pijl van de geselecteerde gebeurtenis naar de gebeurtenis die deze heeft geïnitieerd, indien aanwezig.

De voor en na tonen pijlen van geselecteerde naar geïnitieerde gebeurtenissen en benoemde links in plaats van Reveal.

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

Chroomuitgaves: 325604258 , 325024819 , 326055289 .

Vuurtoren 11.6.0

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

Een van de opmerkelijke veranderingen is de nieuwe opt-in Enable JS sampling- instelling. Deze instelling is standaard uitgeschakeld.

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

Als u JS-sampling inschakelt, worden gedetailleerde JavaScript-aanroepstapels toegevoegd aan de prestatietracering, maar kan het genereren van rapporten worden vertraagd.

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

De tracering is beschikbaar onder het menu Tools > Unthrottled Trace bekijken nadat het Lighthouse -rapport is gegenereerd.

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

Chroomuitgave: 772558 .

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

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

De voor en na tonen een beschrijvende tooltip voor speciale groepen objecten.

Chroomuitgave: 41490331 .

Applicatie > Opslagupdates

Deze versie brengt een aantal updates voor Applicatie > 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 laten zien hoeveel bytes worden gebruikt voor gedeelde opslag.

Met gedeelde opslag heeft u onbeperkte schrijftoegang op meerdere locaties, met leestoegang die de privacy behoudt.

Chroomuitgave: 324464353 .

Web SQL is volledig verouderd

Chrome heeft Web SQL in versie 119 beëindigd en de proefperiodetoken in deze versie verwijderd, zodat u Web SQL niet langer kunt gebruiken.

In navolging hiervan heeft DevTools de Web SQL- sectie uit het toepassingspaneel verwijderd.

Chroomuitgave: 327254049 .

Verbeteringen in het dekkingspaneel

Deze versie brengt een aantal updates voor het dekkingspaneel :

  • 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 bij elkaar opgeteld.

Het voor en na correct berekenen van de matching-kinderstatistieken.

  • De kleur van de gebruikte code is nu grijs in plaats van groen om de zichtbaarheid te verbeteren, vooral bij gebrek aan kleurzicht zonder groen.

Het voor en na het veranderen van de kleur van de gebruikte code naar grijs.

Chroomuitgave: 41494198 , 329253687 .

Het deelvenster Lagen is mogelijk verouderd

Het deelvenster Lagen wordt mogelijk binnenkort beëindigd vanwege weinig gebruik. Het paneel toont nu bovenaan een waarschuwingsbanner.

De waarschuwingsbanner die de mogelijke beëindiging aankondigt, bovenaan het deelvenster Lagen.

Voel je vrij om je gedachten en zorgen te delen voordat het team de definitieve beslissing neemt om het panel te beëindigen.

Beëindiging van JavaScript Profiler: fase vier, definitief

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

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

Chroomuitgave: 40262073 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Netwerk :
    • Een bug opgelost bij het onjuist parseren van cookies met meerdere regels ( 325410304 ).
    • Vast voorbeeld van de call-stack in de kolom Initiator ( 327665602 ).
  • Prestatiemonitor : de selectievakjes voor bijhouden 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 ).
  • Prestaties : Alle overeenkomende zoekresultaten worden nu gemarkeerd bij het zoeken met Ctrl / Cmd + F ( 1523279 ).
  • Bronnen voor ontwikkelaars : toont nu ook bronnen die zijn geladen via taalextensies, zoals de Chrome-extensie C/C++ DevTools Support (DWARF) ( 40746829 ).
  • Prestaties : Bijgesneden oproepstapel en de slechte lay-out ervan op het tabblad Samenvatting ( 325314708 ) opgelost.
  • Lade : Sluitknoppen zijn nu focusseerbaar, zodat panelen kunnen worden gesloten met behulp van het toetsenbord.

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 .