Wat is er nieuw in DevTools, Chrome 129

Sofia Emelianova
Sofia Emelianova

Recorder ondersteunt exporteren naar Puppeteer voor Firefox.

Als onderdeel van de WebDriver BiDi- ondersteuning kan het opnamepaneel nu opnames exporteren naar Puppeteer voor Firefox. Dankzij de Firefox-ondersteuning van Puppeteer kunt u nu gebruikersstromen opnemen met het opnamepaneel van Chrome DevTools, exporteren en uitvoeren op zowel Firefox als Chrome.

De situatie vóór en na het toevoegen van de optie 'Puppeteer for Firefox' aan het exportmenu van de Recorder.

Voor meer informatie, zie WebDriver BiDi - De toekomst van cross-browser automatisering .

Prestatieverbeteringen

Deze versie bevat een aantal verbeteringen aan het prestatiepaneel .

Live-statistiekenobservaties

Het paneel Prestaties toont nu live observaties van Core Web Vitals , zowel op uw lokale machine als op basis van veldgegevens uit Chrome UX Report . Hierdoor kunt u prestatieproblemen opsporen zonder prestatiegegevens vast te hoeven leggen en inzicht krijgen in hoe representatief uw ervaring is voor die van uw gebruikers.

Om live observaties van LCP en CLS te bekijken, opent u het paneel Prestaties . Om INP te bekijken, voert u een interactie uit op een pagina. Om uw lokale statistieken te vergelijken met de geaggregeerde gebruikerservaring van het Chrome UX-rapport, voegt u veldgegevens toe: klik in het gedeelte Veldgegevens aan de rechterkant op Instellen en klik in het dialoogvenster op OK . Beweeg de muis over een metrische waarde om een ​​tooltip met meer informatie te bekijken.

Live-observaties van statistieken in het prestatiepaneel.

Het prestatiepaneel toont statistieken die verbeterd kunnen worden en biedt inzichten en suggesties om uw lokale ervaring af te stemmen op die van uw gebruikers. U kunt bijvoorbeeld de CPU of het netwerk beperken, wat u op hetzelfde scherm kunt doen in het gedeelte 'Opname-instellingen' aan de rechterkant.

Het zoekvak in het paneel Prestaties werkt nu ook voor het netwerkspoor , zodat u verzoeken kunt vinden met de sneltoets Ctrl / Cmd + F.

Een netwerkverzoek gevonden tijdens het zoeken.

Bekijk de stacktraces van performance.mark en performance.measure .

In het tabblad Samenvatting toont het paneel Prestaties nu stacktraces van de aanroepen performance.mark en performance.measure . U kunt deze aanroepen gebruiken om de prestatietrace uit te breiden met uw eigen gegevens.

De stacktraces voor en na de aanroepen van performance.mark en performance.measure worden weergegeven.

Zie voor meer informatie ' Uw prestatiegegevens aanpassen met de Extensibility API' .

Gebruik testadresgegevens in het paneel 'Automatisch invullen'.

Het paneel voor automatisch invullen biedt nu testgegevens voor adresformulieren. Dit maakt het eenvoudiger om de adresformulieren op uw website te testen wanneer u geen adressen in Chrome hebt opgeslagen of wanneer u een gastprofiel gebruikt.

Om adresformulieren automatisch in te vullen met testgegevens, opent u het paneel 'Automatisch invullen ', schakelt u Testadressen weergeven in het menu voor automatisch invullen' in, klikt u met de rechtermuisknop op een adresformulier op uw pagina en selecteert u een van de opties in het menu 'Ontwikkelaarstools' .

De situatie vóór en na het toevoegen van de optie 'Automatisch invullen van testgegevens' aan het keuzemenu van een adresveld in een formulier.

Verbeteringen aan het elementenpaneel

Deze versie bevat een aantal verbeteringen aan het Elementen- paneel.

Dwing meer staten af ​​voor specifieke elementen

In het gedeelte :hov onder Elementen > Stijlen vind je nu meer pseudo-klassen die je kunt inschakelen. De nieuwe opties vind je onder het dropdownmenu ' Specifieke elementstatus forceren' en zijn specifiek voor bepaalde elementen die je selecteert. Zo hebben <label> en <input> bijvoorbeeld verschillende opties.

De situatie vóór en na het toevoegen van de mogelijkheid om specifieke elementtoestanden af ​​te dwingen.

Chromium-probleem: 40280012 .

Elementen > Stijlen vult nu automatisch meer rastereigenschappen aan.

Het tabblad Elementen > Stijlen biedt nu opties voor automatisch aanvullen wanneer u rastergebied- en lijnnamen bewerkt.

Het verschil vóór en na het toevoegen van de automatische aanvulopties bij het bewerken van rasterlijnnamen.

Zie voor meer informatie 'CSS-rasterindelingen inspecteren' en met name het gedeelte ' Regelnamen weergeven' .

Lighthouse 12.2.0

Het Lighthouse- paneel draait nu op Lighthouse 12.2.0.

Deze update bevat een aantal bugfixes. 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 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Elementen :
    • Een bug met onjuiste weergave van overbelaste lengte-eigenschappen is verholpen (357020613) .
    • position-try-options is hernoemd naar position-try-fallbacks volgens de specificatie .
    • Een paginaverversing herstelt nu het geselecteerde knooppunt, zelfs binnen een iframe 40719145 .
    • Toegankelijkheid : Schermlezers zullen nu de knop 'Element weergeven' 357382536 aankondigen.
  • Prestaties > Netwerk : De menuoptie ' Weergeven in netwerk' opent nu het tabblad 'Headers' van het betreffende netwerkverzoek.
  • Console :
    • Fouten van C/C++-extensies openen nu niet langer geforceerd de Console 356320158 .
    • Er is een bug verholpen waarbij import.meta in een JS-module niet werd geëvalueerd wanneer de module gepauzeerd was (40743793) .
  • Geheugen : Er is een bug verholpen waarbij de optie 'Genegeerde retainers herstellen' niet werd weergegeven nadat een retainer was genegeerd (327337527) .

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' .