Wat is er nieuw in DevTools, Chrome 125

Sofia Emelianova

Begrijp fouten en waarschuwingen in de console beter met Gemini.

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

Klik op de knop om een ​​door AI gegenereerde uitleg van een fout of waarschuwing te krijgen. Begrijp deze foutmelding (waarschuwing) via de knop naast het bericht in de console en volg de instructies.

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

@position-try regels worden nu ondersteund in Elementen > Stijlen

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

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

Chromium-probleem: 40279608 .

Verbeteringen aan het bronnenpaneel

Deze versie bevat diverse verbeteringen aan het paneel 'Bronnen '.

Configureer automatische opmaak en het sluiten van haakjes.

Je kunt nu de automatische opmaak en het automatisch sluiten van haakjes voor de editor in- of uitschakelen in de broncode . De automatische opmaak maakt geminificeerde bestanden leesbaar. Het automatisch sluiten van haakjes voegt automatisch een sluitend haakje ( ) of } ) of tag ( > ) toe wanneer je een openend haakje typt.

Om het gewenste gedrag te configureren, vinkt u de nieuwe selectievakjes 'Automatisch sluiten van haakjes' en ' Automatisch netjes opmaken van geminificeerde broncode' aan of uit in de instellingen onder Instellingen > Voorkeuren > Broncode .

Chromium-problemen: 40865010 , 324314570 .

Afgehandelde afgewezen beloftes worden herkend als opgevangen.

Het paneel 'Bronnen' herkent nu correct dat afgewezen beloftes zijn opgevangen als je ze hebt afgehandeld met .catch() of .then() met twee argumenten.

Met andere woorden: wanneer bij Bronnen > Breakpoints > het selectievakje Pauzeren bij niet-afgevangen uitzonderingen is ingeschakeld, pauzeert de debugger niet bij instructies die lijken op de volgende:

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

Chromium-probleem: 40283993 .

Foutmeldingen in de console

De console toont nu eventuele oorzaakketens van fouten in de stacktrace.

Om het debuggen te vereenvoudigen, kunt u bij het opvangen en opnieuw doorgeven van fouten de oorzaak van een fout specificeren . Terwijl de console de oorzaakketen doorloopt, print deze elke foutstack met het voorvoegsel Caused by: , zodat u de oorspronkelijke fout nog steeds kunt zien.

Chromium-probleem: 40182832 .

Verbeteringen aan het netwerkpaneel

Deze versie bevat diverse verbeteringen aan het netwerkpaneel .

Inspecteer de kopteksten van Early Hints

De Early Hints-headers krijgen een eigen sectie in het tabblad Headers van het verzoek in het netwerkpaneel . Voorheen waren de relevante headers te vinden in de sectie Response Headers .

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

Zie voor meer informatie Snellere paginaladingen met behulp van server-think-time en Early Hints .

Chromium-probleem: 40222701 .

Verberg de watervalkolom

Je kunt de kolom 'Waterval' in het paneel 'Netwerk' nu verbergen, net zoals je andere kolommen kunt verbergen. Klik met de rechtermuisknop op een kolomnaam en schakel het selectievakje 'Waterval' uit in het vervolgkeuzemenu.

Chromium-probleem: 40574989 .

Prestatieverbeteringen

Deze versie bevat diverse verbeteringen aan het prestatiepaneel .

Statistieken vastleggen van CSS-selectors

Het paneel Prestaties krijgt een nieuwe instelling waarmee u CSS-selectorstatistieken kunt vastleggen voor langlopende 'Stijl opnieuw berekenen'- gebeurtenissen.

Om de statistieken te bekijken, selecteert u een 'Recalculate Style'- gebeurtenis en opent u het nieuwe tabblad 'Selector Stats' . Op dit tabblad ziet u informatie over de verstreken tijd, het aantal matchpogingen en het percentage niet-matches via het slow-path-systeem voor elke selector.

Chromium-probleem: 324282954 .

Volgorde wijzigen en sporen verbergen

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

Om de configuratiemodus te openen, klikt u op de knop ' Bewerken ' links van de tracknaam. Klik vervolgens op de pijl omhoog (pijl omhoog) of omlaag (pijl omlaag) om de track te verplaatsen, of klik op 'zichtbaarheid uit' (verbergen). Klik op de knop 'Klaar' rechts van de tracknaam als u klaar bent.

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

Chromium-probleem: 311439339 .

Negeer de retainers in het geheugenpaneel.

Je kunt nu retainers negeren in heap-snapshots die je vastlegt met het geheugenpaneel .

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

Bovendien ondersteunen heap snapshots nu een groter aantal (honderden miljoenen) containment edges en nodes ( 332350576 ).

Chromium-probleem: 327337527 .

Vuurtoren 11.7.1

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

Een van de opvallende wijzigingen is het stopzetten van de ondersteuning voor de Publisher Ads- plugin, die in deze versie verouderd is geraakt.

Om de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools te leren, raadpleegt u Lighthouse: Websitesnelheid optimaliseren .

Chromium-probleem: 772558 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

• Het Recorder- paneel is nu officieel niet meer in de previewfase ( 329271496 ).
• De console geeft nu geen foutmelding meer weer wanneer een aangepaste formatter null retourneert voor de body() functie, wat een geldig gedrag is ( 329400119 ).
• Het paneel 'Bronnen' heeft een bijgewerkte syntaxmarkering gekregen; met name v en d -vlaggen in reguliere expressies worden nu ondersteund.
• Het tabblad Netwerk > Cookies heeft een bug verholpen met betrekking tot het toewijzen van uitgezonderde cookies aan responscookies ( 41491846 ).
• Het tabblad Elementen > Stijlen doet nu het volgende:
  • Toont volledig overbelaste overgeërfde regels met aangepaste eigenschappen ( 41489874 ).
  • Markeer de toegepaste waarde in licht-donker() afhankelijk van het kleurenthema ( 331123816 ).

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

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

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .