Wat is er nieuw in DevTools, Chrome 143

DevTools MCP-serverupdates

We hebben diverse verbeteringen doorgevoerd voor de DevTools MCP-server en v0.11.0 uitgebracht.

  • Wanneer u in uw MCP-client (Gemini CLI, Cursor, ...) wordt gevraagd, 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 aan het licht zijn gekomen
  • De nieuwe press_key tool kan nu worden gebruikt om toetsenbordgebeurtenissen te debuggen die niet gerelateerd zijn aan formulierelementen
  • Snapshots van de toegankelijkheidsboom kunnen nu op schijf worden opgeslagen
  • Pagina's kunnen nu opnieuw worden geladen, waarbij de cache optioneel kan worden genegeerd
  • Configureer de --user-data-dir vlag om een ​​bestaand Chrome-profiel te gebruiken

Zie het openbare changelog op GitHub voor de volledige lijst met wijzigingen en opgeloste bugs. Lees meer over de DevTools MCP-server in de aankondigingsblogpost .

Verbeterde trace-deling

Het dialoogvenster voor het delen van sporen in het paneel Prestaties

Bij het exporteren van een prestatietracering kunt u nu extra gegevens in het geëxporteerde bestand opnemen om verdere debug-werkzaamheden voor uzelf of een collega te vergemakkelijken. U kunt nu kiezen uit de volgende opties:

  • Broninhoud : een kopie van alle HTML-, CSS- en JavaScript-bestanden (met uitzondering van extensiescripts)
  • Scriptbrontoewijzingen : toewijzingen aan geschreven code, zodat u de originele functienamen en bronbestanden kunt zien.

Lees in onze bijgewerkte documentatie wat u kunt delen en wat u beter privé kunt houden.

Wij willen graag onze collega's bij Microsoft bedanken, met wie wij hebben samengewerkt en die leiding hebben gegeven aan het voortraject.

Ondersteuning voor @starting-style

Het Elementenpaneel biedt nu ondersteuning voor het debuggen van de nieuwe CSS @starting-style regel, die essentieel is voor het maken van ingangsanimaties.

U kunt nu een starting-style versiering zien in de elementenboom naast relevante elementen, de starting-style van het element in- of uitschakelen door op de pil te klikken en het blok @starting-style inspecteren en debuggen op het tabblad Stijlen .

Editorwidget voor weergave: metselwerk

Als u experimenteert met CSS Masonry-layouts, kunt u nu dezelfde editorwidget gebruiken als in de display : flex en grid om snel te schakelen tussen verschillende uitlijningsopties in masonry -layouts.

Vuurtoren 13

Het Lighthouse- paneel draait nu op Lighthouse 13. Met deze mijlpaal is het werk aan het verenigen van prestatie-inzichten tussen DevTools en Lighthouse afgerond.

Lees meer in de blogpost over de aankondiging . Zie Lighthouse: Optimaliseer uw website voor meer informatie over waar Lighthouse voor gebruikt wordt en hoe het verbinding maakt met het Prestatiepaneel in DevTools.

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 wat in de serie Wat is er nieuw in DevTools is behandeld.