Wat is er nieuw in DevTools, Chrome 130

Sofia Emelianova

Verbeteringen aan het netwerkpaneel

Deze versie brengt een aantal verbeteringen aan het Netwerkpaneel .

Netwerkfilters opnieuw ontworpen

Het Netwerkpaneel krijgt nieuwe filters, die opnieuw zijn ontworpen op basis van jullie feedback. De typespecifieke filters blijven hetzelfde: een set badges in een overzichtelijke multi-selectbalk.

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 onder de vervolgkeuzelijst zijn aangevinkt.

Om het oude filterontwerp terug te zetten, wist u de instellingen Instellingen > Experimenten > check_box_outline_blank Nieuw ontwerp van de filterbalk in het paneel Netwerk .

Laat ons weten wat u van het nieuwe ontwerp vindt .

Chromium-probleem: 362672528 .

HAR-exporten sluiten nu standaard gevoelige gegevens uit

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 logs in HAR-formaat met gevoelige gegevens te exporteren, schakelt u de instellingen Instellingen > Voorkeuren > Netwerk > selectievakje in. Genereren van HAR met gevoelige gegevens toestaan . Het paneel Netwerk markeert de downloadknop Exporteren met een pijl. Klik lang op de knop en selecteer HAR exporteren (met gevoelige gegevens) in het dropdownmenu.

Chromium-probleem: 361717594 .

Verbeteringen aan het elementenpaneel

Deze versie brengt een aantal verbeteringen aan het Elementenpaneel .

Automatisch aanvullen van waarden voor text-emphasis-* eigenschappen

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

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

Chromium-probleem: 361471205 .

Scroll overflows gemarkeerd met een badge

Het Elementenpaneel markeert nu met een nieuwe 'scroll'-badge de elementen die overlopende content bevatten en overflow: scroll of overflow: auto hebben, zodat u scrolloverlopen gemakkelijk kunt herkennen. Net als de andere badges weerspiegelt deze badge de huidige DOM en verdwijnt deze als de content niet meer overloopt, bijvoorbeeld door een wijziging in de grootte.

Chromium-probleem: 40670442 .

Kale declaraties na geneste regels verschuiven niet

Naar aanleiding van de beslissing van de CSS-werkgroep om toe te staan ​​dat kale declaraties na geneste regels komen , worden deze declaraties nu niet meer 'naar boven' verschoven in het tabblad Stijlen tijdens het parseren.

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

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

  background-color: green;
}

Chromium-probleem: 358119261 .

Verbeteringen aan het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan het Prestatiepaneel .

Aanbevelingen in live statistieken

Live statistieken kunnen nu statistiekspecifieke aanbevelingen bieden waarmee u uw ontwikkelomgeving zo goed mogelijk kunt afstemmen op de ervaring van uw gebruikers.

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

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

Navigeren door broodkruimels

Je kunt nu door broodkruimels navigeren in de tijdlijn van een uitvoeringsopname: je kunt heen en weer springen tussen broodkruimels, onderliggende broodkruimels overschrijven en meerdere onderliggende broodkruimels verwijderen. Voorheen verdwenen de onderliggende broodkruimels wanneer je een bovenliggende broodkruimel selecteerde.

Verbeteringen aan het geheugenpaneel

Deze versie brengt een aantal verbeteringen aan het Geheugenpaneel .

Nieuw profiel 'Losse elementen'

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

Chromium-probleem: 350519222 .

Verbeterde naamgeving van eenvoudige JS-objecten

Om de categorie Object in heap-snapshots te organiseren en op te ruimen, zijn gewone JavaScript-objecten nu:

• De namen zijn gebaseerd op de eigenschappen die ze bevatten, bijvoorbeeld {firstProperty, secondProperty, ..., *nthProperty} .
• Zoekbaar op basis van de namen die door DevTools zijn samengesteld.
• Gegroepeerd als ze dezelfde eigenschappen hebben.

Chromium-probleem: 350519222 .

Dynamische thema's uitschakelen

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

Om dynamische thema's uit te schakelen, wist u de instellingen Instellingen > Voorkeuren > Weergave > check_box_outline_blank Pas het Chrome-kleurenschema aan en laadt u DevTools opnieuw.

Chromium-probleem: 328472696 .

Chrome Experiment: Proces delen

Normaal gesproken creëert Chrome voor elk tabblad dat u opent vanaf dezelfde website (zoals Google Documenten ) een apart renderproces. Het experiment ' Proces delen' verandert dit door meerdere tabbladen hetzelfde renderproces te laten delen om de prestaties te verbeteren.

Als u in de infobalk het bericht 'Dit tabblad deelt bronnen met andere tabbladen...' ziet terwijl DevTools geopend is, behoort u tot de kleine groep waarvoor het experiment Proces delen is ingeschakeld.

Het delen van processen kan van invloed zijn op het debuggen van breekpunten en prestatieanalyse. Zie Chrome Experiment: Processen delen voor meer informatie.

Vuurtoren 12.2.1

Het Lighthouse- paneel draait nu Lighthouse 12.2.1.

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

Voor de basisbeginselen van het gebruik van het Lighthouse- paneel in DevTools raadpleegt u Lighthouse: Optimaliseer de snelheid van uw website .

Chromium-probleem: 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 ).
  • Vaste gedefinieerde maar lege aangepaste eigenschappen worden geparseerd als ongedefinieerd ( 365578428 ).
• Console : Een niet-escaped ampersand in meerregelige strings in cURL-opdrachten is opgelost ( 352651673 ).
• Geheugen : De standaardselectie op pagina's met serviceworkers is hersteld, de hoofdthread is nu geselecteerd ( 40669896 ).
• Beveiliging : De markering van het URL-schema wordt nu correct bijgewerkt wanneer de beveiligingsfase van een oorsprong verandert ( 359920086 ).

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.