Neue Funktionen in den Entwicklertools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Finde das Easter Egg

Zur Feier des diesjährigen 1. April hat das DevTools-Team in den Entwicklertools irgendwo ein Easter Egg versteckt.

Halte nach einem farbenfrohen 💫-Emoji Ausschau, um es zu finden.

Aktualisierungen des Steuerfelds „Elemente“

In dieser Version wurden mehrere Aktualisierungen für den Bereich Elemente vorgenommen.

Unter „Elemente“ > „Stile“ eine fokussierte Seite emulieren

Auf dem Tab Elemente > Stile finden Sie jetzt unter der Schaltfläche Elementstatus umschalten (:hov) die Option check_box Fokussierte Seite emulieren. Bisher war diese Option nur im Bereich Rendering zu finden.

Wenn Sie den Fokus von der Seite auf die Entwicklertools verlegen, werden einige Overlay-Elemente automatisch ausgeblendet, wenn sie durch den Fokus ausgelöst werden. z. B. Drop-down-Listen, Menüs oder Datumsauswahl. Mit der Option Seite im Fokus emulieren können Sie Fehler an einem solchen Element beheben, so als wäre es im Fokus.

Der Vorher und Nachher emulieren einer Seite im Fokus auf dem Tab „Stile“.

Chromium-Problem: 1468393.

Farbauswahl, Winkeluhr und Easing-Editor in var()-Fallbacks

Um die CSS-Bearbeitung zu vereinfachen, können Sie auf dem Tab Elemente > Stile jetzt in var()-Fallbacks die Farbauswahl, die Winkeluhr und den Easing-Editor verwenden.

Die Tools „Color Picker“, „Winkeluhr“ und „Easing Editor“ vor und nach dem Rendern in var()-Fallbacks.

Chromium-Problem: 1520417.

Tool „CSS-Länge“ wurde eingestellt

Das Autorentool für CSS-Längen wurde eingestellt, da es den Workflow verlangsamt und keinen großen Mehrwert bietet.

Es ist nicht mehr möglich, den Wert durch Ziehen anzupassen oder einen Einheitentyp aus dem Drop-down-Menü auszuwählen. Doppelklicken Sie stattdessen auf den Wert und geben Sie einen neuen ein.

Um das Längen-Tool wieder zu aktivieren, deaktivieren Sie Einstellungen Einstellungen > Tests > check_box CSS <length>-Authoring-Tool auf dem Tab "Stile" einstellen.

Wenn du dieses Tool weiterhin verwenden möchtest, würde das Entwicklertools-Team gerne deine Meinung hören und wissen, wie dir das Tool für die Länge deinen Workflow hilft. Du kannst uns gerne unter crbug/1522657 Feedback geben.

Der Einstellungstest ist deaktiviert.

Pop-over für das ausgewählte Suchergebnis unter „Leistung“ > „Haupt-Track“

Um die Suche zu erleichtern, wird im Flame-Diagramm im Track Leistung > Haupt-Track jetzt ein Pop-over über dem entsprechenden Ereignis angezeigt, wenn Sie die Suchergebnisse durchblättern.

Vorher- und Nachher-Anzeige eines Pop-overs über dem ausgewählten Suchergebnis.

Chromium-Problem: 1523279.

Updates des Netzwerkbereichs

Mit dieser Version wurden einige Änderungen am Bereich Netzwerk vorgenommen.

Schaltfläche und Suchfilter auf dem Tab „Network“ > „EventStream“ löschen

Auf dem Tab Netzwerk > EventStream sehen Sie Folgendes:

  • Eine Schaltfläche zum Blockieren Löschen, mit der erfasste Ereignisse aus der Tabelle gelöscht werden.
  • Ein Suchfilter, der reguläre Ausdrücke versteht.

Vorher und nach dem Hinzufügen der Schaltfläche „Löschen“ und des Suchfilters.

Das DevTools-Team möchte sich bei Charles Vazac für die Einführung dieser Funktion bedanken.

Darüber hinaus werden auf dem Tab EventStream jetzt auch Ereignisse erfasst, die Server über Fetch/XHR senden, nicht nur die EventSource API. Probieren Sie es auf dieser Demoseite aus.

Chromium-Problem: 1488863, 40659493.

Kurzinfos mit Ausnahmegründen für Drittanbieter-Cookies unter „Netzwerk“ > „Cookies“

Auf dem Tab Netzwerk > Cookies werden jetzt Kurzinfos mit Ausnahmegründen neben Cookies angezeigt, die sonst durch die Einstellung von Drittanbieter-Cookies blockiert worden wären.

Die Vorher- und Nachher-Anzeige einer Kurzinfo mit einem Ausnahmegrund für ein Drittanbieter-Cookie.

Drittanbieter-Cookies können aus folgenden Gründen zugelassen sein:

Chromium-Problem: 41491846.

Alle Haltepunkte in Quellen aktivieren und deaktivieren

Im Abschnitt Quellen > Haltepunkte sind die Optionen Aktivieren und Alle Haltepunkte deaktivieren wieder im Drop-down-Menü verfügbar. Bisher wurden diese Optionen bei der Neugestaltung der Haltepunkte weggelassen.

Wenn Sie alle Haltepunkte aktivieren oder deaktivieren möchten, klicken Sie unter Quellen > Haltepunkte mit der rechten Maustaste auf einen Haltepunkt und wählen Sie die entsprechende Option aus.

Der Vorher und nach dem Zurückkehren der Optionen zum Aktivieren und Deaktivieren.

Chromium-Problem: 1522037.

Geladene Skripts in den Entwicklertools für Node.js ansehen

In den Entwicklertools für Node.js werden jetzt geladene Skripts im Navigationsbaum unter Quellen > Skripts angezeigt.

Der Tab „Scripts“ (Vorher und nach dem Hinzufügen) mit einer Baumstruktur geladener Scripts.

Chromium-Problem: 1518364.

Lighthouse 11.5.0

Im Bereich Lighthouse wird jetzt Lighthouse 11.5.0 ausgeführt. Eine vollständige Liste der Änderungen finden Sie hier.

Zu den bemerkenswerten Änderungen gehört eine neue Prüfung, die die Ursachen von Layout Shifts einschätzt. Diese Prüfung ersetzt das Audit zu Layout-Shift-Elementen, in dem nur die Elemente aufgelistet wurden, die von Layout Shifts betroffen sind.

Eine neue Prüfung, die die Ursachen von Layout Shifts schätzt.

Grundlegende Informationen zur Verwendung des Bereichs Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Bedienungshilfen

In dieser Version wurden die Bedienungshilfen verbessert:

  • Screenreader informieren jetzt Folgendes:
    • Der Linktext Weitere Informationen neben den Auswahltypen im Bereich Rekorder.
    • Wenn kein Test dem Filter in den Einstellungen unter Einstellungen > Tests entspricht.
    • Die Aktionsbestätigung beim Entfernen, Bestätigen oder Wiederherstellen einer Verknüpfung unter Einstellungen Einstellungen > Verknüpfungen.
  • Die Tabelle unter Einstellungen, Einstellungen > Standorte wird jetzt korrekt als Tabelle für Bedienungshilfen gerendert.

Chromium-Probleme: 1516957, 324282443, 324467508, 324930007.

Verschiedene Highlights

Im Folgenden sind einige bemerkenswerte Fehlerbehebungen und Verbesserungen in dieser Version aufgeführt:

  • Schriftarten in den Entwicklertools wurden aktualisiert, damit sie denen von Chrome entsprechen (1523538).
  • Leistung: Die Screenshot-Anzeige beim Bewegen des Mauszeigers auf die Zeitachse wurde korrigiert (1519469).
  • Quellen: Die Zeilenhöhe im Editor wurde erhöht, um den Code besser lesbar zu machen (1523640).
  • Netzwerk > Antworten: Es wurden verschiedene Darstellungsprobleme mit unterschiedlichen Formaten und Codierungen behoben (1523128, 1509336, 1523128, 41481944, 1509336).

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59