Wat is er nieuw in DevTools, Chrome 134

Sofia Emelianova
Sofia Emelianova
GitHub

Privacy- en beveiligingspaneel

Het oude paneel Beveiliging is geëvolueerd naar het paneel Privacy en beveiliging en heeft een nieuwe sectie speciaal voor privacy. In deze sectie kunt u:

  • Zolang DevTools open is, kunt u tijdelijk cookies van derden beperken, met of zonder uitzonderingen, en testen hoe een website zich gedraagt.
  • Zie de tabel met informatie over cookies van derden, inclusief of deze zijn geblokkeerd of vrijgesteld door de tijdelijke limietmodus en welke typen cookies hierdoor beïnvloed kunnen worden.

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

Chromium-probleem: 352364594 .

Verbeteringen aan het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan het Prestatiepaneel .

Gekalibreerde CPU-throttling-presets

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

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

Voor en na het toevoegen van de gasklepkalibratie.

Selecteer verschillende prestatiegebeurtenissen in dezelfde AI-chat

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

Eerste- en derdepartij-highlighting in Prestaties

Het paneel Prestaties heeft een nieuwe tabel op het tabblad Samenvatting , waarmee u onderscheid kunt maken tussen gegevens van eerste partijen, gegevens van derden en extensies.

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

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

Veldgegevens in markertooltips en inzichten

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

Voor en na het toevoegen van veldgegevens aan de markertooltips en het tabblad Inzichten.

Chromium-probleem: 368135130 .

Inzicht in 'geforceerde reflow'

Het tabblad Prestaties > Inzichten krijgt een nieuwe toevoeging aan de set inzichten: Geforceerde reflow . Geforceerde reflow vindt plaats wanneer de rendering-engine de uitvoering van scripts pauzeert om stijl en lay-out te berekenen. Geforceerde reflows kunnen knelpunten vormen die u mogelijk wilt vermijden.

Wanneer u met de muis over het nieuwe inzicht beweegt, worden de bovenste functieaanroep met een geforceerde reflow en de stack trace ervan gemarkeerd en wordt de totale reflowtijd weergegeven.

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

Chromium-probleem: 369766156 .

Inzicht in 'DOM-grootte optimaliseren'

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

Het inzicht benadrukt lange lay-outherhalingen en stijlherberekeningen die werden beïnvloed door een grote DOM-grootte in de prestatietracering 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 ook aangepaste tracks maken in de prestatietracering en aangepaste markeringen vastleggen met console.timeStamp . Dit is een lichter alternatief dat geen items 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-instellingen > Aangepaste tracks weergeven ziet u uw aangepaste track in de trace:

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

Verbeteringen aan het elementenpaneel

Deze versie brengt een aantal verbeteringen aan het Elementenpaneel .

Realtimewaarden van geanimeerde stijlen

Via het tabblad Elementen > Stijlen worden de waarden van geanimeerde stijlen nu in realtime bijgewerkt.

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

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

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

Bovendien ondersteunt het Elementenpaneel nu ook verschillende nieuwe pseudo-elementen: ::checkmark , ::picker-icon en carousel-related ::column , ::scroll-button , ::scroll-marker en ::scroll-marker-group .

Chromium-problemen: 383157184 , 379805728 .

Kopieer alle consoleberichten

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

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

U kunt ook een vergelijkbare kopieeroptie vinden in het contextmenu van Netwerk > Payload aanvragen .

Chromium-problemen: 40206460 , 384967020 .

Byte-eenheden in het geheugenpaneel

In het paneel Geheugen worden nu de groottes weergegeven met de bijbehorende byte-eenheden in plaats van grote aantallen bytes.

Voor en na het weergeven van byte-eenheden.

Chromium-probleem: 388589515 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Prestatie :
    • Aantekeningen : U kunt nu op uw label klikken om het overeenkomstige item te selecteren ( crbug.com/388224764 ).
    • Inzichten : Wanneer u op CLS klikt op het tabblad Inzichten, wordt nu het slechtste cluster geselecteerd in plaats van de slechtste dienst.
  • Negeerlijst : Node-internals die beginnen met node: worden nu standaard genegeerd ( crbug.com/382453615 ).
  • Live-expressies : bug opgelost waardoor live-expressies de $_ opdracht beïnvloedden ( crbug.com/388437265 ).
  • Elementen > Stijlen : Relatieve lengtes hebben nu een pop-up die de absolute waarde weergeeft ( 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 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 wat in de serie Wat is er nieuw in DevTools is behandeld.