Wat is er nieuw in DevTools, Chrome 134

Sofia Emelianova
Sofia Emelianova
GitHub

Privacy- en beveiligingspanel

Het oude beveiligingspaneel is geëvolueerd naar het paneel Privacy en beveiliging en heeft een nieuwe sectie die specifiek aan privacy is gewijd. In deze sectie kunt u:

  • Terwijl DevTools geopend is, kunt u tijdelijk cookies van derden beperken, met of zonder uitzonderingen, en testen hoe een website zich gedraagt.
  • Zie een tabel met informatie over cookies van derden, inclusief of ze zijn geblokkeerd of uitgezonderd door de tijdelijke beperkingsmodus, en welke soorten cookies hierdoor mogelijk worden beïnvloed.

Voor en na het toevoegen van de sectie Privacy aan het beveiligingspaneel.

Chromium-probleem: 352364594 .

Prestatieverbeteringen

Deze versie bevat een aantal verbeteringen aan het prestatiepaneel .

Gekalibreerde CPU-throttling-voorinstellingen

Je kunt nu automatisch kalibreren en twee extra CPU-throttling-presets verkrijgen die de prestaties van mobiele apparaten uit het lagere en middensegment nauwkeuriger benaderen.

In het vervolgkeuzemenu Prestaties > CPU-throttling selecteert u Kalibreren... en vervolgens in Instellingen klikt u op Kalibreren , Doorgaan en wacht u 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 de gasklepkalibratie.

Selecteer verschillende prestatie-evenementen in dezelfde AI-chat.

Met het AI-assistentiepaneel kunt u nu de geselecteerde gebeurtenis in de prestatietrace wijzigen binnen hetzelfde gesprek. Met andere woorden, u hoeft geen nieuw gesprek te starten om over een andere gebeurtenis te praten.

Eerste- en derde partijmarkering in Performance

Het paneel Prestaties krijgt een nieuwe tabel in het tabblad Samenvatting waarmee u onderscheid kunt maken tussen gegevens van de fabrikant zelf, gegevens van derden en extensiegegevens.

Beweeg de muis over de items in de tabel om de relevante gebeurtenissen te zien die in de prestatietrace worden gemarkeerd. Schakel 'Derde partijen dimmen' in om alleen de gegevens van de eerste partij weer te geven.

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

Veldgegevens in markertooltips en inzichten

Als je veldgegevens hebt ingeschakeld , kun je deze nu zien in de tooltips van de meetwaarden en op het tabblad Inzichten .

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

Chromium-probleem: 368135130 .

Inzicht in 'geforceerde hervloeiing'

Het tabblad Prestaties > Inzichten is uitgebreid met een nieuwe optie: Geforceerde herberekening . Een geforceerde herberekening vindt plaats wanneer de rendering-engine de scriptuitvoering pauzeert om de stijl en lay-out te berekenen. Geforceerde herberekeningen kunnen knelpunten vormen die u mogelijk wilt vermijden.

Als je de muis over het nieuwe inzicht beweegt, wordt de belangrijkste functieaanroep met een geforceerde herberekening gemarkeerd, inclusief de stacktrace, en wordt de totale herberekeningstijd weergegeven.

Voor en na het toevoegen van de 'Geforceerde hervloeiing'-inzichtfunctie.

Chromium-probleem: 369766156 .

Inzicht in 'DOM-grootte optimaliseren'

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

Het inzicht brengt langdurige lay-outherberekeningen en stijlherberekeningen aan het licht die werden beïnvloed door een grote DOM-grootte in de prestatietrace en biedt statistieken over het totale aantal elementen, de diepte en de meeste onderliggende elementen.

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

Breid de prestatietrace uit met console.timeStamp

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

Je 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 de opname-instellingen > Aangepaste sporen weergeven ' ziet u uw aangepaste spoor in de trace:

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

Verbeteringen aan het elementenpaneel

Deze versie bevat een aantal verbeteringen aan het Elementenpaneel .

Realtime waarden van geanimeerde stijlen

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

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

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

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

Daarnaast ondersteunt het paneel Elementen nu ook een aantal nieuwe pseudo-elementen: ::checkmark , ::picker-icon en de aan carrousels gerelateerde elementen ::column , ::scroll-button , ::scroll-marker en ::scroll-marker-group .

Chromium-problemen: 383157184 , 379805728 .

Kopieer alle consoleberichten

Je kunt nu alle consoleberichten tegelijk kopiëren door met de rechtermuisknop te klikken.

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

Daarnaast vindt u een vergelijkbare kopieeroptie in het contextmenu van Netwerk > Payload aanvragen .

Chromium-problemen: 40206460 , 384967020 .

Byte-eenheden in het geheugenpaneel

Het geheugenpaneel toont nu groottes met de juiste byte-eenheden in plaats van grote aantallen bytes.

Voor en na het weergeven van byte-eenheden.

Chromium-probleem: 388589515 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Prestatie :
    • Annotaties : U kunt nu op uw label klikken om de bijbehorende vermelding te selecteren ( crbug.com/388224764 ).
    • Inzichten : Als u nu op CLS klikt in het tabblad Inzichten , wordt het slechtste cluster geselecteerd in plaats van de slechtste verschuiving.
  • Negeerlijst : Interne Node-processen die beginnen met node: worden nu standaard genegeerd ( crbug.com/382453615 ).
  • Live-expressies : Bug verholpen die ervoor zorgde dat live-expressies het $_ commando beïnvloedden ( crbug.com/388437265 ).
  • Elementen > Stijlen : Relatieve lengtes hebben nu een pop-upvenster dat de absolute waarde weergeeft ( crbug.com/40778486 ).
  • Toegankelijkheid : Kolomkoppen geven nu aan of ze sorteerbaar zijn.
  • De tabpictogrammen staan ​​nu aan de rechterkant naast de tabnamen in plaats van aan de linkerkant.

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .