Neu in den Entwicklertools, Chrome 139

Sofia Emelianova
Sofia Emelianova
GitHub

Zuverlässigere und produktivere Chrome-Entwicklertools

In dieser Version wurde der Schwerpunkt auf die Produktqualität gelegt. Dabei mussten wir uns mit einer Vielzahl bekannter Probleme auseinandersetzen, von langjährigen visuellen Fehlern, Bedenken hinsichtlich der Nutzerfreundlichkeit und Inkonsistenzen im Design bis hin zu Leistungs- und Funktionsproblemen. Insgesamt haben wir die Anzahl der offenen Probleme um 27 % reduziert.

Wir haben endlich einige Probleme behoben, die schon seit Jahren bestanden, aber auch neuere Funktionen verbessert, z. B. das Leistungsübersicht und die KI-Unterstützung. Das Ergebnis ist eine deutlich verbesserte Entwicklerfreundlichkeit.

Hinter den Kulissen haben wir viel Arbeit in die Verbesserung unserer Testabdeckung gesteckt, komplexe Testfehler untersucht, Tests auf robustere Grundlagen migriert und Fehler behoben, die wir dabei entdeckt haben. Wir konnten die Anzahl der testbezogenen Probleme um 54 % reduzieren.

Wir hoffen, dass Sie diese zahlreichen subtilen Korrekturen und Verbesserungen in verschiedenen Bereichen bemerken werden und dass Ihre täglichen Debugging- und Entwicklungs-Workflows dadurch reibungsloser, zuverlässiger und produktiver werden.

Bilder für die KI-Unterstützung für das Styling hochladen

Um Ihren Prompts zusätzlichen visuellen Kontext zu geben, können Sie jetzt nicht nur automatische Screenshots erstellen, sondern auch beliebige Bilder in Ihre Chats mit Gemini im Bereich KI-Unterstützung hochladen.

Starten Sie die Unterhaltung im Bereich Elemente, indem Sie ein DOM-Element auswählen und auf  KI fragen klicken. Das Element wird dann als Konversationskontext angegeben. Klicken Sie dann im Eingabefeld auf Bild hinzufügen.

Vorher und nachher mit Unterstützung für beliebige Bild-Uploads.

Anfrageheader der Tabelle im Netzwerkbereich hinzufügen

Im Bereich Network (Netzwerk) können Sie jetzt mit der rechten Maustaste auf einen Spaltennamen in der Tabelle „Requests“ (Anfragen) klicken und mehrere Anfrageheader auswählen, um sie als Spalten hinzuzufügen.

Die Menüs vor und nach dem Hinzufügen der Option „Anfrageheader“.

Chromium-Problem: 397481040.

Highlights der Google I/O 2025

Falls noch nicht geschehen, probieren Sie die neuen wichtigen Chrome-Entwicklertools aus, die auf der Google I/O 2025 vorgestellt wurden. Dazu gehören unter anderem:

Außerdem gibt es neue Leistungsstatistiken: Dupliziertes JavaScript und Altes JavaScript.

Sonstige Highlights

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

  • Anwendung: Es gibt jetzt ein Bestätigungsdialogfeld zum Löschen von IndexedDB-Objektspeichern, da dies eine irreversible Aktion ist (crbug.com/326987147).
  • Quellen: Für Logpoints und bedingte Haltepunkt-Badges neben Codezeilen wird jetzt beim Hovern eine Kurzinfo mit der entsprechenden Log-Nachricht oder Bedingung angezeigt (crbug.com/40266230).

  • Leistung:

    • Der Insight Layout-Shift-Verursacher enthält jetzt Links zu Bildern ohne Größenangabe (crbug.com/416449602).
    • Der Insight LCP-Anfrageerkennung zeigt jetzt die Verzögerung beim Laden von Bildern nach dem frühesten Startpunkt an.
    • Drosselung: Das veraltete Format der Drosselungseinstellungen, die einige Nutzer lokal gespeichert hatten, wurde korrigiert.
    • Ereignisprotokoll: Das Filtern wurde beschleunigt (crbug.com/40783421).

  • Animationen: Die Vorschau-Screenshots wurden eingestellt, da das Klicken zum Aufrufen der Vorschau einer Animationsgruppe eine ähnliche und bessere Nutzererfahrung bietet (crbug.com/330179643).

  • Barrierefreiheit:

    • Der Seitenleiste Quellen > DOM-Haltepunkte wurden, sofern vorhanden, aria-Labels hinzugefügt.
    • Die Tastaturnavigation mit Umschalttaste + Tabulatortaste im Textfeld Live-Ausdruck in der Konsole wurde korrigiert (crbug.com/408398435, crbug.com/420344137).
    • Die Einstellungen unterstützen jetzt Tastenkombinationen zum Ein-/Auszoomen und Zurücksetzen des Zooms: Cmd/Strg + +/-/0 (crbug.com/41484555).
    • Elemente > Stile: CSS-Hinweis- und Warnsymbole (crbug.com/40706851) und Winkel-Uhr können jetzt per Tastatur fokussiert werden (crbug.com/401212624, crbug.com/401213524).

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.