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 anzuzeigen 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 unter ChromeOS (CrOS), Chrome-Apps und Android-Apps, die einen „neuen Hinweis“ deklarieren kann in den Eingabestift-Einstellungen als Notizen-App ausgewählt werden. Diese Funktion 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 Eingabestiftpalette über „Notiz erstellen“ gestartet werden Schaltfläche. 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 kommagetrennten 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-Abgleichselektoren

Chromium-Problem: 1219153

Quelltextformatierung für 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.
  • 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