Neu in den Entwicklertools, Chrome 143

Updates für den MCP-Server in den DevTools

Wir haben verschiedene Verbesserungen für den DevTools-MCP-Server vorgenommen und Version 0.11.0 veröffentlicht.

  • Wenn Sie in Ihrem MCP-Client (Gemini CLI, Cursor usw.) Prompts eingeben, können Sie jetzt auf Elemente und Netzwerkanfragen verweisen, die in den Bereichen „Elemente“ und „Netzwerk“ ausgewählt sind.
  • Das list_console_messages-Tool enthält jetzt auch Probleme, die im Bereich Probleme angezeigt werden.
  • Mit dem neuen press_key-Tool können Sie jetzt Tastaturereignisse debuggen, die nicht mit Formularelementen zusammenhängen.
  • Snapshots des Bedienungshilfenbaums können jetzt auf der Festplatte gespeichert werden
  • Seiten können jetzt neu geladen werden, wobei der Cache optional ignoriert wird.
  • Das Flag --user-data-dir konfigurieren, um ein vorhandenes Chrome-Profil zu verwenden

Eine vollständige Liste der Änderungen und Fehlerkorrekturen finden Sie im öffentlichen Changelog auf GitHub. Weitere Informationen zum DevTools-MCP-Server finden Sie im Ankündigungsblogpost.

Verbesserte Freigabe von Traces

Dialogfeld zum Freigeben von Traces im Bereich „Leistung“

Beim Exportieren eines Leistungstraces können Sie jetzt zusätzliche Daten in die exportierte Datei einfügen, um das Debugging für sich selbst oder einen Kollegen zu erleichtern. Sie können nun Folgendes einbeziehen:

  • Ressourceninhalte: Eine Kopie aller HTML-, CSS- und JavaScript-Dateien (ohne Erweiterungsskripts)
  • Skript-Quellzuordnungen: Zuordnungen zum erstellten Code, mit denen Sie die ursprünglichen Funktionsnamen und Quelldateien sehen können.

In unserer aktualisierten Dokumentation erfahren Sie, was Sie teilen und was Sie besser privat halten sollten.

Wir möchten uns bei unseren Kollegen bei Microsoft bedanken, die uns bei der Umsetzung unterstützt und die Vorarbeit geleistet haben.

Unterstützung für @starting-style

Das Steuerfeld Elemente unterstützt jetzt das Debugging der neuen CSS-Regel @starting-style, die für die Erstellung von Einstiegsanimationen unerlässlich ist.

Im Elementbaum wird jetzt neben relevanten Elementen ein starting-style-Vermerk angezeigt. Sie können den starting-style-Status des Elements ändern, indem Sie auf die Pille klicken, und den @starting-style-Block auf dem Tab Stile untersuchen und debuggen.

Editor-Widget für die Anzeige: Mauerwerk

Wenn Sie mit dem CSS-Mauerwerk-Layout experimentieren, können Sie jetzt dasselbe Editor-Widget wie bei den Layouts display, flex und grid verwenden, um schnell zwischen verschiedenen Ausrichtungsoptionen in masonry-Layouts zu wechseln.

Leuchtturm 13

Im Bereich Lighthouse wird jetzt Lighthouse 13 ausgeführt. Mit diesem Meilenstein ist die Vereinheitlichung der Leistungserkenntnisse in DevTools und Lighthouse abgeschlossen.

Weitere Informationen Lighthouse ist ein Open-Source-Tool, mit dem Sie die Leistung Ihrer Webseiten verbessern können. Weitere Informationen dazu, wie es mit dem Bereich „Leistung“ in DevTools zusammenhängt, finden Sie unter Lighthouse: Optimize your website.

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.