Wat is er nieuw in DevTools, Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Begrijp fouten en waarschuwingen in de console beter met Gemini

Deze Chrome-versie brengt generatieve AI-mogelijkheden naar de DevTools Console , bedoeld om u een beter inzicht te geven in de fouten en waarschuwingen die u tegenkomt.

Om een ​​door AI gegenereerde uitleg van een fout of waarschuwing te krijgen, klikt u op de Gloeilamp vonk. Begrijp de foutknop (waarschuwingsknop) naast het bericht in de console en volg de instructies.

De door AI gegenereerde uitleg van een fout.

Zie Fouten en waarschuwingen beter begrijpen met AI voor meer informatie.

Ondersteuning @position-try -regels in Elementen > Stijlen

Om u te helpen fouten in de positionering van CSS-ankers op te sporen, ondersteunt het tabblad Elementen > Stijlen nu @position-try CSS-regels . Het tabblad lost de waarden position-try-options op en koppelt elke optie aan een speciale @position-try --name sectie.

De voor en na ondersteuning van de @position-try CSS-regels.

Zie Introductie van de CSS-ankerpositionerings-API voor meer informatie.

Chroomuitgave: 40279608 .

Verbeteringen in het bronnenpaneel

Deze versie brengt verschillende verbeteringen aan in het Bronnenpaneel .

Configureer automatisch mooie afdrukken en beugelsluiting

U kunt nu het automatisch mooi afdrukken en het sluiten van haakjes voor de Editor in Bronnen in- of uitschakelen. Pretty-printing maakt verkleinde bestanden leesbaar. Het sluiten van haakjes voegt automatisch een haakje sluiten ( ) of } ) of een tag ( > ) toe wanneer u een openingshaakje typt.

Om het relevante gedrag te configureren, schakelt u de nieuwe Automatisch sluitende haakjes en Automatisch mooie geminimaliseerde bronnen afdrukken in in Instellingen > Voorkeuren > Bronnen in of uit.

De voor en na het toevoegen van nieuwe instellingen voor automatisch mooi afdrukken en het sluiten van beugels.

Chroomafgiften: 40865010 , 324314570 .

Afgehandelde afgewezen beloften worden als gepakt erkend

Het Bronnenpaneel herkent afgewezen beloften nu correct als gevangen als je ze hebt afgehandeld met .catch() of .then() met twee argumenten.

Met andere woorden: wanneer Bronnen > Breekpunten > Pauzeren bij niet-afgevangen uitzonderingen is ingeschakeld, zal de debugger niet pauzeren bij instructies die vergelijkbaar zijn met de volgende: 

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

Het voor en na herkennen van gevangen afwijzingen.

Chroomuitgave: 40283993 .

Foutoorzaken in de console

De console toont nu ketens van foutoorzaken in de stacktrace, indien aanwezig.

Om het debuggen eenvoudiger te maken, kunt u de oorzaken van fouten opgeven bij het onderscheppen en opnieuw genereren van fouten. Terwijl de console de oorzaakketen oploopt, wordt elke foutenstapel afgedrukt met het voorvoegsel Caused by: zodat u nog steeds de oorspronkelijke fout kunt zien.

De voor- en na het afdrukken stapelt sporen op met de voorvoegsels 'Veroorzaakt door'.

Chroomuitgave: 40182832 .

Verbeteringen in het netwerkpaneel

Deze versie brengt verschillende verbeteringen aan het netwerkpaneel .

Inspecteer de kopteksten van Early Hints

De Early Hints-headers krijgen een speciale sectie op het tabblad Headers van het verzoek van het netwerkpaneel . Voorheen kon u de relevante headers vinden in de sectie Response Headers .

Early Hints is een HTTP-statuscode ( 103 Early Hints ) die wordt gebruikt om een ​​voorlopig HTTP-antwoord te verzenden voorafgaand aan een definitief antwoord. Hierdoor kan een server hints naar de browser sturen over kritieke subbronnen (bijvoorbeeld een stylesheet of essentieel JavaScript) of oorsprong die waarschijnlijk door de pagina zullen worden gebruikt, terwijl de server bezig is met het genereren van de hoofdbron.

De voor en na het toevoegen van een speciale sectie voor vroege hints.

Zie Sneller laden van pagina's met server-denktijd met Early Hints voor meer informatie.

Chroomuitgave: 40222701 .

Verberg de kolom Waterval

U kunt nu de kolom Waterval in het paneel Netwerk verbergen, op dezelfde manier als u andere kolommen kunt verbergen. Klik met de rechtermuisknop op een willekeurige kolomnaam en schakel het selectievakje Waterval in het vervolgkeuzemenu uit.

De voor en na het toevoegen van de optie om de Waterval-kolom te verbergen.

Chroomuitgave: 40574989 .

Verbeteringen in het prestatiepaneel

Deze versie brengt verschillende verbeteringen aan in het Prestatiepaneel .

Leg CSS-selectorstatistieken vast

Het Prestatiepaneel krijgt een nieuwe instelling waarmee u CSS-selectorstatistieken kunt vastleggen voor langlopende Herbereken Stijl- gebeurtenissen.

Om de statistieken te bekijken, selecteert u een gebeurtenis Herbereken stijl en opent u het nieuwe tabblad Selectorstatistieken . Op het tabblad wordt voor elke selector informatie weergegeven over de verstreken tijd, het aantal matchpogingen en het percentage langzame niet-matches.

De voor en na het toevoegen van selectorstatistieken.

Chroomuitgave: 324282954 .

Verander de volgorde en verberg nummers

Het Performance- paneel krijgt een nieuwe configuratiemodus waarmee je de volgorde van tracks kunt wijzigen en verbergen.

Om naar de configuratiemodus te gaan, klikt u op de knop links van de tracknaam. Klik vervolgens op omhoog of omlaag om de track te verplaatsen of klik op verbergen. Klik op de knop controleren rechts van de tracknaam als u klaar bent.

De volgende versie, Chrome 126, zal meer verbeteringen aan deze gebruikersinterface brengen.

Chroomuitgave: 311439339 .

Negeer de houders in het paneel Geheugen

U kunt nu vasthouders negeren in heap-snapshots die u vastlegt met het paneel Geheugen .

Als u een houder wilt negeren, selecteert u een object en klikt u in de sectie Vasthouder met de rechtermuisknop op een houder en selecteert u Deze houder negeren in het vervolgkeuzemenu. Genegeerde vasthouders worden gemarkeerd met ignored waarde in de kolom Afstand . Als u wilt stoppen met negeren, klikt u op Genegeerde vasthouders herstellen in de actiebalk bovenaan.

De voor en na het toevoegen van een optie om houders te negeren.

Bovendien ondersteunen heap-snapshots nu een groter aantal (honderden miljoenen) containmentranden en knooppunten ( 332350576 ).

Chroomuitgave: 327337527 .

Vuurtoren 11.7.1

Het Lighthouse- paneel draait nu Lighthouse 11.7.1. Bekijk de volledige lijst met wijzigingen .

Een van de opmerkelijke veranderingen is de verouderde ondersteuning voor de Publisher Ads -plug-in, die in deze versie verouderd is.

De voor en na het toevoegen van ondersteuning voor het verwijderen van de Publisher Ads-plug-in.

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:

  • Het Recorder- paneel heeft nu officieel de preview-status ( 329271496 ).
  • De console geeft nu geen fout weer wanneer een aangepaste formatter een null retourneert voor de functie body() , wat een geldig gedrag is ( 329400119 ).
  • Het paneel Bronnen heeft de syntaxismarkeerstift bijgewerkt. Het ondersteunt nu met name v en d -vlaggen in reguliere expressies.
  • Op het tabblad Netwerk > Cookies is een bug opgelost waarbij vrijgestelde cookies werden toegewezen aan responscookies ( 41491846 ).
  • Het tabblad Elementen > Stijlen doet nu het volgende:
    • Toont volledig overbelaste overgenomen regels met aangepaste eigenschappen ( 41489874 ).
    • Markeert de toegepaste waarde in light-dark() afhankelijk van het kleurthema ( 331123816 ).

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 .