Neu in den DevTools, Chrome 133

Sofia Emelianova
Sofia Emelianova
GitHub

Dauerhaftes KI-Chatprotokoll

Im Bereich KI-Unterstützung wird der Chatverlauf jetzt lokal über Sitzungen hinweg gespeichert. So können Sie sich Ihre bisherigen Unterhaltungen mit Gemini auch nach dem Neuladen der Entwicklertools oder von Chrome ansehen.

Verbesserungen am Bereich „Leistung“

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

Statistik zur Bildbereitstellung

Auf dem Tab Leistung > Statistiken können jetzt Bilder hervorgehoben werden, deren Dateigröße Sie optimieren können. Klicken Sie auf ein Bild in der Statistik, um es im Network-Track hervorzuheben.

Der Bereich „Leistung“ mit hervorgehobenem Einblick zur Bildauslieferung.

Weitere Informationen zur Optimierung der Bildbereitstellung finden Sie unter Bilder effizient codieren.

Klassische und moderne Tastaturnavigation

Im Bereich Leistung können Sie jetzt die gewünschte Art der Tastaturnavigation auswählen. Die wichtigsten Unterschiede sind:

  • Klassisch: Zoomen Sie mit dem Mausrad (Touchpad nach oben oder unten) und führen Sie einen vertikalen Bildlauf mit der Umschalttaste + Mausrad durch.
  • Modern: Vertikales Scrollen mit dem Mausrad, horizontales Scrollen mit Umschalt + Mausrad und Zoomen mit Befehlstaste/Strg + Mausrad.

Wenn Sie den gewünschten Stil auswählen möchten, klicken Sie rechts oben im Bereich auf Tastenkürzel anzeigen und wählen Sie Klassisch oder Modern aus. Im Dialogfeld „Tastenkürzel“ finden Sie auch eine Übersicht der verfügbaren Tastenkürzel.

Das Dialogfeld „Tastenkürzel“ mit den verfügbaren Tastenkürzeln für den Bereich „Leistung“.

Irrelevante Scripts im Flammen-Chart ignorieren

Damit Sie sich besser auf Ihren Code konzentrieren können, haben Sie jetzt die Möglichkeit, irrelevante Skripts direkt im Bereich Leistung zur Ignorierliste hinzuzufügen. Im Bereich werden übermäßige Verschachtelungen automatisch minimiert.

Wenn Sie Skripts zur Ignorierliste hinzufügen möchten, klicken Sie in der oberen Aktionsleiste auf Dialogfeld für die Einstellung der Ignorierliste anzeigen und geben Sie einen regulären Ausdruck in das Eingabefeld ein. Das Flammen-Diagramm wendet die neue Regel während der Eingabe an.

DevTools speichert die Regeln für die Ignorierliste, die Sie in den Einstellungen > Ignorierliste hinzufügen. Sie können sie im Dialogfeld nach Bedarf aktivieren und deaktivieren.

Zeitachsenmarkierung und Bereichshervorhebung beim Bewegen des Mauszeigers

Damit Sie den Leistungs-Trace besser nachvollziehen können, bietet der Bereich Leistung jetzt folgende Funktionen:

  • Zeigt eine vertikale Markierung an, die sich über den gesamten Leistungs-Trace erstreckt, wenn Sie den Mauszeiger auf die Zeitachse bewegen.
  • Hebt einen Bereich auf der Zeitachse hervor, wenn Sie den Mauszeiger auf Elemente im Haupttrack bewegen.

Empfohlene Einstellungen für die Drosselung

Im Bereich Leistung werden jetzt sowohl in den Live-Messwerten als auch in den entsprechenden Drop-down-Menüs Aufnahmeeinstellungen Drosselungseinstellungen empfohlen.

Die Einstellungen vor und nach dem Hinzufügen von Empfehlungen zur Drosselung zu den Einstellungsmenüs.

Die empfohlene CPU-Drosselung ist (derzeit) die am häufigsten verwendete 4x slowdown und die Netzwerkempfehlung basiert auf Daten aus dem Chrome UX Report, sofern sie in Live-Messwerten aktiviert ist.

Außerdem werden Sie im Bereich Leistung jetzt neben jedem Trace im Drop-down-Menü Letzte Sitzungen in der Aktionsleiste an die verwendeten Drosselungseinstellungen erinnert.

Zeitmarkierungen in einem Overlay

Die Zeitmarkierungen wurden vom Zeitachse-Track an das Ende des Traces verschoben. Sie werden jetzt über allen Tracks eingeblendet und sind auch dann sichtbar, wenn der Zeitachse-Track ausgeblendet ist.

Vor und nach dem Verschieben von Markierungen an das untere Ende des Traces.

Im Zeitachse-Track werden Ihre benutzerdefinierten mark()- und measure()-Aufrufe beibehalten.

Stacktraces von JavaScript-Aufrufen in der Zusammenfassung

Auf dem Tab Leistung > Zusammenfassung sehen Sie jetzt Stacktraces von JavaScript-Aufrufen, einschließlich asynchroner Aufrufe.

Vor und nach dem Hinzufügen von Stacktraces zum Tab „Zusammenfassung“.

Kennzeicheneinstellungen wurden in Elements ins Menü verschoben

Die Einstellungen für Badges im Bereich Elemente wurden von einer standardmäßig ausgeblendeten Aktionsleiste in das entsprechende Kontextmenü verschoben.

Vor und nach der Verschiebung der Einstellungen für Badges ins Menü.

Neuer Bereich „Das ist neu“

Der Bereich Neues hat ein neues Design erhalten, das dem von Chrome ähnelt.

Das alte und neue Design des Bereichs „Neuigkeiten“.

Chromium-Problem: 325441858.

Lighthouse 12.3.0

Im Bereich Lighthouse wird jetzt Lighthouse 12.3.0 ausgeführt.

Dieses Update enthält unter anderem neue Prüfungen, mit denen die richtige Isolation des Ursprungs mit COOP und eine starke HSTS-Richtlinie geprüft werden. 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

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Quellen: Wenn der Debugger pausiert ist und nach der Pause erstellt wird, wird nicht mehr unerwartet zum Service Worker-Kontext gewechselt (373893057).
  • Leistung:
    • Wenn Sie den Mauszeiger auf Skripts bewegen, werden in den Kurzinfos im Flammen-Diagramm jetzt URLs angezeigt, sofern vorhanden (368541957).
    • Zusammenfassung: Das Kreisdiagramm wird durch eine Balkendarstellung ersetzt.
    • Das Kästchen Erweiterungsdaten in den Aufnahmeeinstellungen wurde in Benutzerdefinierte Tracks anzeigen umbenannt.
    • Der Tab Statistiken enthält jetzt den Abschnitt Bestandene Statistiken (N), der standardmäßig minimiert ist.
  • Anwendung > Speicher: Sie können Speichereinträge mit leeren Schlüsseln erstellen, da sie technisch gültig sind (373703285).
  • Der Gerätemodus ist jetzt für chrome://-Seiten deaktiviert (40186276).
  • Netzwerk:
    • Wenn die entsprechende Einstellung aktiviert ist, wird durch einmaliges Klicken auf HAR exportieren ein Menü mit zwei Optionen geöffnet (bereinigt und mit sensiblen Daten). Bisher wurde das Menü durch langes Klicken geöffnet (378076279).
    • Als cURL kopieren verwendet jetzt das Attribut „-b“, um Cookies zu umgehen und die Lesbarkeit zu verbessern, anstelle von -H 'cookie:...' (40791742).
  • Bedienungshilfen: Tabs in Bereichen können jetzt über ein Kontextmenü nach links oder rechts verschoben werden (383164782).
  • Blockierung der Netzwerkanfrage: Diese Einstellung im Kontextmenü ist jetzt mit dem entsprechenden Kästchen (378058733) synchronisiert.

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.