Deze pagina is vertaald door de Cloud Translation API.

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.

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 belangrijke informatie vooraf weer te geven, zodat u niet hoeft te schakelen tussen het netwerkpaneel en het tabblad Prestaties > Samenvatting , en om meer duidelijkheid te bieden over de visuele aanwijzingen en kleuren. 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.
Markeringen geven blokkerende verzoeken weer met rode driehoekjes in de rechterbovenhoek en tonen de verzoekinitiator bij selectie met een pijl.
Bij het zweven toont een herwerkte tooltip nu gestructureerde timinginformatie, inclusief wijzigingen in prioriteit en eventuele weergaveblokkering.
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.

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 .

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 User Timing-gedeelte van de Performance API gebruikt om items toe te voegen aan de Timings- track, kunt u nu uw willekeurige gegevens zien op het tabblad Samenvatting voor mark en measure van 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 JavaScript-taal door minder interne objecten weer te geven en bevatten altijd numerieke waarden.

Objecten gegroepeerd op benoemde HTML-tags.

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 deelvenster 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) -metriek 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 het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

Stuur ons een suggestie of feedback via crbug.com .
Rapporteer een DevTools-probleem met behulp van de opties Meer > Help > Rapporteer een DevTools-probleem in DevTools.
Tweet op @ChromeDevTools .
Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .