Neue Funktionen in den Entwicklertools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Finde das Easter Egg

Zur Feier des diesjährigen Aprilscherzes hat das DevTools-Team irgendwo in den Entwicklertools 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.

Fokussierte Seite unter „Elemente“ emulieren > Stile

Die Elemente > Auf dem Tab 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, klicken Sie auf Elemente > Auf dem Tab Stile können Sie 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ängentool wieder zu aktivieren, öffne die Einstellungen und Einstellungen > Tests > check_box CSS <length> verwerfen Authoring-Tool auf dem Tab „Stile“.

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 Arbeitsablauf 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 vereinfachen, können Sie im Flame-Diagramm auf der Seite Leistung > Im Hauptspur wird 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 im Werbenetzwerk löschen > Tab „EventStream“

Das Netzwerk > Auf dem Tab EventStream gilt 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“ > Kekse

Das Netzwerk > Auf dem Tab Cookies werden jetzt Kurzinfos mit Ausnahmegründen neben Cookies angezeigt, die andernfalls 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

Die Quellen > Im Abschnitt Haltepunkte finden Sie nun wieder die Optionen Aktivieren und Alle Haltepunkte deaktivieren im Drop-down-Menü. Bisher wurden diese Optionen bei der Neugestaltung der Haltepunkte weggelassen.

Klicken Sie unter Quellen mit der rechten Maustaste auf einen Haltepunkt, um alle Haltepunkte zu aktivieren oder zu deaktivieren. Haltepunkte und wählen Sie die entsprechende Option aus.

Der Vorher und nach dem Wiederherstellen der Optionen zum Aktivieren und Deaktivieren.

Chromium-Problem: 1522037.

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

Die Entwicklertools für Node.js zeigen jetzt geladene Skripts im Navigationsbaum unter Quellen > Skripts:

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 keine Tests dem Filter in den Einstellungen Einstellungen entsprechen > Tests:
    • Die Aktionsbestätigung beim Entfernen, Bestätigen oder Wiederherstellen einer Verknüpfung unter Einstellungen Einstellungen > Verknüpfungen:
  • 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: Mehrere Anzeigeprobleme mit unterschiedlichen Formaten und Codierungen (1523128, 1509336, 1523128, 41481944, 1509336) wurden behoben.

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
  • 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