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 biedt generatieve AI-mogelijkheden voor de DevTools Console , zodat u beter inzicht krijgt 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 Een vonk die overgaat in een lichtbol. Zorg dat u de waarschuwingsknop naast het bericht in de console begrijpt en volg de instructies.

De door AI gegenereerde verklaring van een fout.

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

@position-try regels ondersteuning in Elementen > Stijlen

Om u te helpen bij het debuggen van CSS-ankerpositionering , ondersteunt het tabblad Elementen > Stijlen nu @position-try CSS-regels . Het tabblad verwerkt de waarden van position-try-options en koppelt elke optie aan een speciale @position-try --name sectie.

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

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

Chromium-probleem: 40279608 .

Verbeteringen aan het bronnenpaneel

Deze versie brengt diverse verbeteringen aan het Bronnenpaneel .

Automatisch mooi afdrukken en haakjes sluiten configureren

U kunt nu het automatisch afdrukken van tekst en het sluiten van haakjes voor de editor in Bronnen in- of uitschakelen. Het afdrukken van tekst maakt geminimaliseerde bestanden leesbaar. Het sluiten van haakjes voegt automatisch een sluitend haakje ( ) of } ) of een tag ( > ) toe wanneer u een openend haakje typt.

Om het relevante gedrag te configureren, vinkt u de nieuwe Automatisch haakjes sluiten en bronnen automatisch mooi afdrukken aan of uit in Instellingen Voorkeuren > Bronnen .

Voor en na het toevoegen van de nieuwe instellingen voor automatisch mooi afdrukken en het sluiten van haakjes.

Chromium-problemen: 40865010 , 324314570 .

Afgehandelde afgewezen beloften worden als afgehandeld herkend

Het paneel Bronnen herkent nu correct afgewezen beloftes als afgevangen als u ze hebt verwerkt 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 naproces van het herkennen van opgevangen afwijzingen.

Chromium-probleem: 40283993 .

Foutoorzaken in de console

De console toont nu ketens van foutoorzaken in de stack trace, indien van toepassing.

Om het debuggen te vergemakkelijken, kunt u foutoorzaken opgeven bij het detecteren en opnieuw genereren van fouten. Terwijl de console de oorzaakketen doorloopt, wordt elke foutstapel weergegeven met het voorvoegsel ' Caused by: ', zodat u de oorspronkelijke fout nog steeds kunt zien.

De stacktraces voor en na het afdrukken, met het voorvoegsel `Veroorzaakt door`.

Chromium-probleem: 40182832 .

Verbeteringen aan het netwerkpaneel

Deze versie brengt diverse verbeteringen aan het Netwerkpaneel .

Inspecteer de kopteksten van Early Hints

De Early Hints-headers krijgen een aparte sectie op het tabblad ' Headers' van het venster ' Netwerk' . Voorheen vond u de relevante headers in de sectie 'Responseheaders' .

Early Hints is een HTTP-statuscode ( 103 Early Hints ) die wordt gebruikt om een voorlopige HTTP-respons te sturen vóór een definitieve respons. Hiermee kan een server hints naar de browser sturen over kritieke subbronnen (bijvoorbeeld een stylesheet of kritieke JavaScript) of bronnen die waarschijnlijk door de pagina worden gebruikt, terwijl de server bezig is met het genereren van de hoofdbron.

Voor en na het toevoegen van een aparte sectie voor vroege hints.

Zie Snellere paginaladingen dankzij serverdenktijd met Early Hints voor meer informatie.

Chromium-probleem: 40222701 .

Verberg de watervalkolom

U kunt de watervalkolom in het netwerkpaneel nu verbergen, net zoals u andere kolommen kunt verbergen. Klik met de rechtermuisknop op een kolomnaam en schakel het 'Waterval' in het dropdownmenu uit.

Voor en na het toevoegen van de optie om de Watervalkolom te verbergen.

Chromium-probleem: 40574989 .

Verbeteringen aan het prestatiepaneel

Deze versie brengt diverse verbeteringen aan het Prestatiepaneel .

CSS-selectorstatistieken vastleggen

Het paneel Prestaties heeft een nieuwe instelling waarmee u CSS-selectorstatistieken kunt vastleggen voor langdurige Recalculate Style- gebeurtenissen.

Om de statistieken te bekijken, selecteert u een gebeurtenis 'Stijl opnieuw berekenen' en opent u het nieuwe tabblad 'Selectorstatistieken' . Het tabblad toont u informatie over de verstreken tijd, het aantal matchpogingen en het percentage niet-matches via het langzame pad voor elke selector.

Voor en na het toevoegen van selectorstatistieken.

Chromium-probleem: 324282954 .

Volgorde wijzigen en tracks verbergen

Het paneel Prestaties heeft een nieuwe configuratiemodus waarmee u de volgorde van tracks kunt wijzigen en ze kunt verbergen.

Om de configuratiemodus te openen, klikt u op de knop links van de tracknaam. Klik vervolgens op up of down om de track te verplaatsen of klik op hide. Klik op de knop Gereed van de tracknaam als u klaar bent.

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

Chromium-probleem: 311439339 .

Negeer houders in het geheugenpaneel

U kunt nu retainers negeren in heap-snapshots die u vastlegt via het deelvenster Geheugen.

Om een retainer te negeren, selecteert u een object en klikt u in de sectie Retainer met de rechtermuisknop op een retainer. Selecteer vervolgens 'Deze retainer negeren' in het vervolgkeuzemenu. Genegeerde retainers worden gemarkeerd met de waarde ignored in de kolom ' Afstand' . Om het negeren te stoppen, klikt u op 'Genegeerde retainers herstellen' in de actiebalk bovenaan.

Voor en na het toevoegen van een optie om retainers te negeren.

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

Chromium-probleem: 327337527 .

Vuurtoren 11.7.1

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

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

Voor en na het toevoegen en verwijderen van de Publisher Ads-plug-inondersteuning.

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:

  • Het paneel Recorder is nu officieel niet meer in de preview-modus ( 329271496 ).
  • De console geeft nu geen foutmelding meer weer als een aangepaste formatter een null retourneert voor de body() functie, wat geldig gedrag is ( 329400119 ).
  • In het paneel Bronnen is de syntaxishighlighter bijgewerkt. Deze ondersteunt nu met name v en d vlaggen in reguliere expressies.
  • Op het tabblad Netwerk > Cookies is een bug opgelost die optrad bij het toewijzen van vrijgestelde cookies aan responscookies ( 41491846 ).
  • Het tabblad Elementen > Stijlen doet nu het volgende:
    • Geeft volledig overbelaste geërfde regels weer met aangepaste eigenschappen ( 41489874 ).
    • Markeert de toegepaste waarde in light-dark() afhankelijk van het kleurenthema ( 331123816 ).

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.