Neuerungen in den Entwicklertools (Chrome 92)

Jecelyn Yeen

CSS-Raster-Editor

Eine Funktion, die sich viele Nutzer gewünscht haben. Mit dem neuen CSS-Grid-Editor können Sie jetzt eine Vorschau von CSS-Grids anzeigen und sie 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 neben dem Element angezeigt. Klicken Sie auf das Symbol, um den CSS-Raster-Editor ein- oder auszublenden. Hier können Sie sich die möglichen Änderungen mit den Symbolen auf dem Bildschirm (z.B. justify-content: space-around) in der Vorschau ansehen und das Raster mit nur einem Klick erstellen.

Chromium-Problem: 1203241

Unterstützung für erneute Deklarationen von const in der Console

Die Console unterstützt jetzt neben den vorhandenen let- und class-Neudeklarationen auch die Neudeklaration der const-Anweisung. Die fehlende Möglichkeit zur Neudeklarierung war für Webentwickler, die in der Console mit neuem JavaScript-Code experimentieren, ein häufiges Ärgernis.

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

Siehe Beispiel unten. Die Neudeklarierung von const wird in separaten REPL-Scripts unterstützt (siehe Variable a). Die folgenden Szenarien werden von Design her nicht unterstützt:

  • const Die erneute Deklaration von Seitenscripts ist in REPL-Scripts nicht zulässig.
  • Die erneute Deklaration von const innerhalb desselben REPL-Scripts ist nicht zulässig (siehe Variable b)

const-Neudeklarationen

Chromium-Problem: 1076427

Viewer für Quellenreihenfolge

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

Viewer für Quellenreihenfolge

Die Reihenfolge der Inhalte in einem HTML-Dokument ist wichtig für die Suchmaschinenoptimierung und Barrierefreiheit. Mit den neueren CSS-Funktionen können Entwickler Inhalte erstellen, die auf dem Bildschirm ganz anders aussehen als im HTML-Dokument. Dies ist ein großes Problem in Bezug auf die Barrierefreiheit, da Nutzer von Screenreadern eine andere, höchstwahrscheinlich verwirrende Erfahrung haben als sehende Nutzer.

Chromium-Problem: 1094406

Neue Tastenkombination zum Aufrufen von Frame-Details

Klicken Sie im Bereich „Elemente“ mit der rechten Maustaste auf das Iframe-Element und wählen Sie Frame-Details anzeigen aus.

Frame-Details anzeigen

Daraufhin wird im Bereich „Anwendung“ eine Ansicht mit den Details des Iframes geöffnet. Dort können Sie unter anderem Dokumentdetails, den Sicherheits- und Isolationsstatus sowie die Berechtigungsrichtlinie prüfen, um potenzielle Probleme zu beheben.

Details zum Frame

Chromium-Problem: 1192084

Verbesserte CORS-Fehlerbehebung

CORS-Fehler (Cross-Origin Resource Sharing) werden jetzt auf dem Tab „Probleme“ angezeigt. CORS-Fehler können verschiedene Ursachen haben. Klicken Sie auf die einzelnen Probleme, um die möglichen Ursachen und Lösungen zu sehen.

CORS-Probleme auf dem Tab „Probleme“

Chromium-Problem: 1141824

Aktualisierungen des Netzwerkbereichs

XHR-Label in „Fetch/XHR“ umbenennen

Das XHR-Label wurde in Abrufen/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 Bereich „Netzwerk“ 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-Hinweise 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 Modus „Kuriositäten“ auf dem Tab „Probleme“ melden

In DevTools werden jetzt Probleme mit dem Quirks-Modus und dem Modus mit begrenzten Quirks gemeldet.

Der Quirks-Modus und der Modus mit eingeschränkten Quirks sind alte Browsermodi, die vor der Einführung der Webstandards verwendet wurden. Diese Modi emulieren das Layoutverhalten vor der Einführung des Standards, das oft zu unerwarteten visuellen Effekten führt.

Beim Beheben von Layoutproblemen gehen Entwickler möglicherweise davon aus, dass sie durch von Nutzern erstellte CSS- oder HTML-Fehler verursacht werden, während das eigentliche Problem der Compat-Modus ist, in dem sich die Seite befindet. In den DevTools finden Sie Vorschläge zur Behebung.

Probleme mit dem Modus „Kuriositäten“ auf dem Tab „Probleme“ melden

Chromium-Problem: 622660

Schnittpunkte berechnen im Bereich „Leistung“ einschließen

In den DevTools wird jetzt die Option Compute Intersections (Überschneidungen berechnen) im Flammendiagramm angezeigt. Mit diesen Änderungen können Sie die Kreuzungsbeobachter-Ereignisse identifizieren und den potenziellen Leistungsoverhead beheben.

Schnittpunkte im Bereich „Leistung“ berechnen

Chromium-Problem: 1199137

Lighthouse 7.5 im Lighthouse-Steuerfeld

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

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 wird nicht mehr unterstützt. Diese Funktion erfordert weitere Entwicklung, um ordnungsgemäß zu funktionieren. Sie ist derzeit defekt und stürzt häufig ab.

Kontextmenü „Frame neu starten“ (nicht mehr unterstützt)

Chromium-Problem: 1203606

[Experimentell] Protokollmonitor

In den Chrome-Entwicklertools wird das Chrome-Entwicklertools-Protokoll (CDP) verwendet, um Chrome-Browser zu instrumentieren, zu prüfen, zu debuggen und zu profilieren. Im Protokoll-Monitor können Sie alle CDP-Anfragen und ‑Antworten sehen, die von DevTools gesendet wurden.

Es wurden zwei neue Funktionen hinzugefügt, um das Testen von CDP zu vereinfachen:

  • Über die neue Schaltfläche Speichern können Sie die aufgezeichneten Nachrichten als JSON-Datei herunterladen.
  • Neues Feld, mit dem Sie einen RAW-CDP-Befehl direkt senden können

Protokollmonitor

Chromium-Probleme: 1204004, 1204466

[Experimentell] Puppeteer-Aufzeichnung

Der Puppeteer-Aufzeichnungstool generiert jetzt eine Liste von Schritten basierend auf Ihrer Interaktion mit dem Browser. Bisher wurde in den DevTools stattdessen direkt ein Puppeteer-Script generiert. Es wurde die Schaltfläche Exportieren hinzugefügt, mit der Sie die Schritte als Puppeteer-Script exportieren können.

Nachdem Sie die Schritte aufgezeichnet haben, können Sie sie mit der neuen Schaltfläche Wiedergeben noch einmal abspielen. In dieser Anleitung erfährst du, wie du loslegst.

Hinweis: Dies ist ein Test in der Anfangsphase. Wir planen, die Funktionen des Rekorders im Laufe der Zeit zu verbessern und zu erweitern.

Puppeteer Recorder

Chromium-Problem: 1199787

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.