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 das responsive Design. Die At-Regel @container funktioniert ähnlich wie eine Medienabfrage mit @media. Statt jedoch den Darstellungsbereich und den User-Agent nach Informationen abzufragen, fragt @container den Ancestor-Container ab, der bestimmte Kriterien erfüllt.

Wenn Sie im Steuerfeld Elemente auf ein DOM-Element mit @container at-Regel klicken, zeigt DevTools jetzt die @container-Informationen im Bereich Stile an. Klicken Sie darauf, um die Größe zu bearbeiten. Im Bereich Stile werden auch die entsprechenden Containerinformationen angezeigt. Bewegen Sie den Mauszeiger darauf, um das Containerelement auf der Seite zu markieren, 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. Aktiviere die #enable-container-queries-Markierung unter chrome://flags, um sie zu testen.

Bearbeitbare CSS-Containerabfragen im Bereich „Stile“

Chromium-Problem: 1146422

Web Bundle-Vorschau im Bereich „Netzwerk“

Ein Web-Bundle ist ein Dateiformat zum Kapseln einer oder mehrerer HTTP-Ressourcen in einer einzigen Datei. Sie können sich jetzt im Bereich Netzwerk eine Vorschau des Contents des Web-Bundles ansehen.

Die Webset-Funktion befindet sich derzeit in der Testphase. Bitte aktiviere das Flag „#enable-experimental-web-platform-features“ unter „chrome://flags“, um es zu testen.

Web Bundle-Vorschau

Chromium-Problem: 1182537

Fehlerbehebung für die Attribution Reporting API

Fehler der Attribution Reporting API werden jetzt auf dem Tab Probleme angezeigt.

Attribution Reporting ist eine neue API, mit der Sie ohne websiteübergreifende Kennungen analysieren können, ob eine Nutzeraktion (z. B. ein Anzeigenklick oder ein Aufruf) zu einer Conversion führt.

Fehler bei der Attribution Reporting API auf dem Tab „Probleme“

Chromium-Problem: 1190735

Bessere Stringverarbeitung 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 haben die Entwicklertools die Console so aktualisiert, dass Stringausgaben immer als gültige JSON-Literale formatiert. Wir haben Feedback von den Entwicklern erhalten, dass diese Änderung verwirrend sein könnte. Einige sind der Meinung, dass die Anzahl der Escapezeichen zu viel ist und die Ausgabe unlesbar wird.

Die Console formatiert Stringausgaben jetzt als gültige JavaScript-Literale und bietet außerdem drei Optionen zum Kopieren von Strings. Bei der Option Als JavaScript-Literal kopieren werden die entsprechenden Sonderzeichen maskiert und der String wird je nach Stringinhalt entweder in einfache Anführungszeichen, doppelte Anführungszeichen oder Graviszeichen gesetzt. Mit Copy string content wird der Rohinhalt des Strings (einschließlich Zeilenumbruch und andere Sonderzeichen) wörtlich in die Zwischenablage kopiert. Schließlich formatiert Als JSON-Literal kopieren den String als gültiges JSON-Literal und kopiert ihn in die Zwischenablage.

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 aufzurufen oder die Fehlermeldung genauer zu verstehen und auf dem Tab „Probleme“ potenzielle Lösungen zu erhalten.

Symbole neben der CORS-bezogenen Fehlermeldung

Chromium-Problem: 1213393

Lighthouse 8.1

Im Steuerfeld Lighthouse wird jetzt Lighthouse 8.1 ausgeführt.

Leuchtturm

Wenn auf Ihrer Website Quellkarten für Lighthouse verfügbar sind, klicken Sie auf die Schaltfläche Strukturkarte ansehen. Dort sehen Sie eine Aufschlüsselung des versendeten JavaScript-Codes. Diese lässt sich beim Laden nach Größe und Abdeckung filtern.

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

Bei der Leistungskategorie wurden einige Änderungen an der Bewertung vorgenommen, um sie an andere Leistungstools anzupassen und die Situation im Web besser widerzuspiegeln.

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

Chromium-Problem: 772558

URL der neuen Notiz 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 Funktion für neue Notizen deklarieren, in den Eingabestift-Einstellungen als Notizen-App ausgewählt werden. Diese App 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. Das Hinzufügen des Felds new-note-url im App-Manifest ist Teil der Bemühungen, Web-Apps gleichwertige Funktionen hinzuzufügen.

Neue Notiz-URL im Manifestbereich

Chromium-Problem: 1185678

Selektoren für den CSS-Abgleich korrigiert

In den Entwicklertools wurden die CSS-Abgleichselektoren korrigiert. Im letzten Release funktionierte das nicht.

Die durch Kommas getrennten Auswahlelemente im Bereich Stile werden unterschiedlich farbig dargestellt, je nachdem, ob sie mit dem ausgewählten DOM-Knoten übereinstimmen:

  • Ein nicht übereinstimmender Teil wird hellgrau dargestellt.
  • Ein übereinstimmender Selektorabschnitt wird in Schwarz dargestellt.

CSS-Abgleich-Selektoren

Chromium-Problem: 1219153

Ansprechende JSON-Antworten im Bereich „Netzwerk“

Sie können JSON-Antworten jetzt im Bereich Network (Netzwerk) drucken.

Öffnen Sie im Bereich Netzwerk eine JSON-Antwort und klicken Sie auf das Symbol {}, um die Optik zu drucken.

Ansprechende JSON-Antworten im Bereich „Netzwerk“

Chromium-Fehler: 998674

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