Wat is er nieuw in DevTools, Chrome 130

Sofia Emelianova

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.

Om het oude filterontwerp terug te brengen, wist u Instellingen > Experimenten > check_box_outline_blank 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 Instellingen > Voorkeuren > Netwerk > check_box Toestaan ​​om HAR te genereren met gevoelige gegevens in . Het netwerkpaneel markeert de knop Downloaden Exporteren met een pijl. Klik lang op de knop en selecteer HAR exporteren (met gevoelige gegevens) in het vervolgkeuzemenu.

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:

• steno text-emphasis
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

Chroomuitgave: 361471205 .

Scroll-overflows gemarkeerd met een badge

Het paneel Elementen markeert nu elementen die overlopende inhoud bevatten en overflow: scroll met een nieuwe 'scroll'-badge, zodat je 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.

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;
}

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 .

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

Navigeer door broodkruimels

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

Nieuw profiel 'Vrijstaande elementen'

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

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.

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 > check_box_outline_blank Match Chrome-kleurenschema en laadt u DevTools opnieuw.

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 het bericht 'Dit tabblad deelt bronnen met andere tabbladen...' ziet terwijl DevTools geopend is, maakt u deel uit van de kleine groep waarvoor het experiment Proces delen is ingeschakeld.

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 het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

• Stuur ons een suggestie of feedback via crbug.com .
• Rapporteer een DevTools-probleem met behulp van de opties Meer > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .