Neu in den DevTools, Chrome 132

Sofia Emelianova
Sofia Emelianova
GitHub

Netzwerkanfragen, Quelldateien und Leistungsanalysen mit Gemini debuggen

Neben CSS-Stilen können Sie jetzt auch mit Gemini über Netzwerkanfragen, Quelldateien und Leistungstraces chatten.

Ähnlich wie beim Kontextmenü im Bereich Elemente können Sie den Bereich KI-Unterstützung öffnen und den Chat mit Gemini starten, indem Sie entweder mit der rechten Maustaste klicken und KI fragen auswählen oder neben den folgenden Elementen auf die Schaltfläche KI fragen klicken:

  • Eine Netzwerkanfrage im Bereich Netzwerk.
  • Eine Datei auf dem Tab Quellen > Seite.
  • Eine Aktivität im Haupt-Track unter Leistung.

Schaltflächen und Menüoptionen für „Ask AI“ in „Network“, „Sources“ und „Performance“

Gemini berücksichtigt den Kontext der ausgewählten Anfrage, Datei oder Aktivität.

Das DevTools-Team freut sich auf Ihr Feedback unter crbug.com/364805393.

KI-Chatprotokoll

Sie können jetzt frühere Chats mit Gemini im Bereich KI-Unterstützung wiederherstellen und ansehen. Klicken Sie dazu links oben im Bereich auf die Schaltfläche Neuer Chat oder verwenden Sie die Schaltflächen und Menüoptionen KI fragen im Bereich Netzwerk, auf dem Tab Quellen > Seite und im Bereich Leistung > Haupt.

Wenn Sie einen Ihrer vorherigen Chats aufrufen möchten, wählen Sie den entsprechenden Prompt im Drop-down-Menü unter der Schaltfläche Verlauf aus. Im Bereich KI-Unterstützung wird Ihr Chatverlauf gespeichert, solange die Entwicklertools geöffnet sind.

Der KI-Chatverlauf wird in einem Drop-down-Menü unter der Schaltfläche „Verlauf“ angezeigt.

Erweiterungsspeicher unter „Anwendung“ > „Speicher“ verwalten

Ähnlich wie bei lokalem Speicher und Sitzungsspeicher können Sie jetzt Speichereinträge für Erweiterungen ansehen und ändern. Gehen Sie dazu zum Bereich Anwendung > Speicher.

Vor und nach dem Hinzufügen des Abschnitts „Speicher für Erweiterungen“ zum Anwendungsbereich.

Chromium-Problem: crbug.com/40963428.

Leistungsverbesserungen

Diese Version enthält eine Reihe von Verbesserungen für den Bereich Leistung.

Interaktionsphasen in Live-Messwerten

Sie können jetzt Interaktionen in den Live-Leistungsmesswerten maximieren, um eine Aufschlüsselung der Phasen und ihrer Zeitangaben zu sehen.

Die Zeit vor und nach dem Hinzufügen einer Aufschlüsselung von Phasen und deren Zeitangaben zu Interaktionen.

Wie im Blogpost Web Vitals-Erweiterung jetzt in den DevTools angekündigt, wird die Web Vitals-Erweiterung mit der Veröffentlichung dieser Funktionen nicht mehr unterstützt.

Chromium-Problem: crbug.com/369097528.

Informationen zum Blockieren des Renderings auf dem Tab „Zusammenfassung“

Wenn Sie im Bereich Leistung > Netzwerk eine mit einem roten Dreieck gekennzeichnete Netzwerkanfrage auswählen, wird auf dem Tab Zusammenfassung zusätzlich zum (überarbeiteten) Kurzinfo jetzt auch angezeigt, dass die Anfrage das Rendern blockiert.

Die Zusammenfassungsansicht vor und nach dem Hinzufügen von Informationen zu renderblockierenden Ressourcen.

Unterstützung für scheduler.postTask-Ereignisse und ihre Initiatorpfeile

Auf dem Tab Leistung > Haupt-Track werden jetzt scheduler.postTask()-Ereignisse und die folgenden Initiatorpfeile angezeigt:

  • Schedule postTask -> Fire postTask
  • Schedule postTask -> Abort postTask

Die beiden Bilder zeigen die Benutzeroberfläche vor und nach dem Hinzufügen von Unterstützung für scheduler.postTask-Ereignisse und die entsprechenden Initiatorpfeile.

Chromium-Problem: crbug.com/40775984.

Verbesserungen am Bereich „Animationen“ und am Tab „Elemente“ > „Stile“

In dieser Version gibt es einige Verbesserungen am Bereich Animationen und am Tab Elemente > Stile.

Auf dem Tab Elemente > Stile werden jetzt Animations-Symbole Zum Animationsfenster springen neben dem Wert von animation-Eigenschaften angezeigt. So können Sie Animationen ganz einfach prüfen.

Vor und nach dem Hinzufügen eines Links vom Tab „Stile“ zum Bereich „Animationen“.

Echtzeitaktualisierungen auf dem Tab „Berechnet“

Auf dem Tab Elemente > Berechnet werden die berechneten Werte jetzt in Echtzeit aktualisiert, wenn sie z. B. durch Animationen aktualisiert werden.

Emulation des Rechenaufwands in „Sensors“

Im Bereich Sensoren können Sie jetzt den CPU-Druck von Nominal, Fair, Serious und Critical emulieren.

Die Option zum Emulieren von CPU-Belastung wurde dem Bereich „Sensoren“ hinzugefügt.

Chromium-Problem: crbug.com/362277525.

JS-Objekte mit demselben Namen, nach Quelle gruppiert, im Bereich „Arbeitsspeicher“

Im Bereich Arbeitsspeicher wird jetzt zwischen JS-Objekten mit demselben Namen unterschieden, die aus verschiedenen Quellen stammen, und sie werden entsprechend gruppiert.

Vorher und nachher werden JS-Objekte mit demselben Namen auch nach Quelle gruppiert.

Chromium-Problem: crbug.com/357902505.

Neues Design für Einstellungen

Um das Design der Benutzeroberfläche besser anzugleichen, sehen die Einstellungen der Entwicklertools jetzt den Chrome-Einstellungen ähnlicher. Insbesondere sind die Abschnitte jetzt visuell in „Karten“ unterteilt.

Die Abschnitte vor und nach der Aufteilung in „Karten“.

Der Bereich „Leistungsstatistiken“ wird nicht mehr unterstützt und aus den Entwicklertools entfernt

Alle wichtigen und nützlichen Funktionen aus dem Bereich Leistungsstatistiken sind jetzt im Bereich Leistung verfügbar, insbesondere in den Livestatistiken, auf dem Tab Statistiken in der Seitenleiste und im Track für Layoutverschiebungen. In dieser Version wird der Bereich Leistungsstatistiken in den Entwicklertools eingestellt und entfernt.

Das DevTools-Team ist dankbar für das Feedback, das Sie zur Einstellung dieses Bereichs und zur allgemeinen Fehlerbehebung bei der Leistung gegeben haben. Wie immer freuen wir uns über Ihr Feedback. Weiter so!

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Leistung:
    • Ein unnötiges Limit von 3 Zeichen für Suchanfragen wurde entfernt.
    • Die Schaltfläche Startseite wurde hinzugefügt. Damit gelangen Sie zurück zum Bildschirm mit den Live-Messwerten.
    • Die zuvor fehlerhaften Tastenkombinationen zum Zoomen von Shift + S/W-Traces wurden korrigiert.
  • Elemente > Stile:
    • anchor-center wurde zur automatischen Vervollständigung 341991541 hinzugefügt.
    • Ein Fehler wurde behoben, durch den der Flexbox-Editor für Werte mit zwei Wörtern nicht verfügbar war 341964645.
  • Netzwerk: Fehler beim Prefetching werden jetzt als gelbe Warnungen anstelle von roten Fehlern angezeigt, um darauf hinzuweisen, dass die Inhaltsanzeige nicht beeinträchtigt ist 372055494.

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 DevTools behandelt wurden.