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 eenvoudige 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 van < 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 .

,

Sofia Emelianova
Sofia Emelianova
GitHub

Verbeteringen van het netwerkpaneel

Deze versie brengt een aantal verbeteringen in het netwerkpaneel .

Netwerkfilters opnieuw bedacht

Het netwerkpaneel krijgt nieuwe filters, opnieuw bedacht op basis van uw feedback. De typespecifieke filters blijven hetzelfde-een set badges in een schone multi-select balk.

Om de selectievakjes van de gebruikersinterface-, verberg-, blok- en derden-gerelateerde selectievakjes te ontruimen onder een vervolgkeuzelijst. De lijst heeft een nummer dat u vertelt hoeveel filters onder de vervolgkeuzelijst worden gecontroleerd.

Voor en na het verplaatsen van huid-, blok- en derden-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 vindt van het opnieuw bedacht ontwerp.

Chromium -probleem: 362672528 .

HAR -exports sluiten nu standaard gevoelige gegevens uit

Om de kansen op accidentele lekken van gevoelige informatie te verminderen, zal het netwerklogboek geëxporteerd in HAR-formaat niet langer Cookie , Set-Cookie en Authorization bevatten.

Om logboeken in HAR -formaat te exporteren met de gevoelige gegevens, schakelt u in instellingen > Voorkeuren > Netwerk > toe om HAR te genereren met gevoelige gegevens . Het netwerkpaneel markeert de -exportknop 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 om HAR te exporteren.

Chromium -probleem: 361717594 .

Elements Panel Verbeteringen

Deze versie brengt een aantal verbeteringen in het elementenpaneel .

Autocomplete waarden voor text-emphasis-* eigenschappen

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

Voor en na het toevoegen van autocomplete optie voor 'tekst-nadelen-*' eigenschappen.

Chromium -probleem: 361471205 .

Scroll overstromen gemarkeerd met een badge

Het elementenpaneel markeert nu met een nieuwe 'scroll' -badge de elementen die overvolle inhoud bevatten en overflow: scroll of overflow: auto , zodat u eenvoudig overloop van de scroll kunt spotten. Net als de andere badges weerspiegelt deze badge de huidige DOM en verdwijnt als de inhoud stopt met overloopt vanwege bijvoorbeeld een grootteverandering.

Voor en na het markeren van scroll -overloop met een badge.

Chromium -probleem: 40670442 .

Kale verklaringen na geneste regels "verschuiven niet"

In navolging van de beslissing van de CSS -werkgroep om kale verklaringen na geneste regels te laten komen , "verschuift het tabblad Styles nu deze verklaringen tijdens het parseren niet.

In het volgende codemonster zorgt de kale verklaring na de geneste regel er nu niet toe dat Chrome de stijlen in de cascade onverwacht opnieuw bestelt:

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

  background-color: green;
}

Voor en na het toestaan ​​van kale verklaringen na geneste regels.

Chroomprobleem: 358119261 .

Prestatiepaneel verbeteringen

Deze versie brengt een aantal verbeteringen in het prestatiepaneel .

Aanbevelingen in live statistieken

Live statistieken kunnen nu metrisch-specifieke aanbevelingen bieden die u helpen uw ontwikkelomgeving zo dicht mogelijk te configureren met wat uw gebruikers ervaren.

Om aanbevelingen te krijgen, stelt u veldgegevens in die ophalen van het Chrome UX -rapport (CRUX) en breidt u de sectie Lokale testomstandigheden in elke metrische kaart (indien aanwezig) uit en overweeg echte gebruikersomgevingen in de omgeving .

Uitgebreide secties met aanbevelingen.

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

U kunt nu broodkruimels navigeren in de tijdlijn van een prestatie -opname: "spring" heen en weer tussen broodkruimels, overschrijven een kindergrenktjes en verwijderen meerdere kinderen. Eerder, wanneer u een ouderbradkruimel selecteerde, zouden de kinderen verdwijnen.

Verbeteringen van het geheugenpaneel

Deze versie brengt een aantal verbeteringen in het geheugenpaneel .

Nieuwe 'vrijstaande elementen' profiel

Het geheugenpaneel krijgt een nieuw profieltype - vrijstaande elementen . Het toont objecten die worden behouden door een JavaScript -referentie.

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

Chroomprobleem: 350519222 .

Verbeterde naamgeving van gewone JS -objecten

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

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

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

Chroomprobleem: 350519222 .

Schakel de dynamische thema uit

U kunt nu de automatische matching van Devtools -kleuren uitschakelen met uw aangepaste themaleuren in Chrome.

Om de dynamische thema uit te schakelen, wist u Instellingen > Voorkeuren > Uiterlijk > Match Chrome kleurenschema en herlaad DevTools.

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

Chromium -probleem: 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 procesverdeling verandert dit door meerdere tabbladen in staat te stellen hetzelfde renderer -proces te 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.

Het 'Dit tabblad deelt bronnen met andere tabbladen ...' Infobar.

Procesuitwisseling kan van invloed zijn op het debuggen van breekpunt en prestatieanalyse. Zie Chrome Experiment: Process Sharing voor meer informatie.

Vuurtoren 12.2.1

Het vuurtorenpaneel draait nu vuurtoren 12.2.1.

Deze update introduceert een < 20 KB negeren de drempel voor resource -compressiesuggesties om u te helpen zich alleen te concentreren op de zinvolle besparingen van de bestandsgrootte. Zie de volledige lijst met wijzigingen .

Zie Lighthouse: optimaliseer de websitesnelheid om de basisprincipes van het gebruik van het vuurtorenpaneel in Devtools te leren om de website van de websites te optimaliseren .

Chromium -probleem: 772558 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Elementen :
  • Console : een niet-geëscapeerde ampersand opgelost in multi-line strings in curl-opdrachten ( 352651673 ).
  • Geheugen : de standaardselectie opgelost op pagina's met servicemedewerkers, nu geselecteerde hoofddraad ( 40669896 ).
  • Beveiliging : het URL -schema dat wordt benadrukt, wordt nu correct bijgewerkt als de beveiligingsfase van een oorsprongsveranderingen ( 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 van alles wat is behandeld in de serie What's New in Devtools .