Neu in den DevTools in Chrome 141

Sofia Emelianova
Sofia Emelianova
GitHub

Chrome-Entwicklertools (MCP) für Ihren KI-Agenten

Sie können sich jetzt eine Vorschau des neuen Chrome-Entwicklertools-MCP-Servers (Model Context Protocol) ansehen. Damit wird die Leistungsfähigkeit der Chrome-Entwicklertools auf KI-basierte Programmierassistenten übertragen.

Bisher konnten Coding-Agents nicht sehen, was der von ihnen generierte Code tatsächlich bewirkt, wenn er im Browser ausgeführt wird. Der Chrome DevTools-MCP-Server ändert dies. KI-Codierungsassistenten können Webseiten direkt in Chrome debuggen und von den Debugging-Funktionen und Leistungsstatistiken der Entwicklertools profitieren. Dadurch wird die Genauigkeit beim Erkennen und Beheben von Problemen verbessert.

So funktioniert es:

Weitere Informationen finden Sie unter Chrome DevTools (MCP) for your AI agent.

Netzwerkabhängigkeitsbaum mit Gemini debuggen

Der Insight Leistung > Statistiken > Baum der Netzwerkabhängigkeiten enthält jetzt die Schaltfläche Mit KI debuggen, über die Sie zum Bereich KI-Unterstützung gelangen. Dort können Sie den Baum mit Gemini besprechen und debuggen.

Die Ansicht vor und nach dem Hinzufügen der Schaltfläche „Mit KI debuggen“ zum Insight „Baum der Netzwerkabhängigkeiten“.

Chats mit Gemini exportieren

Sie können Ihren aktuellen Chat mit Gemini jetzt exportieren oder die Antwort in die Zwischenablage kopieren. Klicken Sie dazu in der oberen Aktionsleiste auf die Schaltfläche Unterhaltung exportieren oder im Chat unter der Nachricht von Gemini auf Antwort kopieren.

Vor und nach dem Hinzufügen der Schaltflächen „Exportieren“ und „Kopieren“ zur KI-Unterstützung.

Gespeicherte Track-Konfiguration im Bereich „Leistung“

Wenn Sie einen aufgezeichneten Track im Bereich Leistung konfigurieren, speichert DevTools jetzt Ihre Konfiguration und wendet sie an, wenn Sie sie wieder importieren oder einen neuen Track aufzeichnen.

IP-geschützte Netzwerkanfragen filtern

Im Bereich Netzwerk können Sie jetzt Anfragen filtern, die an IP‑Schutz-Proxys gesendet wurden.

Die Ansicht vor und nach dem Hinzufügen des Filters „IP-geschützte Anfragen“ zum Bereich „Netzwerk“.

„Elemente“ > Tab „Layout“ – Unterstützung für Mauerwerk-Layout hinzugefügt

Sie können das Mauerwerk-Layout jetzt auf dem Tab Elemente > Stile untersuchen.

Das Mauerwerk-Layout ist eine Layoutmethode, bei der für eine Achse ein typisches strenges Rasterlayout verwendet wird, meistens Spalten, und für die andere ein Mauerwerk-Layout.

Das Bild zeigt die Ansicht vor und nach dem Hinzufügen der Unterstützung für das Mauerwerk-Layout zu „Elemente – Layout“.

Lighthouse 12.8.2

Im Bereich Lighthouse wird jetzt Lighthouse 12.8.2 ausgeführt.

In dieser Version werden gefundene Probleme mit benutzerdefinierten CSS-Properties in separate Fehlermeldungen aufgeteilt.

Vollständige Liste der Änderungen

Die Grundlagen zur Verwendung des Lighthouse-Bereichs in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 40543651.

Sonstige Highlights

Im Folgenden finden Sie einige der vielen wichtigen Fehlerbehebungen und Verbesserungen in dieser Version:

  • Leistung: RequestIdle-Callback-Ereignisse enthalten jetzt die Property timeout (crbug.com/441679219).
  • Verfügbarkeit. Screenreader lesen jetzt Folgendes vor:
  • Netzwerk: Wenn Sie mit der rechten Maustaste auf ein Netzwerkprotokollelement klicken, wird es ausgewählt (crbug.com/368510578).

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.