Wat is er nieuw in DevTools, Chrome 143

Updates voor de DevTools MCP-server

We hebben diverse verbeteringen doorgevoerd voor de DevTools MCP-server en versie 0.11.0 uitgebracht.

  • Wanneer u in uw MCP-client (Gemini CLI, Cursor, ...) een prompt gebruikt, kunt u nu verwijzen naar elementen en netwerkverzoeken die zijn geselecteerd in de panelen Elementen en Netwerk.
  • De tool list_console_messages bevat nu ook problemen die in het paneel Problemen zijn gemeld.
  • De nieuwe tool press_key kan nu worden gebruikt om toetsenbordgebeurtenissen te debuggen die geen verband houden met formulierelementen.
  • Momentopnamen van de toegankelijkheidsstructuur kunnen nu op schijf worden opgeslagen.
  • Pagina's kunnen nu opnieuw worden geladen, waarbij de cache optioneel kan worden genegeerd.
  • Configureer de vlag --user-data-dir om een ​​bestaand Chrome-profiel te gebruiken.

Bekijk het openbare wijzigingslogboek op GitHub voor een volledige lijst met wijzigingen en bugfixes, en lees meer over de DevTools MCP-server in het aankondigingsblogbericht .

Verbeterde tracering

Het dialoogvenster voor het delen van traceringen in het paneel Prestaties

Bij het exporteren van een prestatietrace kunt u nu extra gegevens in het geëxporteerde bestand opnemen om het debuggen voor uzelf of een collega in de toekomst te vergemakkelijken. U kunt nu de volgende gegevens toevoegen:

  • Broninhoud : Een kopie van alle HTML-, CSS- en JavaScript-bestanden (exclusief extensiescripts)
  • Scriptbronkaarten : Koppelingen naar door de auteur geschreven code, waarmee u de oorspronkelijke functienamen en bronbestanden kunt zien.

Lees in onze bijgewerkte documentatie wat je wel en niet kunt delen.

We willen onze collega's bij Microsoft bedanken, dankzij hun samenwerking en het voorwerk dat hieraan voorafging.

Ondersteuning voor @starting-style

Het paneel Elementen biedt nu ondersteuning voor het debuggen van de nieuwe CSS-regel @starting-style , die essentieel is voor het maken van animaties bij het verschijnen van elementen.

Je kunt nu een starting-style ornament zien in de elementenboom naast de relevante elementen, de starting-style status van het element wijzigen door op het icoontje te klikken en het @starting-style blok inspecteren en debuggen in het tabblad Stijlen .

Editorwidget voor weergave: metselwerk

Als je experimenteert met CSS Masonry-layouts, kun je nu dezelfde editorwidget gebruiken die je kent van display : flex en grid layouts om snel te schakelen tussen verschillende uitlijningsopties in masonry layouts.

Vuurtoren 13

Het Lighthouse- panel draait nu op Lighthouse 13. Met deze mijlpaal is het werk afgerond om prestatie-inzichten te verenigen in DevTools en Lighthouse.

Lees meer in het aankondigingsblogbericht . Om te leren waarvoor Lighthouse nuttig is en hoe het verbonden is met het Prestatiepaneel in DevTools, zie Lighthouse: Optimaliseer uw website .

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' .