Wat is er nieuw in DevTools, Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

Recorder ondersteunt export naar Puppeteer voor Firefox

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

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

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

Verbeteringen aan het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan het Prestatiepaneel .

Live metrische observaties

Het Prestatiepaneel toont nu live observaties over Core Web Vitals , zowel op je lokale computer als op basis van veldgegevens uit het Chrome UX Report . Zo kun je prestatieproblemen opsporen zonder prestatiesporen vast te leggen en inzicht krijgen in hoe representatief je ervaring is ten opzichte van die van je gebruikers.

Om live observaties op LCP en CLS te bekijken, opent u het paneel Prestaties . Om INP te bekijken, voert u een interactie op een pagina uit. Om uw lokale statistieken te vergelijken met de verzamelde gebruikerservaring in 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 muisaanwijzer over een metrische waarde om een ​​tooltip met meer informatie te zien.

Live-observaties over statistieken in het paneel Prestaties.

Het paneel Prestaties markeert statistieken die verbeterd kunnen worden en biedt inzichten en suggesties over hoe u uw lokale ervaring kunt afstemmen op die van uw gebruikers. U kunt bijvoorbeeld de CPU of het netwerk beperken. Dit kunt u doen in hetzelfde scherm, in de sectie Opname-instellingen aan de rechterkant.

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

Er is een netwerkverzoek gevonden met de zoekopdracht.

Bekijk stack traces van performance.mark en performance.measure aanroepen

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

Voor en na de stack traces voor performance.mark en performance.measure aanroepen.

Zie Uw prestatiegegevens aanpassen met de extensibility API voor meer informatie.

Testadresgegevens gebruiken in het paneel Automatisch invullen

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

Als u adresformulieren automatisch wilt invullen met testgegevens, opent u het paneel Automatisch invullen , schakelt u Testadressen weergeven in menu Automatisch invullen in , klikt u met de rechtermuisknop op een adresformulierveld op uw pagina en selecteert u een van de opties in het menu Hulpmiddelen voor ontwikkelaars .

Voor en na het toevoegen van testgegevens voor automatisch invullen aan een vervolgkeuzemenu voor een adresformulierveld.

Verbeteringen aan het elementenpaneel

Deze versie brengt een aantal verbeteringen aan het Elementenpaneel .

Dwing meer staten af ​​voor specifieke elementen

De sectie :hov in Elementen > Stijlen biedt nu meer pseudoklassen die u geforceerd kunt inschakelen. De nieuwe set opties bevindt zich in de vervolgkeuzelijst 'Specifieke elementstatus afdwingen' en is specifiek voor bepaalde elementen die u selecteert. Zo hebben <label> en <input> verschillende sets opties.

Voor en na het toevoegen van de mogelijkheid om specifieke elementtoestanden af ​​te dwingen.

Chromium-probleem: 40280012 .

Elementen > Stijlen vullen nu automatisch meer rastereigenschappen in

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

Voor en na het toevoegen van opties voor automatisch aanvullen bij het bewerken van de namen van rasterlijnen.

Voor meer informatie, zie CSS-rasterindelingen controleren en met name het gedeelte Lijnnamen weergeven .

Vuurtoren 12.2.0

Het Lighthouse- paneel draait nu Lighthouse 12.2.0.

Deze update bevat een aantal bugfixes. Bekijk de volledige lijst met wijzigingen .

Voor de basisbeginselen van het gebruik van het Lighthouse- paneel in DevTools raadpleegt u Lighthouse: Optimaliseer de snelheid van uw website .

Chromium-probleem: 772558 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Elementen :
    • Er is een bug opgelost met onjuiste weergave van overbelaste lengte-eigenschappen 357020613 .
    • position-try-options hernoemd naar position-try-fallbacks conform de specificatie .
    • Bij het vernieuwen van de pagina wordt nu het geselecteerde knooppunt hersteld, zelfs binnen een iframe 40719145 .
    • Toegankelijkheid : Schermlezers zullen nu de knop Element weergeven 357382536 aankondigen.
  • Prestaties > Netwerk : Met de menuoptie Weergeven in netwerk opent u nu het tabblad Kopteksten van de relevante netwerkaanvraag.
  • Bedieningspaneel :
    • Fouten van de C/C++-extensie forceren nu niet langer het openen van Console 356320158 .
    • Er is een bug opgelost waarbij import.meta in een JS-module niet werd geëvalueerd tijdens pauze 40743793 .
  • Geheugen : Er is een bug opgelost waarbij Restore genegeerde retainers niet werden weergegeven na het negeren van een retainer 327337527 .

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

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

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.