Wat is er nieuw in DevTools, Chrome 134

Sofia Emelianova
Sofia Emelianova
GitHub

Privacy- en beveiligingspaneel

Het oude Beveiligingspaneel is geëvolueerd naar het Privacy- en beveiligingspaneel en krijgt een nieuw privacygedeelte. In dit gedeelte kunt u:

  • Terwijl DevTools open is, kunt u cookies van derden tijdelijk beperken, met of zonder uitzonderingen, en testen hoe een website zich gedraagt.
  • Bekijk een tabel met informatie over cookies van derden, inclusief of deze zijn geblokkeerd of vrijgesteld door de tijdelijke limietmodus, en welk type cookies mogelijk wordt beïnvloed.

Voor en na het toevoegen van de sectie Privacy aan het paneel Beveiliging.

Chroomuitgave: 352364594 .

Verbeteringen in het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan in het Prestatiepaneel .

Gekalibreerde CPU-throttling-presets

U kunt nu automatisch kalibreren en twee extra CPU-throttling-presets krijgen die de mobiele apparaten uit het lagere en middensegment nauwkeuriger benaderen.

Selecteer in het vervolgkeuzemenu Prestaties > CPU-beperking de optie Kalibreren... en klik vervolgens in Instellingen op Kalibreren , Doorgaan en wacht tot DevTools de vertragingspercentages voor uw apparaat heeft berekend. U vindt de gekalibreerde throttling-opties terug in het vervolgkeuzemenu Prestaties > CPU-throttling .

Voor en na het toevoegen van throttling-kalibratie.

Selecteer verschillende prestatie-evenementen in dezelfde AI-chat

Met het AI- assistentiepaneel kunt u nu de geselecteerde gebeurtenis in de prestatietracering in dezelfde chat wijzigen. Met andere woorden, u hoeft geen nieuwe chat te starten om over een andere gebeurtenis te praten.

Markering van eerste en derde partijen in Prestaties

Het Prestatiepaneel krijgt een nieuwe tabel op het tabblad Samenvatting waarmee u onderscheid kunt maken tussen gegevens van eigen leveranciers, van derden en van extensies.

Beweeg de muis over de vermeldingen in de tabel om de relevante gebeurtenissen gemarkeerd in de prestatietracering te zien. Vink Dim 3rd Parties aan om alleen te focussen op de first-party data.

Klik bovendien op pictogram naast een gemarkeerd item in de tabel om naar het tabblad Bottom-up te gaan, gegroepeerd op derden.

Veldgegevens in tooltips en inzichten voor markers

Als u veldgegevens heeft ingeschakeld , kunt u deze nu zien in de tooltips voor metrische markeringen en op het tabblad Inzichten .

Voor en na het toevoegen van gearchiveerde gegevens aan de markeringstooltips en het tabblad Inzichten.

Chroomuitgave: 368135130 .

Inzicht in 'geforceerde reflow'

Het tabblad Prestaties > Inzichten krijgt een nieuwe toevoeging aan de reeks inzichten: Geforceerde reflow . Geforceerd opnieuw plaatsen vindt plaats wanneer de rendering-engine de uitvoering van het script pauzeert om de stijl en lay-out te berekenen. Geforceerde terugboekingen kunnen knelpunten zijn die u wellicht wilt vermijden.

Terwijl u over het nieuwe inzicht beweegt, wordt de bovenste functieaanroep gemarkeerd met een geforceerde reflow, de bijbehorende stacktrace, en wordt de totale reflow-tijd weergegeven.

Voor en na het toevoegen van het inzicht 'Geforceerde reflow'.

Chroomuitgave: 369766156 .

Inzicht in 'Optimaliseer DOM-grootte'

Een ander nieuw inzicht is het optimaliseren van de DOM-grootte . Een grote DOM-structuur kan de prestaties van uw pagina vertragen.

Het inzicht belicht lange lay-outherschikkingen en stijlherberekeningen die werden beïnvloed door een grote DOM-grootte in het prestatietracé en biedt statistieken over het totale aantal elementen, de diepte en de meeste onderliggende elementen.

Voor en na het toevoegen van het inzicht 'DOM-grootte optimaliseren'.

Breid de prestatietracering uit met console.timeStamp

De Extensibility API ondersteunt nu console.timeStamp . Naast performance.measure en performance.mark kunt u nu aangepaste tracks maken in de prestatietracering en aangepaste markeringen vastleggen met behulp van console.timeStamp , als lichter alternatief dat geen vermeldingen toevoegt aan de interne prestatietijdlijn van de browser, maar deze alleen weergeeft in de prestatietracering.

U kunt bijvoorbeeld de volgende syntaxis gebruiken:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

Met Capture settings > Show custom tracks ziet u uw aangepaste track in de trace:

Voor en na het toevoegen van console.timeStamp-ondersteuning.

Verbeteringen in het paneel Elementen

Deze versie brengt een aantal verbeteringen aan het Elementenpaneel .

Realtime waarden van geanimeerde stijlen

Het tabblad Elementen > Stijlen werkt nu de waarden van geanimeerde stijlen in realtime bij.

Ondersteuning voor :open pseudo-klasse en diverse pseudo-elementen

Het paneel Elementen ondersteunt nu de :open pseudo-klasse in de sectie Styles > :hov > Forceer specifieke elementstatus voor bepaalde HTML-elementen zoals <details> , <select> , <dialog> en <input> .

Voor en na het toevoegen van de optie ':open'.

Bovendien ondersteunt het paneel Elementen nu ook verschillende nieuwe pseudo-elementen: ::checkmark , ::picker-icon , en carrouselgerelateerde ::column , ::scroll-button , ::scroll-marker en ::scroll-marker-group .

Chroomnummers: 383157184 , 379805728 .

Kopieer alle consoleberichten

U kunt nu met de rechtermuisknop klikken en alle consoleberichten in één keer kopiëren.

Voor en na het toevoegen van de optie 'Console kopiëren'.

Bovendien kunt u een vergelijkbare kopieeroptie vinden in het contextmenu van Netwerk > Payload aanvragen .

Chroomuitgaves: 40206460 , 384967020 .

Byte-eenheden in het paneel Geheugen

Het paneel Geheugen toont nu formaten met de juiste byte-eenheden in plaats van grote aantallen bytes.

Voor en na het tonen van byte-eenheden.

Chroomuitgave: 388589515 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Prestatie :
    • Annotaties : U kunt nu op uw label klikken om het overeenkomstige item te selecteren ( crbug.com/388224764 ).
    • Inzichten : als u op CLS op het tabblad Inzichten klikt, wordt nu het slechtste cluster geselecteerd in plaats van de slechtste verschuiving.
  • Lijst negeren : interne knooppunten die beginnen met node: worden nu standaard genegeerd ( crbug.com/382453615 ).
  • Live-expressies : bug opgelost die ervoor zorgde dat live-expressie de opdracht $_ beïnvloedde ( crbug.com/388437265 ).
  • Elementen > Stijlen : Relatieve lengtes hebben nu een popover die de absolute waarde toont ( crbug.com/40778486 ).
  • Toegankelijkheid : kolomkoppen geven nu aan of ze sorteerbaar zijn.
  • Tabbladpictogrammen staan ​​nu aan de rechterkant naast de tabbladnamen in plaats van aan de linkerkant.

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 .