Wat is er nieuw in DevTools, Chrome 129

Sofia Emelianova
Sofia Emelianova

Recorder ondersteunt export naar Puppeteer voor Firefox

Als onderdeel van WebDriver BiDi -ondersteuning kan het Recorder- paneel nu opnamen exporteren naar Puppeteer voor Firefox. Met Puppeteer's ondersteuning van Firefox kunt u nu gebruikersstromen opnemen met behulp van het Chrome DevTools Recorder- paneel, deze exporteren en uitvoeren in zowel Firefox als Chrome.

De voor en na het toevoegen van de optie 'Puppeteer voor Firefox' aan het exportmenu van de Recorder.

Zie WebDriver BiDi - De toekomst van cross-browser automatisering voor meer informatie.

Verbeteringen in het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan in het Prestatiepaneel .

Live metrische observaties

Het Prestatiepaneel toont nu live observaties over Core Web Vitals , zowel op uw lokale computer als op basis van veldgegevens uit Chrome UX Report . Hierdoor kunt u prestatieproblemen opsporen zonder dat u prestatiesporen hoeft vast te leggen en begrijpt u hoe representatief uw ervaring is vergeleken met die van uw gebruikers.

Om live observaties op LCP en CLS te zien, opent u het Prestatiepaneel . Om INP te zien, voert u een interactie uit op een pagina. Als u uw lokale statistieken wilt vergelijken met de verzamelde gebruikerservaring uit het Chrome UX Report, 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 statistiekwaarde om knopinfo met meer informatie te zien.

Live observaties over statistieken in het prestatiepaneel.

Het Prestatiepaneel belicht statistieken die kunnen worden verbeterd en biedt inzichten en suggesties over hoe u uw lokale ervaring kunt afstemmen op die van uw gebruikers. U wilt bijvoorbeeld misschien de CPU of het netwerk beperken, wat u kunt doen op hetzelfde scherm in het gedeelte Opname-instellingen aan de rechterkant.

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

Een netwerkverzoek gevonden met zoeken.

Bekijk stacktraces van performance.mark en performance.measure aanroepen

Op het tabblad Samenvatting toont het paneel Prestaties nu stapelsporen van performance.mark en performance.measure aanroepen. U kunt deze aanroepen gebruiken om de prestatietracering uit te breiden met uw aangepaste gegevens.

De voor en na tonen stapelsporen voor performance.mark en performance. meet oproepen.

Zie Uw prestatiegegevens aanpassen met de uitbreidbaarheids-API voor meer informatie.

Gebruik testadresgegevens in het paneel Automatisch aanvullen

Het paneel Automatisch aanvullen biedt nu testgegevens voor adresformulieren. Dit maakt het eenvoudiger om de adresformulieren op uw website te testen als u geen adressen in Chrome heeft opgeslagen of als u een gastprofiel gebruikt.

Als u adresformulieren automatisch wilt invullen met testgegevens, opent u het paneel Automatisch aanvullen , schakelt u Toon testadressen in menu voor automatisch aanvullen in , klikt u met de rechtermuisknop op een adresformulier dat op uw pagina is opgeslagen en selecteert u een van de opties in het menu Ontwikkelaarshulpmiddelen .

De opties voor en na het toevoegen van testgegevens voor automatisch aanvullen aan een vervolgkeuzemenu met adresformuliervelden.

Verbeteringen in het paneel Elementen

Deze versie brengt een aantal verbeteringen aan in het Elementenpaneel .

Forceer meer statussen voor specifieke elementen

De :hov sectie in Elementen > Stijlen biedt u nu meer pseudo-klassen die u met geweld kunt inschakelen. De nieuwe set opties bevindt zich onder de vervolgkeuzelijst Forceer specifieke elementstatus en is specifiek voor bepaalde elementen die u selecteert. <label> en <input> hebben bijvoorbeeld verschillende sets opties.

De voor en na het toevoegen van de mogelijkheid om specifieke elementstatussen te forceren.

Chroomuitgave: 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.

De opties voor en na het toevoegen van automatisch aanvullen wanneer u de namen van stramienlijnen bewerkt.

Zie CSS-rasterindelingen inspecteren en in het bijzonder de sectie Lijnnamen tonen voor meer informatie.

Vuurtoren 12.2.0

Het Lighthouse- paneel draait nu Lighthouse 12.2.0.

Deze update brengt een aantal bugfixes met zich mee. 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 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Elementen :
    • Een bug opgelost waarbij de overbelaste lengte-eigenschappen onjuist werden weergegeven 357020613 .
    • position-try-options hernoemd naar position-try-fallbacks volgens specificatie .
    • Een paginavernieuwing herstelt nu het geselecteerde knooppunt, zelfs binnen een iframe 40719145 .
    • Toegankelijkheid : Schermlezers zullen nu de knop Element weergeven 357382536 aankondigen.
  • Prestaties > Netwerk : De menuoptie Onthullen in netwerk opent nu het tabblad Headers van het relevante netwerkverzoek.
  • Console :
    • Fouten van de C/C++-extensie openen nu niet geforceerd de Console 356320158 .
    • Een bug opgelost waarbij import.meta in een JS-module niet evalueerde wanneer deze werd gepauzeerd 40743793 .
  • Geheugen : Een bug opgelost waardoor Genegeerde retenties herstellen niet verschenen na het negeren van een retentie 327337527 .

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 .