Neuerungen in den Entwicklertools (Chrome 93)

Jecelyn Yeen

Bearbeitbare CSS-Containerabfragen im Bereich „Stile“

Sie können jetzt CSS-Containerabfragen im Bereich Stile ansehen und bearbeiten.

Containerabfragen bieten einen wesentlich dynamischeren Ansatz für responsives Webdesign. Die @container-at-Regel funktioniert ähnlich wie eine Medienabfrage mit @media. Anstatt jedoch Informationen zum Darstellungsbereich und User-Agent abzurufen, fragt @container den Ancestor-Container ab, der bestimmte Kriterien erfüllt.

Wenn Sie im Steuerfeld Elemente auf ein DOM-Element mit der At-Regel @container klicken, werden in den Entwicklertools jetzt die @container-Informationen im Bereich Stile angezeigt. Klicken Sie darauf, um die Größe zu bearbeiten. Im Bereich Styles werden auch die entsprechenden Containerinformationen angezeigt. Bewegen Sie den Mauszeiger darauf, um das Containerelement auf der Seite hervorzuheben, und prüfen Sie die Containergröße. Klicken Sie darauf, um das Containerelement auszuwählen.

Die Funktion für Containerabfragen befindet sich derzeit in der Testphase. Aktivieren Sie zum Testen das Flag #enable-container-queries unter chrome://flags.

Bearbeitbare CSS-Containerabfragen im Bereich „Stile“

Chromium-Problem: 1146422

Vorschau des Websets im Steuerfeld „Netzwerk“

Web Bundle ist ein Dateiformat, mit dem eine oder mehrere HTTP-Ressourcen in einer einzigen Datei kapseln können. Sie können sich den Inhalt des Web-Sets jetzt im Bereich Netzwerk als Vorschau ansehen.

Die Web Bundle-Funktion befindet sich derzeit in der Testphase. Aktivieren Sie das Flag #enable-experimental-web-platform-features unter chrome://flags, um es zu testen.

Web Bundle-Vorschau

Chromium-Problem: 1182537

Attribution Reporting API – Fehlerbehebung

Attribution Reporting API-Fehler werden jetzt auf dem Tab Probleme gemeldet.

Attribution Reporting ist eine neue API, mit der Sie ohne Verwendung von websiteübergreifenden Kennungen messen können, wenn eine Nutzeraktion wie ein Anzeigenklick oder ein Aufruf zu einer Conversion führt.

Attribution Reporting API-Fehler auf dem Tab „Probleme“

Chromium-Problem: 1190735

Verbesserte Stringbehandlung in der Console

Mit dem neuen Kontextmenü in der Console können Sie beliebige Strings als Inhalt, JavaScript- oder JSON-Literal kopieren.

Neues Kontextmenü in der Console

In Chrome 90 wurde die Console von den Entwicklertools so aktualisiert, dass Stringausgaben immer als gültige JSON-Literale formatiert werden. Wir haben von Entwicklern das Feedback erhalten, dass diese Änderung verwirrend sein könnte. Manche sind der Meinung, dass die Menge an Escape-Sequenzen zu viel ist und die Ausgabe unlesbar macht.

Die Konsole formatiert jetzt Stringausgaben als gültige JavaScript-Literale und bietet Ihnen außerdem drei Optionen zum Kopieren von Strings. Mit der Option Als JavaScript-Literal kopieren werden die entsprechenden Sonderzeichen maskiert und der String abhängig vom Stringinhalt entweder in einfache Anführungszeichen, doppelte Anführungszeichen oder Backticks gesetzt. Mit der Option Inhalt des Strings kopieren werden stattdessen die Rohstringinhalte (einschließlich neuer Zeilen und anderer Sonderzeichen) wortgetreu in die Zwischenablage kopiert. Mit Als JSON-Literal kopieren wird der String als gültiges JSON-Literal formatiert und in die Zwischenablage kopiert.

Chromium-Problem: 1208389

Verbessertes CORS-Debugging

CORS-bezogene TypeErrors in der Konsole sind jetzt mit dem Steuerfeld „Netzwerk“ und dem Tab „Probleme“ verknüpft.

Klicken Sie auf die beiden neuen Symbole neben der CORS-bezogenen Fehlermeldung, um die Netzwerkanfrage anzuzeigen oder die Fehlermeldung weiter zu verstehen und mögliche Lösungen auf der Registerkarte „Probleme“ zu erhalten.

Symbole neben der CORS-bezogenen Fehlermeldung

Chromium-Problem: 1213393

Lighthouse 8.1

Im Bereich Lighthouse wird jetzt Lighthouse 8.1 ausgeführt.

Leuchtturm

Wenn auf Ihrer Website Quellkarten in Lighthouse verfügbar sind, suchen Sie nach der Schaltfläche Strukturkarte ansehen. Sie erhalten dann eine Aufschlüsselung des gesendeten JavaScript-Codes. Sie können beim Laden nach Größe und Abdeckung filtern.

Der Bericht enthält auch einen neuen Messwertfilter (siehe Filter Relevante Audits anzeigen für im Screenshot). Wählen Sie einen Messwert aus, um sich auf die Optimierungsmöglichkeiten und Diagnosen zu konzentrieren, die für die Verbesserung dieses Messwerts am relevantesten sind.

Bei der Leistungskategorie wurden mehrere Bewertungsänderungen vorgenommen, um sie an andere Leistungstools anzupassen und den Zustand des Webs besser abzubilden.

Eine vollständige Liste der Änderungen finden Sie in den Versionshinweisen.

Chromium-Problem: 772558

Neue Hinweis-URL im Manifestbereich anzeigen

Im Manifestbereich wird jetzt die URL der neuen Notiz angezeigt.

Derzeit können unter ChromeOS (CrOS) Chrome-Apps und Android-Apps, die eine „neue Notizfunktion“ angeben, in den Einstellungen für Eingabestifte als Notizen-App ausgewählt werden. Diese wird angezeigt, wenn das CrOS-Gerät mit einem Eingabestift verwendet wurde. Wenn die App als Notizen-App ausgewählt ist, kann sie über die Schaltfläche „Notiz erstellen“ der Eingabestiftpalette gestartet werden. Im Rahmen der Bemühungen, Web-Apps entsprechende Funktionen hinzuzufügen, wurde das Feld new-note-url im App-Manifest hinzugefügt.

Neue Hinweis-URL im Manifestbereich

Chromium-Problem: 1185678

Korrigierte CSS-Abgleichselektoren

Die Entwicklertools haben die CSS-Abgleichselektoren korrigiert. In der letzten Version funktionierte das nicht.

Die durch Kommas getrennten Selektoren im Bereich Stile sind unterschiedlich eingefärbt, je nachdem, ob sie mit dem ausgewählten DOM-Knoten übereinstimmen:

  • Ein Teil ohne Übereinstimmung wird hellgrau dargestellt.
  • Ein übereinstimmender Selektorteil ist schwarz dargestellt.

CSS-Selektoren für Übereinstimmungen

Chromium-Problem: 1219153

Quelltextformatierungs-JSON-Antworten im Bereich „Network“

Sie können jetzt JSON-Antworten im Bereich Netzwerk optimiert drucken.

Öffnen Sie im Steuerfeld Netzwerk eine JSON-Antwort und klicken Sie auf das Symbol {}, um die Ergebnisausgabe zu optimieren.

Quelltextformatierungs-JSON-Antworten im Bereich „Network“

Chromium-Bug: 998674

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