Wat is er nieuw in DevTools, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Verbeteringen in het netwerkpaneel

Deze versie brengt een aantal verbeteringen aan het Netwerkpaneel .

Netwerkfilters opnieuw ontworpen

Het Netwerkpaneel krijgt nieuwe filters, opnieuw ontworpen op basis van uw feedback. De typespecifieke filters blijven hetzelfde: een set badges in een schone balk met meerdere selecties.

Om de gebruikersinterface overzichtelijker te maken, worden selectievakjes voor verbergen, blokkeren en derden onder een vervolgkeuzelijst geplaatst. De lijst heeft een nummer dat aangeeft hoeveel filters er zijn aangevinkt onder de vervolgkeuzelijst.

Voor en na het verplaatsen van verborgen, blokkerende en derde partij-gerelateerde filters onder een vervolgkeuzelijst.

Om het oude filterontwerp terug te brengen, wist u Instellingen Experimenten > Herontwerp van de filterbalk in het Netwerkpaneel .

Laat ons weten wat u van het vernieuwde ontwerp vindt .

Chroomuitgave: 362672528 .

HAR-exporten sluiten nu standaard gevoelige gegevens uit

Om de kans op het per ongeluk lekken van gevoelige informatie te verkleinen, bevat het netwerklogboek dat in HAR-indeling wordt geëxporteerd standaard niet langer de headers Cookie , Set-Cookie en Authorization .

Als u logboeken in HAR-indeling met de gevoelige gegevens wilt exporteren, schakelt u > Voorkeuren > Netwerk > Toestaan ​​om HAR te genereren met gevoelige gegevens in . Het netwerkpaneel markeert de knop Exporteren met een pijl. Klik lang op de knop en selecteer HAR exporteren (met gevoelige gegevens) in het vervolgkeuzemenu.

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

Chroomuitgave: 361717594 .

Verbeteringen in het paneel Elementen

Deze versie brengt een aantal verbeteringen aan het Elementenpaneel .

Waarden voor automatisch aanvullen voor de eigenschappen text-emphasis-*

Automatisch aanvullen op het tabblad Stijlen suggereert nu waarden voor de volgende CSS-eigenschappen:

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

Chroomuitgave: 361471205 .

Scroll-overflows 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 , zodat u scroll-overflows gemakkelijk kunt herkennen. Net als de andere badges weerspiegelt deze badge de huidige DOM en verdwijnt als de content niet meer overloopt door bijvoorbeeld een maatverandering.

Voor en na het markeren loopt de scroll over met een badge.

Chroomuitgave: 40670442 .

Kale declaraties nadat geneste regels niet "omhoog schuiven"

Na het besluit van de CSS Working Group om kale declaraties na geneste regels toe te staan , schuift het tabblad Stijlen deze declaraties nu niet "omhoog" tijdens het parseren.

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

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.

Chroomuitgave: 358119261 .

Verbeteringen in het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan in het Prestatiepaneel .

Aanbevelingen in live statistieken

Live-statistieken kunnen nu statistiekspecifieke aanbevelingen bieden waarmee u uw ontwikkelomgeving zo dicht mogelijk bij de ervaring van uw gebruikers kunt configureren.

Om aanbevelingen te krijgen, stelt u het ophalen van veldgegevens in vanuit Chrome UX Report (CrUX) en vouwt u de sectie Overweeg uw lokale testomstandigheden uit op elke metrische kaart (indien aanwezig) en Overweeg echte gebruikersomgevingen in de Omgevingsinstellingen .

Uitgebreide secties met aanbevelingen.

Volg de aanbevelingen om de ervaring van uw gebruikers te benaderen.

U kunt nu door broodkruimels navigeren in de tijdlijn van een opname van een optreden: "spring" heen en weer tussen broodkruimels, overschrijf een onderliggende broodkruimel en verwijder meerdere onderliggende broodkruimels. Als u voorheen een bovenliggende broodkruimel selecteerde, verdwenen de onderliggende broodkruimels.

Verbeteringen in het geheugenpaneel

Deze versie brengt een aantal verbeteringen aan het geheugenpaneel .

Nieuw profiel 'Vrijstaande elementen'

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

Voor en na het toevoegen van het profieltype 'Vrijstaande elementen' aan het paneel Geheugen.

Chroomuitgave: 350519222 .

Verbeterde naamgeving van gewone JS-objecten

Om de Object in heap-snapshots te ordenen en overzichtelijker te maken, zijn er nu gewone JavaScript-objecten:

  • Genoemd op basis van de eigenschappen die ze bevatten, bijvoorbeeld {firstProperty, secondProperty, ..., *nthProperty} .
  • Doorzoekbaar op deze namen die zijn samengesteld door DevTools.
  • Samen gegroepeerd als ze dezelfde eigenschappen hebben.

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

Chroomuitgave: 350519222 .

Schakel dynamische thema's uit

U kunt nu het automatisch matchen van DevTools-kleuren met uw aangepaste themakleuren in Chrome uitschakelen.

Als u dynamische thema's wilt uitschakelen, wist u Instellingen Voorkeuren > Uiterlijk > Match Chrome-kleurenschema en laadt u DevTools opnieuw.

Het voor en na het uitschakelen van dynamische thema's.

Chroomuitgave: 328472696 .

Chrome-experiment: proces delen

Wanneer u meerdere tabbladen van dezelfde website (zoals Google Docs ) opent, maakt Chrome normaal gesproken voor elk tabblad een afzonderlijk weergaveproces. Het experiment voor het delen van processen verandert dit door meerdere tabbladen hetzelfde rendererproces te laten delen om de prestaties te verbeteren.

Als u een bericht ziet met de melding "Dit tabblad deelt bronnen met andere tabbladen..." terwijl DevTools geopend is, maakt u deel uit van de kleine groep waarvoor het experiment Proces delen is ingeschakeld.

De informatiebalk 'Dit tabblad deelt bronnen met andere tabbladen...'.

Het delen van processen kan van invloed zijn op het opsporen van fouten in breekpunten en de prestatieanalyse. Zie Chrome-experiment: proces delen voor meer informatie.

Vuurtoren 12.2.1

Het Lighthouse- paneel draait nu Lighthouse 12.2.1.

Deze update introduceert een negeerdrempel < 20 KB voor suggesties voor broncompressie, zodat u zich alleen kunt concentreren op de betekenisvolle besparingen op de bestandsgrootte. Bekijk de volledige lijst met wijzigingen .

Zie Lighthouse: Websitesnelheid optimaliseren voor meer informatie over de basisprincipes van het gebruik van het Lighthouse -paneel in DevTools.

Chroomuitgave: 772558 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Elementen :
    • Meerdere oplossingen voor het bewerken van geneste CSS ( 41486635 , 361477264 , 328263458 , 41487826 ).
    • Een probleem opgelost waarbij aangepaste eigenschappen met een lege waarde werden geparseerd als ongedefinieerd ( 365578428 ).
  • Console : probleem met een ampersand zonder escapetekens in tekenreeksen met meerdere regels in cURL-opdrachten ( 352651673 ).
  • Geheugen : de standaardselectie op pagina's met servicemedewerkers opgelost, de hoofdthread is nu geselecteerd ( 40669896 ).
  • Beveiliging : het gemarkeerde URL-schema wordt nu correct bijgewerkt naarmate de beveiligingsfase van een oorsprong verandert ( 359920086 ).

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 .