Wat is er nieuw in DevTools, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Verbeteringen aan het netwerkpaneel

Deze versie bevat een aantal verbeteringen aan het netwerkpaneel .

Netwerkfilters opnieuw uitgevonden

Het netwerkpaneel krijgt nieuwe filters, die opnieuw zijn ontworpen op basis van uw feedback. De typespecifieke filters blijven hetzelfde: een set badges in een overzichtelijke balk met meerdere selectiemogelijkheden.

Om de gebruikersinterface overzichtelijker te maken, zijn selectievakjes voor verbergen, blokkeren en externe partijen verplaatst naar een vervolgkeuzelijst. Deze lijst bevat een getal dat aangeeft hoeveel filters in de vervolgkeuzelijst zijn aangevinkt.

Voor en na het verplaatsen van filters voor verbergen, blokkeren en externe partijen naar een dropdownmenu.

Om het oude filterontwerp terug te krijgen, wis je via Instellingen > Experimenten > Het filterontwerp in het netwerkpaneel is aangepast .

Laat ons weten wat u van het vernieuwde ontwerp vindt .

Chromium-probleem: 362672528 .

Bij HAR-exports worden gevoelige gegevens nu standaard uitgesloten.

Om de kans op onbedoelde lekken van gevoelige informatie te verkleinen, bevat het netwerklogboek dat in HAR-formaat wordt geëxporteerd standaard geen Cookie , Set-Cookie en Authorization headers meer.

Om logbestanden in HAR-formaat met gevoelige gegevens te exporteren, schakelt u de instelling in via Instellingen Voorkeuren > Netwerk > HAR genereren met gevoelige gegevens toestaan' aan . In het netwerkpaneel wordt de knop 'Exporteren' met een pijl. Houd de knop ingedrukt en selecteer 'HAR exporteren (met gevoelige gegevens)' in het vervolgkeuzemenu.

Voor en na het toevoegen van exportopties met en zonder gevoelige gegevens aan de HAR-export.

Chromium-probleem: 361717594 .

Verbeteringen aan het elementenpaneel

Deze versie bevat een aantal verbeteringen aan het Elementenpaneel .

Waarden voor automatisch aanvullen voor text-emphasis-* eigenschappen

De automatische aanvulling in het tabblad Stijlen suggereert nu waarden voor de volgende CSS-eigenschappen:

Voor en na het toevoegen van de autocomplete-optie voor de eigenschappen 'text-emphasis-*'.

Chromium-probleem: 361471205 .

Scrolloverloop gemarkeerd met een badge

Het paneel Elementen markeert nu met een nieuwe 'scroll'-badge de elementen die overlopende inhoud bevatten en overflow: scroll of overflow: auto hebben, zodat je scroll-overloop gemakkelijk kunt herkennen. Net als de andere badges weerspiegelt deze badge de huidige DOM en verdwijnt hij als de inhoud niet langer overloopt, bijvoorbeeld door een wijziging in de grootte.

Voor en na het markeren van scrolloverloop met een badge.

Chromium-probleem: 40670442 .

Kale declaraties na geneste regels worden niet "omhooggeschoven".

Naar aanleiding van het besluit van de CSS Working Group om toe te staan ​​dat kale declaraties na geneste regels komen , worden deze declaraties in het tabblad Stijlen niet langer naar boven verschoven tijdens het parsen.

In het volgende codevoorbeeld zorgt de kale declaratie na de geneste regel er nu voor dat Chrome de stijlen in de cascade niet onverwacht opnieuw rangschikt:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

Voor en na het toestaan ​​dat kale declaraties na geneste regels komen.

Chromium-probleem: 358119261 .

Prestatieverbeteringen

Deze versie bevat een aantal verbeteringen aan het prestatiepaneel .

Aanbevelingen in realtime statistieken

Live metrics kunnen nu metricspecifieke aanbevelingen geven waarmee u uw ontwikkelomgeving zo goed mogelijk kunt afstemmen op de gebruikerservaring.

Om aanbevelingen te krijgen, stelt u het ophalen van veldgegevens uit Chrome UX Report (CrUX) in en vouwt u het gedeelte ' Houd rekening met uw lokale testomstandigheden' uit in elke metrische kaart (indien aanwezig) en 'Houd rekening met echte gebruikersomgevingen' in de omgevingsinstellingen .

Uitgebreide secties met aanbevelingen.

Volg de aanbevelingen om de ervaring van uw gebruikers zo goed mogelijk na te bootsen.

Je kunt nu door de breadcrumbs in de tijdlijn van een performance-opname navigeren: je kunt heen en weer springen tussen breadcrumbs, onderliggende breadcrumbs overschrijven en meerdere onderliggende breadcrumbs verwijderen. Voorheen verdwenen de onderliggende breadcrumbs wanneer je een bovenliggende breadcrumb selecteerde.

verbeteringen aan het geheugenpaneel

Deze versie bevat een aantal verbeteringen aan het geheugenpaneel .

Nieuw profiel voor 'Losstaande elementen'

Het paneel Geheugen krijgt een nieuw profieltype: Losgekoppelde elementen . Dit toont objecten die worden vastgehouden door een JavaScript-referentie.

Voor en na het toevoegen van het profieltype 'Losgekoppelde elementen' aan het geheugenpaneel.

Chromium-probleem: 350519222 .

Verbeterde naamgeving van gewone JavaScript-objecten

Om de categorie Object in heap-snapshots te organiseren en overzichtelijker te maken, worden gewone JavaScript-objecten nu als volgt weergegeven:

  • Genoemd op basis van de eigenschappen die ze bevatten, bijvoorbeeld {firstProperty, secondProperty, ..., *nthProperty} .
  • Doorzoekbaar op basis van deze namen, die door DevTools worden gegenereerd.
  • Ze worden bij elkaar gegroepeerd als ze dezelfde eigenschappen hebben.

Voor en na het organiseren van de objectcategorie in heap-snapshots.

Chromium-probleem: 350519222 .

Schakel dynamische theming uit.

Je kunt nu het automatisch aanpassen van de kleuren van DevTools aan je aangepaste themakleuren in Chrome uitschakelen.

Om dynamische theming uit te schakelen, wis je Instellingen > Voorkeuren > Uiterlijk > > Kleurenschema van Chrome aanpassen en herlaad de ontwikkelaarstools.

Het verschil voor en na het uitschakelen van dynamische theming.

Chromium-probleem: 328472696 .

Chrome-experiment: Procesdeling

Normaal gesproken maakt Chrome, wanneer je meerdere tabbladen van dezelfde website opent (zoals Google Docs ), voor elk tabblad een apart renderproces aan. Het experiment met het delen van processen verandert dit door meerdere tabbladen hetzelfde renderproces te laten delen, wat de prestaties verbetert.

Als je in de infobalk van DevTools de melding "Dit tabblad deelt resources met andere tabbladen..." ziet, behoor je tot de kleine groep waarbij het experiment met het delen van processen is ingeschakeld.

De infobalk 'Dit tabblad deelt resources met andere tabbladen...'.

Het delen van processen kan van invloed zijn op het debuggen met breakpoints en op prestatieanalyses. Zie Chrome-experiment: Procesdeling voor meer informatie.

Vuurtoren 12.2.1

Het Lighthouse- paneel draait nu op Lighthouse 12.2.1.

Deze update introduceert een drempelwaarde < 20 KB voor het negeren van suggesties voor resourcecompressie, zodat u zich alleen kunt concentreren op de zinvolle besparingen in bestandsgrootte. Bekijk de volledige lijst met wijzigingen .

Om de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools te leren, raadpleegt u Lighthouse: Websitesnelheid optimaliseren .

Chromium-probleem: 772558 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Elementen :
    • Meerdere oplossingen voor het bewerken van geneste CSS ( 41486635 , 361477264 , 328263458 , 41487826 ).
    • Opgelost probleem waarbij gedefinieerde maar lege aangepaste eigenschappen als ongedefinieerd werden geparseerd ( 365578428 ).
  • Console : Een niet-geëscapt ampersand in meerregelige strings in cURL-opdrachten is gecorrigeerd ( 352651673 ).
  • Geheugen : De standaardselectie op pagina's met service workers is gecorrigeerd, de hoofdthread is nu geselecteerd ( 40669896 ).
  • Beveiliging : De URL-schemamarkering wordt nu correct bijgewerkt wanneer de beveiligingsfase van een oorsprong verandert ( 359920086 ).

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