Neu in den DevTools, Chrome 132

Sofia Emelianova
Sofia Emelianova
GitHub

Netzwerkanfragen, Quelldateien und Leistungsaufzeichnungen 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 auf die Schaltfläche KI fragen neben den folgenden Elementen klicken:

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

Schaltflächen und Menüoptionen für die KI-Funktion „Fragen an die KI“ unter „Netzwerk“, „Quellen“ und „Leistung“.

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 im Bereich KI-Unterstützung frühere Chats mit Gemini wiederherstellen und aufrufen. Klicken Sie dazu links oben auf die Schaltfläche Neuer Chat oder verwenden Sie die Schaltflächen KI fragen und die Menüoptionen im Bereich Netzwerk, auf dem Tab Quellen > Seite und auf dem Tab Leistung > Haupt.

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

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

Speicherplatz für Erweiterungen unter „Anwendung“ > „Speicher“ verwalten

Ähnlich wie beim lokalen und Sitzungsspeicher können Sie jetzt im Bereich Anwendung > Speicher Einträge für den Erweiterungsspeicher aufrufen und ändern.

Der Bereich „Erweiterungsspeicher“ wurde dem Bereich „Anwendung“ hinzugefügt.

Chromium-Problem: crbug.com/40963428

Leistungsverbesserungen

Diese Version enthält eine Reihe von Verbesserungen am Bereich Leistung.

Interaktionsphasen in Echtzeitmesswerten

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

Vorher und nachher: Interaktionen wurden in Phasen unterteilt und die Zeitangaben hinzugefügt.

Wie im Artikel Die Web Vitals-Erweiterung ist jetzt in DevTools verfügbar angekündigt, wird die Web Vitals-Erweiterung mit der Einführung dieser Funktionen eingestellt.

Chromium-Problem: crbug.com/369097528

Informationen zum Blockieren des Renderings auf dem Tab „Zusammenfassung“

Wenn Sie eine Netzwerkanfrage auswählen, die im Bereich Leistung > Netzwerk mit einem roten Dreieck gekennzeichnet ist, wird auf dem Tab Zusammenfassung neben der (neuen) Kurzinfo jetzt auch angezeigt, dass die Anfrage das Rendern blockiert.

Der Tab „Zusammenfassung“ vor und nach dem Hinzufügen von Informationen zu renderblockierenden Elementen

Unterstützung für scheduler.postTask-Ereignisse und ihre Auslöserpfeile

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

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

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

Chromium-Problem: crbug.com/40775984

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

Diese Version enthält einige Verbesserungen am Bereich Animationen und auf dem Tab Elemente > Stile.

Auf dem Tab Elemente > Stile werden jetzt neben dem Wert der animation-Eigenschaften die Schaltflächen Animation Animationsbereich aufrufen angezeigt, über die Sie die Animation ganz einfach ändern können.

Vorher und nachher: Eine Verknüpfung vom Tab „Stile“ zum Bereich „Animationen“ hinzufügen

Echtzeitaktualisierungen auf dem Tab „Berechnet“

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

Druckemulation in Sensoren berechnen

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

Der Bereich „Sensoren“ vor und nach dem Hinzufügen der Option „CPU-Druck-Emulation“

Chromium-Problem: crbug.com/362277525

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

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

Die „Vorher“- und „Nachher“-Gruppierung von JS-Objekten mit demselben Namen erfolgt auch nach Quelle.

Chromium-Problem: crbug.com/357902505

Neues Design für die Einstellungen

Um das Design der Benutzeroberfläche besser aufeinander abzustimmen, ähneln die DevTools-Einstellungen jetzt mehr den Chrome-Einstellungen. Insbesondere sind die Abschnitte jetzt visuell in „Karten“ unterteilt.

Die „Vorher“- und „Nachher“-Abschnitte werden in „Karten“ unterteilt.

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 zu finden, insbesondere in den Livemesswerten, auf dem Seitenleiste-Tab Statistiken und im Track „Layoutänderungen“. Daher wird der Bereich Leistungsstatistiken in dieser Version eingestellt und aus den DevTools entfernt.

Das DevTools-Team bedankt sich für Ihr Feedback zur Einstellung dieses Bereichs und zur allgemeinen Leistung der Fehlerbehebung. Wie immer freuen wir uns über deine Meinung und deine Perspektiven. Weiter so!

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Leistung:
    • Das unnötige Limit von drei Zeichen für Suchanfragen wurde entfernt.
    • Die Schaltfläche Home wurde hinzugefügt, über die Sie zum Bildschirm mit den Live-Messwerten zurückkehren.
    • Die zuvor nicht funktionierenden Tastenkombinationen Umschalttaste + S/W für den Zoom bei der Spurverfolgung wurden korrigiert.
  • Elemente > Stile:
    • anchor-center wurde der automatischen Vervollständigung für 341991541 hinzugefügt.
    • Behebung eines Fehlers, durch den der Flexbox-Editor für Werte mit zwei Wörtern nicht verfügbar war 341964645.
  • Netzwerk: Vorab-Ladefehler werden jetzt als gelbe Warnungen oder rote Fehler angezeigt, um anzugeben, dass die Inhaltsanzeige nicht betroffen ist 372055494.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.