Neuerungen in den Entwicklertools (Chrome 92)

Jecelyn Yeen

CSS-Grid-Editor

Eine häufig gewünschte Funktion Mit dem neuen CSS Grid-Editor können Sie jetzt CSS Grid-Layouts in der Vorschau ansehen und erstellen.

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

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 let- und class-Neudeklarationen. Die Unfähigkeit, neu zu deklarieren, war ein häufiges Ärgernis für Webentwickler, die die Konsole verwenden, um mit neuem JavaScript-Code zu experimentieren.

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

Sehen Sie sich das Beispiel unten an. Die const-Neudeklaration wird in separaten REPL-Skripten unterstützt (siehe Variable a). Die folgenden Szenarien werden nicht unterstützt:

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

Chromium-Problem: 1076427

Viewer für Quellenreihenfolge

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

Die Reihenfolge der Inhalte in einem HTML-Dokument ist wichtig für die Suchmaschinenoptimierung und die Barrierefreiheit. Mit den neueren CSS-Funktionen können Entwickler Inhalte erstellen, die sich in ihrer Bildschirmreihenfolge stark von den Inhalten im HTML-Dokument unterscheiden. Dies ist ein großes Problem für die Barrierefreiheit, da Nutzer von Screenreadern eine andere, höchstwahrscheinlich verwirrende Erfahrung machen als Nutzer ohne Sehbehinderung.

Chromium-Problem: 1094406

Neues Tastenkürzel zum Aufrufen von Frame-Details

Wenn Sie sich die Iframe-Details ansehen möchten, klicken Sie im Bereich „Elemente“ mit der rechten Maustaste auf das Iframe-Element und wählen Sie Frame-Details anzeigen aus.

Dadurch gelangen Sie im Bereich „Anwendung“ zu einer Ansicht mit den Details des iFrames. Dort können Sie Dokumentdetails, Sicherheits- und Isolierungsstatus, Berechtigungsrichtlinie und mehr untersuchen, um potenzielle Probleme zu beheben.

Chromium-Problem: 1192084

Verbesserte Unterstützung für die 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 sich die möglichen Ursachen und Lösungen anzusehen.

Chromium-Problem: 1141824

Aktualisierungen im Netzwerkbereich

XHR-Label in „Fetch/XHR“ umbenennen

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

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.

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.

Chromium-Problem: 1174299

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

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

Der Quirks-Modus und der eingeschränkte Quirks-Modus sind Legacy-Browsermodi aus der Zeit vor der Einführung der Webstandards. In diesen Modi werden Layoutverhaltensweisen aus der Zeit vor der Standardisierung emuliert, die häufig zu unerwarteten visuellen Effekten führen.

Beim Debuggen von Layoutproblemen gehen Entwickler möglicherweise davon aus, dass sie 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. DevTools bietet Vorschläge zur Behebung des Problems.

Chromium-Problem: 622660

Schnittmengenberechnungen im Bereich „Leistung“ einbeziehen

In den Entwicklertools wird jetzt Compute Intersections im Flammenchart angezeigt. Diese Änderungen helfen Ihnen, die Ereignisse intersection observers zu identifizieren und potenzielle Leistungsprobleme zu beheben.

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 entfernt, für die aspect-ratio in CSS definiert ist. Bisher hat 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

Kontextmenü „Frame neu starten“ im Aufrufstack wurde eingestellt

Die Option Frame neu starten wird nicht mehr unterstützt. Diese Funktion muss noch weiterentwickelt werden, damit sie gut funktioniert. Derzeit ist sie fehlerhaft und stürzt häufig ab.

Chromium-Problem: 1203606

[Experimentell] Protokollmonitor

Die Chrome-Entwicklertools verwenden das Chrome-Entwicklertools-Protokoll (CDP), um Chrome-Browser zu instrumentieren, zu untersuchen, zu debuggen und zu profilieren. Mit dem Protokollmonitor können Sie alle CDP-Anfragen und -Antworten von DevTools ansehen.

Zwei neue Funktionen, die das Testen von CDP erleichtern:

• Mit der neuen Schaltfläche Speichern können Sie die aufgezeichneten Nachrichten als JSON-Datei herunterladen.
• Ein neues Feld, mit dem Sie einen RAW-CDP-Befehl direkt senden können

Chromium-Probleme: 1204004, 1204466

[Experimentell] Puppeteer Recorder

Der Puppeteer-Recorder generiert jetzt eine Liste von Schritten basierend auf Ihrer Interaktion mit dem Browser. Zuvor wurde in den DevTools direkt ein Puppeteer-Skript generiert. Es wurde eine neue 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 Wiederholen wiedergeben. Folge dieser Anleitung, um zu erfahren, wie du mit der Aufzeichnung beginnst.

Bitte beachten Sie, dass es sich hierbei um ein Experiment in der Anfangsphase handelt. Wir planen, die Recorder-Funktion im Laufe der Zeit zu verbessern und zu erweitern.

Chromium-Problem: 1199787

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

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

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

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