Wat is er nieuw in DevTools, Chrome 129

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.

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 een dialoogvenster op Ok . Beweeg de muis over een statistiekwaarde om knopinfo met meer informatie te zien.

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. Mogelijk wilt u bijvoorbeeld de CPU of het netwerk beperken, wat u kunt doen op hetzelfde scherm in het gedeelte Opname-instellingen aan de rechterkant.

Zoekverzoeken in het netwerkspoor

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

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.

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.

Om adresformulieren automatisch in te vullen met testgegevens, opent u het paneel Automatisch aanvullen , schakelt u check_box 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 .

Verbeteringen in het paneel Elementen

Deze versie brengt een aantal verbeteringen aan 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 Force specifieke elementstatus en is specifiek voor bepaalde elementen die u selecteert. <label> en <input> hebben bijvoorbeeld verschillende sets opties.

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.

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 onjuiste weergave van overbelaste lengte-eigenschappen 357020613 plaatsvond.
  • 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 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 .

Wat is er nieuw in DevTools

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