Wat is er nieuw in DevTools, Chrome 128

Sofia Emelianova

Console-inzichten van Gemini gaan live in de meeste Europese landen

Deze versie biedt ondersteuning voor Console-inzichten van Gemini naar de meeste Europese landen.

Als u zich in een van die landen bevindt, kunt u Gemini nu vragen om rechtstreeks in de Console inzichten te geven, zodat u fouten en waarschuwingen beter kunt begrijpen.

Updates van het prestatiepaneel

Deze update brengt een aantal verbeteringen aan in het Prestatiepaneel .

Verbeterde netwerktrack

Het netwerkspoor in het prestatiepaneel is verbeterd om kritische informatie vooraf weer te geven, bijvoorbeeld een meer gedetailleerde duur en netwerkinitiatorboom, en om meer duidelijkheid te bieden over de visuele aanwijzingen en kleuren. U hoeft dus niet meer te schakelen tussen het Netwerkpaneel en het tabblad Prestaties > Samenvatting . Als u nog steeds naar het netwerkpaneel moet overschakelen, hebben we het bovendien eenvoudiger en sneller voor u gemaakt.

De netwerktrack doet nu het volgende:

• Toont een kleurenlegenda voor verzoektypen.
• Markeert renderblokkeringsverzoeken met rode driehoekjes in de rechterbovenhoek.
• Toont verzoekinitiator bij selectie met een pijl. Dit helpt u de structuur van netwerkinitiatoren te begrijpen die voorheen alleen beschikbaar was in het paneel Netwerk .
• Bij het zweven toont een herwerkte tooltip nu gestructureerde timinginformatie, inclusief de renderblokkeringsstatus en eventuele wijzigingen in de prioriteit.
• Het tabblad Samenvatting toont nu ook een overzicht van de timings in een kolom aan de rechterkant.

Bovendien kunt u nu met de rechtermuisknop op het verzoek in de track of de URL op het tabblad Samenvatting klikken en 'Onthullen in netwerkpaneel' selecteren in het vervolgkeuzemenu. DevTools brengt u naar het netwerkpaneel en markeert het verzoek waarnaar u op zoek bent in de tabel.

Pas prestatiegegevens aan met de uitbreidbaarheids-API

Deze versie biedt ondersteuning voor extensiegegevens naar het prestatiepaneel . U kunt nu aangepaste tracks met gebeurtenissen en tooltipbeschrijvingen toevoegen aan de prestatietracering, details aan het tabblad Samenvatting en meer . Deze functie kan handig zijn voor ontwikkelaars van frameworks, bibliotheken en complexe applicaties met aangepaste instrumenten.

Bekijk een voorbeeld van een aangepaste track op deze demopagina . Schakel in Prestaties > Vastleggingsinstellingen check_box Extensiegegevens in. Start een uitvoeringsopname, klik op Nieuwe Corgi toevoegen op de demopagina en stop vervolgens de opname. U ziet een aangepaste track in de trace die gebeurtenissen bevat met aangepaste knopinfo en details op het tabblad Samenvatting .

Kortom, als u prestatiegegevens wilt uitbreiden, geeft u een specifieke structuur door aan de parameters measureOption.detail of markOption.detail van API-aanroepen performance.measure() of performance.mark() .

Details in de timingtrack

Als u een webontwikkelaar bent die het gedeelte User Timing van de Performance API gebruikt om items toe te voegen aan de timingtrack , kunt u nu uw willekeurige gegevens zien op het tabblad Samenvatting voor mark en measure gebeurtenissen en hun tijdstempels.

Chroomuitgave: 345418915 .

Kopieer alle vermelde verzoeken in het netwerkpaneel

In plaats van het volledige netwerklogboek te kopiëren, kunt u in het Netwerkpaneel nu filters toepassen en alleen de vermelde verzoeken kopiëren.

Snellere heap-snapshots met benoemde HTML-tags en minder rommel

Heap-snapshots in het paneel Geheugen worden nog sneller, bevatten nu objecten gegroepeerd op benoemde HTML-tags, passen beter bij de semantiek van de JavaScript-taal door minder interne objecten weer te geven en bevatten altijd numerieke waarden.

De prestaties van check_box Numerieke waarden opnemen in de vastleginstelling zijn versneld, standaard ingeschakeld en verwijderd uit het paneel Geheugen .

Om handmatig interne objecten in de snapshot op te nemen, schakelt u eerst Instellingen > Experimenten > check_box Toon optie in om internals in heap snapshots bloot te leggen in en schakelt u vervolgens check_box Expose internals (...) in het paneel Geheugen in.

Chroomafgiften: 41490040 , 343341610 , 42203857 .

Open het paneel Animaties om animaties vast te leggen en @keyframes live te bewerken

Het deelvenster Animaties doet nu het volgende:

• Legt animaties vast die al bezig zijn wanneer u het paneel opent, zodat u de pagina niet hoeft te vernieuwen om animaties vast te leggen.
• Ondersteunt live bewerken van @keyframes . Met andere woorden: de vastgelegde animatie wordt bijgewerkt terwijl u de sectie @keyframes bewerkt in Elementen > Stijlen .

Bekijk beide functies in actie in de volgende video.

Chroomuitgave: 352718055 .

Vuurtoren 12.1.0

Het Lighthouse- paneel draait nu Lighthouse 12.1.0.

Deze update brengt een aantal wijzigingen met zich mee, waaronder het verwijderen van de oude First Meaningful Paint (FMP) -statistiek ten gunste van Largest Contentful Paint (LCP) . 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 .

Toegankelijkheid

Deze versie heeft de volgende toegankelijkheidsverbeteringen:

• Als u na automatische aanvulling in het bewerkingsveld van live-uitdrukkingen op Tab drukt, wordt de focus naar het volgende focuspunt verplaatst. Voorheen liet het de tekst inspringen.
• Als u op een resizer klikt, wordt de focus erop gelegd, zodat u deze kunt verplaatsen met de pijltjestoetsen naar rechts en naar links.
• Een schermlezer kondigt nu het bewerkingsveld voor het toevoegen van controle-expressie aan in Bronnen en het verwijderen van controle-expressie is nu duidelijk zichtbaar bij het navigeren met een toetsenbord.

Chroomuitgaves: 349939551 , 343942719 , 349334243 , 349428374 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

• Prestatie :
  • Netwerktrack : WebSocket-verbindingsgebeurtenissen 331351979 toegevoegd.
  • Het Prestatiepaneel zoomt nu correct in op de drukste hoofdthreadactiviteit 345599356 .
  • Er is een bug opgelost bij het uploaden van verkeerde traceringsbestandstypen. Deze verhindert nu het uploaden van elk type behalve de juiste .json of .gz 349864878 .
• Elementen > Stijlen :
  • De vervolgkeuzelijst Eenheid in lengte-eigenschapswaarden is nu verouderd 41495618 .
  • Probleem opgelost waarbij actieve eigenschappen voor geneste at-regels 346732737 werden opgelost.
  • Inactieve @position-try -secties zijn nu grijs weergegeven 40246493 .
• Sollicitatie :
  • Cookies : een bug opgelost waardoor cookies niet werden vernieuwd als u op Vernieuwen klikte op 348683488 .
  • Lokale opslag : U kunt nu alfabetisch sorteren op sleutel 341129585 .

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.

• Stuur feedback en functieverzoeken naar ons op crbug.com .
• Rapporteer een DevTools-probleem met more_vert Meer opties > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op 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 .