Wat is er nieuw in DevTools, Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

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.

Lijst met nieuw ondersteunde Europese landen

Oostenrijk, België, Bulgarije, Zwitserland, Cyprus, Tsjechië, Duitsland, Denemarken, Estland, Spanje, Finland, Frankrijk, VK, Griekenland, Kroatië, Hongarije, Ierland, IJsland, Italië, Liechtenstein, Litouwen, Luxemburg, Letland, Malta, Nederland , Noorwegen, Polen, Portugal, Roemenië, Zweden, Slovenië, Slowakije.

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.

Een inzicht van Gemini voor een fout in de console.

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.

De verbeterde netwerktrack met een kleurenlegenda, tooltips, weergaveblokkeringsindicatoren en timings op het tabblad Samenvatting.

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.

Het rechtermuisknopmenu voor het verzoek met de optie 'Onthullen in netwerkpaneel'.

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 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 tracering die gebeurtenissen bevat met aangepaste knopinfo en details op het tabblad Samenvatting .

Een aangepaste track in het paneel Prestaties.

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.

Een aangepaste gebeurtenis in de Timings-track met een tijdstempel en details.

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.

Kopieeropties alleen voor vermelde verzoeken.

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.

Objecten gegroepeerd op benoemde HTML-tags.

De prestaties van 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 > Experimenten > Toon optie in om internals in heap snapshots bloot te leggen in en schakelt u vervolgens 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 paneel 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.

Wat is er nieuw in DevTools

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