Neuerungen in den Entwicklertools (Chrome 92)

Jecelyn Yeen

CSS-Raster-Editor

Eine Funktion, die von vielen gewünscht wurde. Mit dem neuen CSS-Grid-Editor können Sie jetzt CSS-Grids in der Vorschau ansehen und erstellen.

CSS-Grid-Editor

Wenn auf ein HTML-Element auf Ihrer Seite display: grid oder display: inline-grid angewendet wird, wird im Bereich „Stile“ ein Symbol daneben angezeigt. Klicken Sie auf das Symbol, um den CSS-Raster-Editor ein- oder auszublenden. Hier können Sie sich die potenziellen Änderungen mit den Symbolen auf dem Bildschirm (z.B. justify-content: space-around) ansehen und das Erscheinungsbild des Rasters mit nur einem Klick anpassen.

Chromium-Problem: 1203241

Unterstützung für const-Neudeklarationen in der Console

Die Console unterstützt jetzt die Neudeklaration der const-Anweisung, zusätzlich zu den vorhandenen Neudeklarationen von let und class. Die Unmöglichkeit, Variablen neu zu deklarieren, war ein häufiges Ärgernis für Webentwickler, die die Console zum Experimentieren mit neuem JavaScript-Code verwenden.

So können Entwickler Code in die Entwicklertools-Konsole kopieren und einfügen, um zu sehen, wie er funktioniert, oder um zu experimentieren, kleine Änderungen am Code vorzunehmen und den Vorgang zu wiederholen, ohne die Seite zu aktualisieren. Bisher haben die Entwicklertools einen Syntaxfehler ausgegeben, wenn im Code eine const-Bindung neu deklariert wurde.

Siehe Beispiel unten. Die Neudeklaration von const wird in separaten REPL-Skripts unterstützt (siehe Variable a). Die folgenden Szenarien werden jedoch nicht unterstützt:

  • Die erneute Deklaration von Seitenskripten mit const ist in REPL-Skripten nicht zulässig
  • Die erneute Deklaration von const innerhalb desselben REPL-Skripts ist nicht zulässig (siehe Variable b)

const-Neudeklarationen

Chromium-Problem: 1076427

Viewer für die Quellenreihenfolge

Sie können sich jetzt die Reihenfolge der Quellelemente auf dem Bildschirm ansehen, um die Bedienungshilfen besser zu prüfen.

Viewer für die Quellenreihenfolge

Die Reihenfolge der Inhalte in einem HTML-Dokument ist für die Suchmaschinenoptimierung und die Barrierefreiheit im Internet wichtig. Die neueren CSS-Funktionen ermöglichen es Entwicklern, Inhalte zu erstellen, die auf dem Bildschirm ganz anders aussehen als im HTML-Dokument. Das ist ein großes Problem für die Barrierefreiheit, da Nutzer von Screenreadern eine andere, wahrscheinlich verwirrende Erfahrung machen würden als sehende Nutzer.

Chromium-Problem: 1094406

Neue Tastenkombination zum Aufrufen von Frame-Details

Sie können sich die iframe-Details ansehen, indem Sie im Bereich „Elemente“ auf das iframe-Element rechtsklicken und Frame-Details anzeigen auswählen.

Framedetails anzeigen

Dadurch gelangen Sie zu einer Ansicht der iframe-Details im Bereich „Anwendung“. Dort können Sie Dokumentdetails, Sicherheits- und Isolationsstatus, Berechtigungsrichtlinie und mehr prüfen, um potenzielle Probleme zu beheben.

Frame-Detailansicht

Chromium-Problem: 1192084

Erweiterte Unterstützung für die CORS-Fehlerbehebung

CORS-Fehler (Cross-Origin Resource Sharing) werden jetzt auf dem Tab „Probleme“ angezeigt. Es gibt verschiedene Gründe für CORS-Fehler. Klicken Sie auf die einzelnen Probleme, um sie zu maximieren und die möglichen Ursachen und Lösungen zu sehen.

CORS-Probleme auf dem Tab „Probleme“

Chromium-Problem: 1141824

Aktualisierungen im Netzwerkbereich

XHR-Label in „Fetch/XHR“ umbenennen

Das Label „XHR“ wurde in Fetch/XHR umbenannt. Durch diese Änderung wird deutlicher, dass dieser Filter sowohl XMLHttpRequest- als auch Fetch API-Netzwerkanfragen umfasst.

Fetch/XHR-Label

Chromium-Problem: 1201398

Wasm-Ressourcentyp im Netzwerkbereich filtern

Sie können jetzt auf die neue Schaltfläche Wasm klicken, um die Wasm-Netzwerkanfragen zu filtern.

Nach Wasm filtern

Chromium-Problem: 1103638

User-Agent-Client-Hints für Geräte auf dem Tab „Netzwerkbedingungen“

User-Agent-Client-Hints werden jetzt für Geräte im Feld User-Agent auf dem Tab Netzwerkbedingungen angewendet.

User-Agent-Client-Hints sind eine neue Erweiterung der Client Hints API, mit der Entwickler auf datenschutzfreundliche und ergonomische Weise auf Informationen zum Browser eines Nutzers zugreifen können.

User-Agent-Client-Hints für Geräte auf dem Tab „Netzwerkbedingungen“

Chromium-Problem: 1174299

Probleme mit dem Quirks-Modus auf dem Tab „Probleme“ melden

In den Entwicklertools werden jetzt Probleme im Quirks-Modus und im Modus mit eingeschränkten Quirks gemeldet.

Der Quirks-Modus und der Limited-Quirks-Modus sind ältere Browsermodi, die vor der Einführung der Webstandards verwendet wurden. In diesen Modi wird das Layoutverhalten aus der Zeit vor der Standardisierung emuliert, was häufig zu unerwarteten visuellen Effekten führt.

Bei der Fehlerbehebung von Layoutproblemen denken Entwickler möglicherweise, dass diese durch vom Nutzer erstellte CSS- oder HTML-Fehler verursacht werden, während das eigentliche Problem der Kompatibilitätsmodus ist, in dem sich die Seite befindet. Die Entwicklertools bieten Vorschläge zur Behebung des Problems.

Probleme mit dem Quirks-Modus auf dem Tab „Probleme“ melden

Chromium-Problem: 622660

„Schnittpunkte berechnen“ im Bereich „Leistung“ einbeziehen

In den Entwicklertools wird jetzt Compute Intersections im Flame-Diagramm angezeigt. Diese Änderungen helfen Ihnen, die IntersectionObserver-Ereignisse zu identifizieren und potenzielle Leistungseinbußen zu beheben.

Schnittpunkte im Bereich „Leistung“ berechnen

Chromium-Problem: 1199137

Lighthouse 7.5 im Lighthouse-Bereich

Im Lighthouse-Bereich wird jetzt Lighthouse 7.5 ausgeführt. Die Warnung „Fehlende explizite Breite und Höhe“ wird jetzt für Bilder mit aspect-ratio, die in CSS definiert sind, entfernt. Bisher wurden in Lighthouse Warnungen für Bilder ohne definierte Breite und Höhe angezeigt.

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

Chromium-Problem: 772558

Das Kontextmenü „Frame neu starten“ im Aufrufstapel wurde eingestellt.

Die Option Frame neu starten wurde eingestellt. Diese Funktion muss noch weiterentwickelt werden, damit sie gut funktioniert. Derzeit ist sie fehlerhaft und stürzt oft ab.

Eingestelltes Kontextmenü „Frame neu starten“

Chromium-Problem: 1203606

[Experimentell] Protokollmonitor

Die Chrome-Entwicklertools verwenden das Chrome-Entwicklertools-Protokoll (CDP), um Chrome-Browser zu instrumentieren, zu prüfen, zu debuggen und zu profilieren. Mit dem Protokollmonitor können Sie sich alle CDP-Anfragen und ‑Antworten ansehen, die von den DevTools gesendet wurden.

Zwei neue Funktionen wurden hinzugefügt, um das Testen von CDP zu erleichtern:

  • Über den neuen Button Speichern können Sie die aufgezeichneten Nachrichten als JSON-Datei herunterladen.
  • Ein neues Feld, über das Sie einen RAW-CDP-Befehl direkt senden können

Protokollmonitor

Chromium-Probleme: 1204004, 1204466

[Experimentell] Puppeteer Recorder

Der Puppeteer-Recorder generiert jetzt eine Liste von Schritten basierend auf Ihrer Interaktion mit dem Browser. Zuvor haben die DevTools stattdessen direkt ein Puppeteer-Script generiert. Es gibt jetzt einen neuen Button Exportieren, mit dem Sie die Schritte als Puppeteer-Skript exportieren können.

Nachdem Sie die Schritte aufgezeichnet haben, können Sie sie mit der neuen Schaltfläche Wiedergeben noch einmal abspielen. Folgen Sie dieser Anleitung, um mit der Aufzeichnung zu beginnen.

Bitte beachten Sie, dass sich dieses Experiment noch in einem frühen Stadium befindet. Wir planen, die Rekorder-Funktionen im Laufe der Zeit zu verbessern und zu erweitern.

Puppeteer Recorder

Chromium-Problem: 1199787

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Vorabversionen erhalten Sie Zugriff auf die neuesten Entwicklertools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer darauf stoßen.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder andere Themen im Zusammenhang mit den Entwicklertools zu diskutieren.

  • Unter crbug.com können Sie uns Feedback und Feature Requests senden.
  • Sie können ein Problem mit den Entwicklertools melden, indem Sie in den Entwicklertools auf das Dreipunkt-Menü  Weitere Optionen > Hilfe > Problem mit den Entwicklertools melden klicken.
  • Tweeten Sie an @ChromeDevTools.
  • Hinterlassen Sie Kommentare zu den YouTube-Videos What's new in DevTools oder DevTools Tips.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den Entwicklertools behandelt wurden.