Neue Funktionen in den Entwicklertools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Finde das Easter Egg

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

Ein farbiges 💫-Emoji findest du hier.

Aktualisierungen des Steuerfelds „Elemente“

Diese Version enthält mehrere Aktualisierungen des Steuerfelds Elemente.

Fokussierte Seite unter „Elemente“ > „Stile“ emulieren

Auf dem Tab Elemente > Stile gibt es jetzt unter der Schaltfläche Elementstatus ein-/ausblenden (:hov) die Option check_box Im Fokus stehende Seite emulieren. Bisher war diese Option nur im Steuerfeld Rendering zu finden.

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

Den vor und nach der Emulation einer fokussierten Seite 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 den Farbauswahl, die Winkeluhr und den Easing-Editor in var()-Fallbacks verwenden.

Die Tools vor und nach dem Rendern von Farbauswahl, Winkeluhr und Easing-Editor in var()-Fallbacks.

Chromium-Problem: 1520417.

Das CSS-Längentool wurde eingestellt

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

Sie können den Wert nicht mehr durch Ziehen anpassen oder einen Einheitentyp aus dem Dropdown-Menü auswählen. Doppelklicken Sie stattdessen auf den Wert und geben Sie einen neuen Wert ein.

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

Wenn du dieses Tool weiterhin verwenden möchtest, würde das DevTools-Team gern deine Meinung hören und wissen, wie es dir in deinem Workflow helfen kann. Unter crbug/1522657 können Sie uns Feedback geben.

Der Test zur Einstellung von Produkten und Funktionen ist deaktiviert.

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

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

Das Vorher-Nachher-Fenster zum Einblenden eines Pop-overs über dem ausgewählten Suchergebnis.

Chromium-Problem: 1523279.

Aktualisierungen des Netzwerkbereichs

In dieser Version wurden einige Aktualisierungen im Bereich Netzwerk vorgenommen.

Schaltfläche und Suchfilter unter „Netzwerk“ > Tab „EventStream“ löschen

Der Tab Netzwerk > EventStream erhält Folgendes:

  • Die Schaltfläche Block Löschen, mit der erfasste Ereignisse in der Tabelle gelöscht werden.
  • Ein Suchfilter, der reguläre Ausdrücke versteht.

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

Das DevTools-Team möchte Charles Vazac dafür danken, dass diese Funktion eingeführt wurde.

Außerdem werden auf dem Tab EventStream jetzt auch Ereignisse erfasst, die Server über Fetch/XHR und nicht nur über die EventSource API senden. Auf dieser Demoseite kannst du es ausprobieren.

Chromium-Problem: 1488863, 40659493.

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

Auf dem Tab Netzwerk > Cookies werden jetzt neben den Cookies, die durch die Einstellung von Drittanbieter-Cookies hätten blockiert werden sollen, jetzt eine Kurzinfo mit Ausnahmegründen angezeigt.

Das Datum vor und nach dem Anzeigen einer Kurzinfo mit einem Ausnahmegrund für ein Drittanbieter-Cookie.

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

Chromium-Problem: 41491846.

Alle Haltepunkte unter „Quellen“ aktivieren und deaktivieren

Im Abschnitt Quellen > Haltepunkte werden im Drop-down-Menü die Optionen Aktivieren und Alle Haltepunkte deaktivieren angezeigt. Bisher wurden diese Optionen durch die Neugestaltung der Haltepunkte ausgelassen.

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.

Die Optionen vor und nach der Rückkehr 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 vor und nach dem Hinzufügen des Tabs „Scripts“ mit einer Struktur geladener Skripts.

Chromium-Problem: 1518364.

Lighthouse 11.5.0

Im Bereich Lighthouse wird jetzt Lighthouse 11.5.0 ausgeführt. Vollständige Liste der Änderungen

Zu den wichtigsten Änderungen gehört eine neue Prüfung, bei der die Grundursachen für Layoutverschiebungen ermittelt werden. Diese Prüfung ersetzt die Prüfung der Layout-Shift-Elemente, bei der nur die Elemente aufgelistet wurden, die von Layoutverschiebungen betroffen sind.

Eine neue Prüfung, bei der die Ursachen für Layoutverschiebungen geschätzt werden.

Informationen zu den Grundlagen der Verwendung des Steuerfelds Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Bedienungshilfen

In dieser Version wurden die folgenden Verbesserungen der Bedienungshilfen vorgenommen:

  • In Screenreadern wird Folgendes angekündigt:
    • Der Linktext Weitere Informationen neben den Auswahltypen im Steuerfeld Rekorder.
    • Wenn kein Test dem Filter unter Einstellungen > 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.

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen und Verbesserungen in dieser Version:

  • Schriftarten in den Entwicklertools werden an Chrome angepasst (1523538).
  • Leistung: Die Screenshot-Anzeige beim Bewegen des Mauszeigers auf die Zeitachse (1519469) wurde korrigiert.
  • Quellen: Die Zeilenhöhe im Editor wurde erhöht, um die Lesbarkeit des Codes zu verbessern (1523640).
  • Netzwerk > Antworten: Verschiedene Anzeigeprobleme bei unterschiedlichen Formaten und Codierungen wurden behoben (1523128, 1509336, 1523128, 41481944, 1509336).

Vorschaukanäle herunterladen

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

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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 abgebrochen.

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