Wat is er nieuw in DevTools, Chrome 134

Sofia Emelianova

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.

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 .

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 het account_tree -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 .

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.

Chromium-probleem: 369766156 .

Inzicht in 'DOM-grootte optimaliseren'

Een ander nieuw inzicht is Optimaliseer de DOM-grootte . Een grote DOM-boom 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.

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 in de prestatietracering maken 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 > selectievakje Aangepaste tracks weergeven , ziet u uw aangepaste track in de trace:

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

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.

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.

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.

• Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
• Meld een DevTools-probleem met more_vert Meer opties > Help > Meld een DevTools-probleem in DevTools.
• Tweet naar @ChromeDevTools .
• Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .

Wat is er nieuw in DevTools

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