Wat is er nieuw in DevTools, Chrome 140

Sofia Emelianova
Sofia Emelianova
GitHub

Ontdek meer inzichten met Gemini.

In Prestaties > Inzichten kunt u nu op Foutopsporing met AI (voorheen Vraag AI ) klikken om met Gemini te chatten en fouten op te sporen in het AI- assistentiepaneel voor meer prestatie-inzichten.

  • Verbeter de beeldweergave.
  • Verouderde JavaScript
  • Dubbele JavaScript
  • Moderne HTTP

De situatie vóór en na het toevoegen van de knop 'Debuggen met AI' voor meer inzicht in de prestaties.

Emuleer de 'Save-Data'-header in 'Netwerkcondities'.

In het paneel Netwerkcondities kunt u nu het gedrag van de Save-Data verzoekheader nabootsen. Deze header is een hint voor de netwerkclient die aangeeft dat de client de voorkeur geeft aan een lager dataverbruik. Deze is ook beschikbaar via de navigator.connection.saveData API.

De situatie vóór en na het toevoegen van de emulatie van de 'Save-Data'-verzoekheader aan 'Netwerkcondities'.

Chromium-probleem: 40668980 .

Bekijk de basislijnstatus in een tooltip van een CSS-eigenschap.

In Elementen > Stijlen kunt u nu, wanneer u de muis over een CSS-eigenschap beweegt, onder de definitie van de eigenschap zien of deze beschikbaar is in de belangrijkste browsers op basis van de Baseline -status.

De situatie vóór en na het toevoegen van de Baseline-status aan de tooltips van de CSS-eigenschap.

Chromium-probleem: 417749762 .

Formaatfactoren overschrijven in clienthints van de gebruikersagent

In het vervolgkeuzemenu Netwerkcondities > Clienthints voor gebruikersagenten hebt u nu opties om vormfactoren te overschrijven, met name de waarden van de aanvraagheader Sec-CH-UA-Form-Factors .

De situatie vóór en na het toevoegen van de opties voor het overschrijven van de vormfactor aan de clienthints van de gebruikersagent.

Chromium-probleem: 422218341 .

Lighthouse 12.8.0

Het Lighthouse- paneel draait nu op Lighthouse 12.8.0.

De meest opvallende toevoeging in deze versie van Lighthouse is een nieuw rapport: DOM-gebaseerde XSS-aanvallen beperken met vertrouwde gegevenstypen.

Zie ook de volledige lijst met wijzigingen .

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

Chromium-probleem: 40543651 .

Diverse hoogtepunten

Dit zijn slechts enkele van de vele belangrijke bugfixes en verbeteringen in deze release:

  • AI-ondersteuning :
    • De chatgeschiedenis wordt nu gewist wanneer je de bijbehorende AI-functie uitschakelt in de instellingen .
    • Toegankelijkheid : Schermlezers kondigen nu contexttitels vroegtijdig aan, "Antwoord wordt geladen" wanneer het antwoord begint te verschijnen en "Antwoord gereed" wanneer het antwoord compleet is.
  • Elementen :
    • Het tabblad Stijlen kan nu de CSS-functies sibling-index() , sibling-count() en env() evalueren ( crbug.com/417128001 , crbug.com/40196710 ).
    • Ondersteuning toegevoegd voor het pseudo-element ::view-transition-group-children ( crbug.com/425901164 ).
    • Er is ondersteuning toegevoegd voor toegankelijkheidsproblemen met betrekking tot interactieve inhoud in het <summary> -element ( crbug.com/427172874 ).
    • Vanuit het tabblad 'Berekend' kunt u nu naar de eigenschappen in de stijlbeschrijving navigeren ( crbug.com/41486012 ).
    • Easing, kleurbewerkers : Je kunt nu met behulp van het toetsenbord interactie hebben met Bézier-kleurstalen voor animatieovergangen en kleurstalen ( crbug.com/401213421 ).
  • Netwerk : Bij het importeren van HAR-bestanden worden nu ook aanvraag- en antwoordcookies meegenomen ( crbug.com/432995868 ).
  • Apparaatmodus : Gebruikersagenten voor Apple-apparaten bijgewerkt naar de nieuwste versie van Safari 18.5.

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.

Wat is er nieuw in DevTools?

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