Wat is er nieuw in DevTools, Chrome 125

Sofia Emelianova

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 Begrijp de foutknop (waarschuwingsknop) naast het bericht in de console en volg de instructies.

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.

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 check_box Automatisch sluitende haakjes en check_box Automatisch mooie geminimaliseerde bronnen afdrukken in instellingen in Instellingen > Voorkeuren > Bronnen in of uit.

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 > check_box 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'));

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.

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.

Zie Sneller laden van pagina's met behulp van 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 check_box_outline_blank Waterval in het vervolgkeuzemenu uit.

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.

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 de configuratiemodus te openen, klikt u op de knop Bewerken Bewerken links van de tracknaam. Klik vervolgens op pijl_omhoog of pijl_omlaag om de track te verplaatsen of klik op zichtbaarheid_uit verbergen. Klik op de knop Klaar 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.

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.

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.

• Stuur feedback en functieverzoeken naar ons op crbug.com .
• Rapporteer een DevTools-probleem met more_vert Meer opties > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op 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 .