Wat is er nieuw in DevTools, Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

Console Insights van Gemini wordt in de meeste Europese landen gelanceerd.

Deze versie biedt ondersteuning voor console-inzichten van Gemini in de meeste Europese landen.

Lijst van nieuwe Europese landen die steun ontvangen

Oostenrijk, België, Bulgarije, Zwitserland, Cyprus, Tsjechië, Duitsland, Denemarken, Estland, Spanje, Finland, Frankrijk, Verenigd Koninkrijk, 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 inzichten rechtstreeks in de console te verstrekken, zodat u fouten en waarschuwingen beter kunt begrijpen.

Een tip van Gemini voor een foutmelding in de console.

Updates van het prestatiepaneel

Deze update brengt een aantal verbeteringen aan in het prestatiepaneel .

Verbeterd netwerkspoor

Het netwerkoverzicht in het paneel Prestaties is verbeterd om direct belangrijke informatie weer te geven, zoals een gedetailleerdere weergave van de duur en de netwerkinitiatorstructuur, en om de visuele aanwijzingen en kleuren duidelijker te maken. U hoeft dus niet langer te schakelen tussen het paneel Netwerk en het tabblad Prestaties > Samenvatting . Bovendien hebben we het, mocht u toch nog naar het paneel Netwerk moeten overschakelen, gemakkelijker en sneller gemaakt.

Het netwerktraject doet nu het volgende:

  • Toont een kleurenlegenda voor aanvraagtypen.
  • Renderblokkerende verzoeken worden in de rechterbovenhoek gemarkeerd met rode driehoekjes.
  • De initiatiefnemer van het verzoek wordt bij selectie met een pijl weergegeven. Dit helpt u de structuur van netwerkinitiators te begrijpen, die voorheen alleen beschikbaar was in het paneel Netwerk .
  • Bij het hoveren met de muis verschijnt een vernieuwde tooltip met gestructureerde timinginformatie, waaronder de render-blocking status en eventuele wijzigingen in prioriteit.
  • Het tabblad 'Samenvatting ' toont nu ook een uitsplitsing van de tijden in een kolom aan de rechterkant.

De verbeterde netwerktracking met een kleurenlegenda, tooltips, render-blocking-indicatoren en timings in het tabblad Samenvatting.

Daarnaast kunt u nu met de rechtermuisknop op het verzoek in het overzicht of de URL ervan in het tabblad Samenvatting klikken en 'Weergeven in netwerkpaneel' selecteren in het vervolgkeuzemenu. DevTools brengt u dan naar het netwerkpaneel en markeert het verzoek waarnaar u op zoek bent in de tabel.

Het contextmenu voor het verzoek met de optie 'Weergeven in netwerkpaneel'.

Pas prestatiegegevens aan met de uitbreidbare API.

Deze versie biedt ondersteuning voor uitbreidingsgegevens in het paneel Prestaties . U kunt nu aangepaste sporen met gebeurtenissen en tooltipbeschrijvingen toevoegen aan de prestatietrace, details aan het tabblad Samenvatting en meer . Deze functie kan nuttig zijn voor ontwikkelaars van frameworks, bibliotheken en complexe applicaties met aangepaste instrumentatie.

Bekijk een voorbeeld van een aangepaste track op deze demopagina . Ga naar Prestaties > Opname-instellingen en schakel Uitbreidingsgegevens in. Start een prestatieopname, klik op Nieuwe Corgi toevoegen op de demopagina en stop vervolgens de opname. Je ziet een aangepaste track in de trace met gebeurtenissen met aangepaste tooltips en details in het tabblad Samenvatting .

Een aangepaste track in het Performance-paneel.

Kortom, om prestatiegegevens uit te breiden, geeft u een specifieke structuur door aan de parameters measureOption.detail of markOption.detail van de API-aanroepen performance.measure() of performance.mark() .

Details in het tijdschema.

Als webontwikkelaar die het onderdeel Gebruikerstiming van de Performance API gebruikt om gegevens aan het Timings- overzicht toe te voegen, kunt u nu uw willekeurige details voor mark en measure en hun tijdstempels bekijken op het tabblad Samenvatting .

Een aangepaste gebeurtenis in het tijdregistratiesysteem met een tijdstempel en details.

Chromium-probleem: 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 zijn alleen beschikbaar voor de vermelde aanvragen.

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

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

Objecten gegroepeerd op basis van benoemde HTML-tags.

De prestaties van Numerieke waarden in de opname-instellingen opnemen' zijn versneld, standaard ingeschakeld en verwijderd uit het geheugenpaneel .

Om interne objecten handmatig in de snapshot op te nemen, schakelt u eerst de optie 'Optie weergeven om interne objecten in heap-snapshots weer te geven' in Instellingen > Experimenten > vink vervolgens objecten weergeven (...)' in het paneel Geheugen .

Chromium-problemen: 41490040 , 343341610 , 42203857 .

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

Het paneel Animaties doet nu het volgende:

  • Hiermee worden animaties vastgelegd die al bezig zijn wanneer je het paneel opent, zodat je de pagina niet hoeft te vernieuwen om animaties vast te leggen.
  • Ondersteunt live bewerking 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.

Chromium-probleem: 352718055 .

Lighthouse 12.1.0

Het Lighthouse- paneel draait nu op Lighthouse 12.1.0.

Deze update brengt een aantal wijzigingen met zich mee, waaronder de verwijdering van de oude First Meaningful Paint (FMP) -metriek ten gunste van Largest Contentful Paint (LCP) . Bekijk de volledige lijst met wijzigingen .

Om de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools te leren, raadpleegt u Lighthouse: Websitesnelheid optimaliseren .

Chromium-probleem: 772558 .

Toegankelijkheid

Deze versie bevat de volgende verbeteringen op het gebied van toegankelijkheid:

  • Door na automatisch aanvullen in het bewerkingsveld van live-expressies op Tab te drukken, wordt de focus naar het volgende focuspunt verplaatst. Voorheen werd de tekst ingesprongen.
  • Door op een element te klikken dat het formaat wijzigt, wordt het geselecteerd, zodat je het met de pijltjestoetsen naar links en rechts kunt verplaatsen.
  • Een schermlezer kondigt nu het bewerkingsveld 'Watchexpressie toevoegen' in 'Bronnen' aan, en 'Watchexpressie verwijderen' is nu duidelijk zichtbaar bij navigatie met een toetsenbord.

Chromium-problemen: 349939551 , 343942719 , 349334243 , 349428374 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Prestatie :
    • Netwerklogboek : WebSocket-verbindingsgebeurtenissen 331351979 toegevoegd.
    • Het prestatiepaneel zoomt nu correct in op de drukste activiteit van de hoofdthread : 345599356 .
    • Er is een bug verholpen die ervoor zorgde dat bestanden met onjuiste trace-typen niet meer geüpload konden worden. Nu is het uploaden van andere typen dan de correcte .json of .gz bestanden niet meer mogelijk (349864878 ).
  • Elementen > Stijlen :
    • De optie voor het kiezen van een eenheid in de lengte-eigenschapswaarden is nu verouderd (41495618) .
    • Het probleem met het oplossen van actieve eigenschappen voor geneste AT-regels is opgelost (346732737 ).
    • Inactieve @position-try secties zijn nu grijs weergegeven 40246493 .
  • Sollicitatie :
    • Cookies : Er is een bug verholpen waardoor cookies niet werden vernieuwd na een klik op Vernieuwen 348683488 .
    • Lokale opslag : U kunt nu alfabetisch sorteren op sleutels 341129585 .

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .