Neuerungen in den Entwicklertools (Chrome 93)

Jecelyn Yeen

Bearbeitbare CSS-Containerabfragen im Bereich „Stile“

CSS-Containerabfragen können jetzt im Bereich Styles aufgerufen und bearbeitet werden.

Containerabfragen bieten einen viel dynamischeren Ansatz für responsives Design. Die At-Rule @container funktioniert ähnlich wie eine Medienabfrage mit @media. Anstatt jedoch den Viewport und den User-Agent nach Informationen abzufragen, wird bei @container der übergeordnete Container abgefragt, der bestimmten Kriterien entspricht.

Wenn Sie im Bereich Elemente auf ein DOM-Element mit @container-At-Rule klicken, werden in den DevTools die @container-Informationen jetzt 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 die Containergröße zu prüfen. Klicken Sie darauf, um das Containerelement auszuwählen.

Die Funktion für Containerabfragen befindet sich derzeit in der Testphase. Aktivieren Sie das Flag #enable-container-queries unter chrome://flags, um es zu testen.

Bearbeitbare CSS-Containerabfragen im Bereich „Stile“

Chromium-Problem: 1146422

Web-Bundle-Vorschau im Bereich „Netzwerk“

Web-Bundle ist ein Dateiformat zum Kapseln einer oder mehrerer HTTP-Ressourcen in einer einzelnen Datei. Sie können sich jetzt eine Vorschau der Web-Bundle-Inhalte im Bereich Netzwerk ansehen.

Die Funktion für Web-Bundles 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 angezeigt.

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

Attribution Reporting API-Fehler auf dem Tab „Probleme“

Chromium-Problem: 1190735

Bessere String-Verarbeitung in der Console

Über das neue Kontextmenü in der Console können Sie jeden String als Inhalt, JavaScript- oder JSON-Literal kopieren.

Neues Kontextmenü in der Console

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

In der Console werden Stringausgaben jetzt als gültige JavaScript-Literale formatiert. Außerdem stehen Ihnen drei Optionen zum Kopieren von Strings zur Verfügung. Mit der Option Als JavaScript-Literal kopieren werden entsprechende Sonderzeichen maskiert und der String wird je nach Stringinhalt in einfache, doppelte oder Backticks gesetzt. Mit Stringinhalte kopieren wird der Rohstringinhalt (einschließlich neuer Zeilen und anderer Sonderzeichen) wörtlich 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

Verbesserte CORS-Fehlerbehebung

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

Klicken Sie auf die beiden neuen Symbole neben der CORS-bezogenen Fehlermeldung, um die Netzwerkanfrage aufzurufen. Auf dem Tab „Probleme“ finden Sie weitere Informationen zur Fehlermeldung und mögliche Lösungen.

Symbole neben der CORS-Fehlermeldung

Chromium-Problem: 1213393

Lighthouse 8.1

Im Bereich Lighthouse wird jetzt Lighthouse 8.1 ausgeführt.

Leuchtturm

Wenn Ihre Website Quellkarten für Lighthouse bereitstellt, suchen Sie nach der Schaltfläche Stammstruktur ansehen. Daraufhin wird eine Aufschlüsselung des gesendeten JavaScripts angezeigt, die nach Größe und Abdeckung beim Laden gefiltert werden kann.

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

Bei der Leistungskategorie wurden einige Änderungen an der Bewertung vorgenommen, um sie an andere Leistungstools anzupassen und den aktuellen Stand des Webs besser widerzuspiegeln.

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

Chromium-Problem: 772558

URL für neue Notiz im Manifestbereich anzeigen

Im Bereich „Manifest“ wird jetzt die neue URL der Notiz angezeigt.

Derzeit können in ChromeOS (CrOS) Chrome-Apps und Android-Apps, die die Funktion „new-note“ angeben, in den Einstellungen für den Eingabestift als App zum Erstellen von Notizen ausgewählt werden. Diese Option 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“ in der Palette für den Eingabestift gestartet werden. Das Feld new-note-url im Anwendungsmanifest ist Teil der Bemühungen, Web-Apps vergleichbare Funktionen hinzuzufügen.

URL für neue Notiz im Manifest-Bereich

Chromium-Problem: 1185678

Feste CSS-Übereinstimmungs-Selektoren

In den DevTools wurden die CSS-Übereinstimmungsselektoren korrigiert, die in der letzten Version nicht funktionierten.

Die kommagetrennten Selektoren im Bereich Styles sind unterschiedlich gefärbt, je nachdem, ob sie mit dem ausgewählten DOM-Knoten übereinstimmen:

  • Nicht übereinstimmende Teile werden hellgrau dargestellt.
  • Ein übereinstimmender Auswahlbereich wird schwarz dargestellt.

CSS-Abgleichs-Selektoren

Chromium-Problem: 1219153

JSON-Antworten im Bereich „Netzwerk“ im benutzerfreundlichen Format anzeigen

Sie können JSON-Antworten jetzt im Bereich Netzwerk im benutzerfreundlichen Format anzeigen lassen.

Öffnen Sie eine JSON-Antwort im Bereich Netzwerk und klicken Sie auf das Symbol {}, um sie in einer optimierten Darstellung zu sehen.

JSON-Antworten im Bereich „Netzwerk“ im benutzerfreundlichen Format anzeigen

Chromium-Fehler: 998674

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.