Neuerungen in den Entwicklertools (Chrome 92)

Jecelyn Yeen

CSS-Rastereditor

Eine stark nachgefragte Funktion. Mit dem neuen CSS-Raster-Editor können Sie das CSS-Raster jetzt in der Vorschau anzeigen und verfassen.

CSS-Rastereditor

Wenn auf ein HTML-Element auf Ihrer Seite display: grid oder display: inline-grid angewendet wurde, wird im Bereich „Stile“ daneben ein Symbol angezeigt. Klicken Sie auf das Symbol, um den CSS-Rastereditor ein- und auszublenden. Hier können Sie sich eine Vorschau der potenziellen Änderungen mit den Bildschirmsymbolen (z.B. justify-content: space-around) ansehen und die Rasterdarstellung mit nur einem Klick erstellen.

Chromium-Problem: 1203241

Unterstützung für const-Erneute Deklarationen in der Console

Zusätzlich zu den bereits vorhandenen let- und class-Deklarierungen unterstützt die Console jetzt die erneute Deklaration der const-Anweisung. Es war ein häufiges Problem für Webentwickler, die die Console zum Experimentieren mit neuem JavaScript-Code verwenden.

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

Sehen Sie sich dazu das Beispiel unten an. Die Deklaration von const wird über separate REPL-Skripts unterstützt (siehe Variable a). Die folgenden Szenarien werden standardmäßig nicht unterstützt:

  • Die Deklaration von Seitenskripts durch const ist in REPL-Skripts nicht zulässig
  • Die Deklaration „const“ innerhalb desselben REPL-Scripts ist nicht zulässig (siehe Variable b).

Const-Erklärungen

Chromium-Problem: 1076427

Viewer für Quellenreihenfolge

Sie können sich jetzt die Reihenfolge der Quellelemente auf dem Bildschirm ansehen, um die Barrierefreiheit zu verbessern.

Viewer für Quellenreihenfolge

Die Reihenfolge der Inhalte in einem HTML-Dokument ist wichtig für die Suchmaschinenoptimierung und Zugänglichkeit. Mit den neueren CSS-Funktionen können Entwickler Inhalte erstellen, die sich in der Bildschirmreihenfolge stark vom HTML-Dokument unterscheiden. Dies ist ein großes Problem mit der Barrierefreiheit, da Screenreader-Nutzer eine andere, höchstwahrscheinlich verwirrende Erfahrung haben als sehende Nutzende.

Chromium-Problem: 1094406

Neue Verknüpfung zum Ansehen von Framedetails

Sehen Sie sich die iFrame-Details an, indem Sie im Steuerfeld „Elemente“ mit der rechten Maustaste auf das iFrame-Element klicken und Framedetails anzeigen auswählen.

Framedetails anzeigen

Dadurch gelangen Sie zu einer Ansicht der iFrame-Details im Anwendungsbereich. Dort können Sie unter anderem Dokumentdetails, den Sicherheits- und Isolationsstatus, die Berechtigungsrichtlinie und weitere Informationen zur Behebung potenzieller Probleme prüfen.

Detailansicht des Frames

Chromium-Problem: 1192084

Unterstützung für CORS-Debugging

CORS-Fehler (Cross-Origin Resource Sharing) werden jetzt auf dem Tab „Probleme“ angezeigt. CORS-Fehler können aus verschiedenen Gründen verursacht werden. Klicken Sie auf die einzelnen Probleme, um sie zu maximieren und mehr über die möglichen Ursachen und Lösungen zu erfahren.

CORS-Probleme auf dem Tab „Probleme“

Chromium-Problem: 1141824

Updates des Netzwerkbereichs

XHR-Label in Fetch/XHR umbenennen

Das XHR-Label wurde in Fetch/XHR umbenannt. Diese Änderung verdeutlicht, dass dieser Filter sowohl XMLHttpRequest- als auch Fetch API-Netzwerkanfragen einschließt.

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 im Tab „Netzwerkbedingungen“

User-Agent-Client-Hints werden jetzt auf 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 im 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 für begrenzte Quirks gemeldet.

Der Quirks-Modus und der Modus für begrenzte Quirks sind ältere Browsermodi, die aus der Zeit vor den Webstandards stammen. Diese Modi emulieren Layoutverhalten vor der Standardzeit, das häufig zu unerwarteten visuellen Effekten führt.

Bei der Behebung von Layoutproblemen könnten Entwickler denken, dass sie durch vom Nutzer erstellte CSS- oder HTML-Fehler verursacht werden. Das eigentliche Problem ist jedoch der Kompatmodus, in dem sich die Seite befindet. Die Entwicklertools bieten Vorschläge zur Korrektur.

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

Chromium-Problem: 622660

Compute-Kreuzungen im Bereich „Leistung“ einschließen

Die Entwicklertools zeigen jetzt die Berechnungen bei Schnittpunkten im Flame-Diagramm an. Mithilfe dieser Änderungen können Sie die Ereignisse der Intersection-Beobachter identifizieren und Fehler im Hinblick auf die möglichen Leistungsaufwand beheben.

Kreuzungen 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“ wurde für Bilder entfernt, bei denen aspect-ratio in CSS definiert ist. Bisher wurden in Lighthouse Warnungen für Bilder angezeigt, für die keine Breite und Höhe definiert wurden.

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

Chromium-Problem: 772558

Das Kontextmenü „Frame neu starten“ im Aufrufstack wurde eingestellt

Die Option Frame neu starten wurde eingestellt. Diese Funktion muss weiterentwickelt werden, um gut zu funktionieren. Sie funktioniert derzeit nicht und stürzt häufig ab.

Eingestelltes Kontextmenü für Frame neu starten

Chromium-Problem: 1203606

[Experimentell] Protokollmonitor

In den Chrome-Entwicklertools wird das Chrome DevTools Protocol (CDP) verwendet, um Chrome-Browser zu instrumentieren, zu untersuchen, zu debuggen und Profile zu erstellen. Mit dem Protokollmonitor können Sie sich alle CDP-Anfragen und -Antworten der Entwicklertools ansehen.

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

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

Protokollmonitor

Chromium-Probleme: 1204004, 1204466

[Experimentell] Puppeteer-Rekorder

Der Puppeteer-Rekorder generiert jetzt eine Liste von Schritten basierend auf Ihrer Interaktion mit dem Browser, während zuvor die Entwicklertools direkt ein Puppeteer-Skript generiert haben. Über die neue Schaltfläche Exportieren können Sie die Schritte als Puppeteer-Skript exportieren.

Nachdem Sie die Schritte aufgezeichnet haben, können Sie sie über die neue Schaltfläche Wiederholung noch einmal abspielen. Folgen Sie dieser Anleitung, um zu erfahren, wie Sie mit der Aufzeichnung beginnen.

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

Puppeteer-Rekorder

Chromium-Problem: 1199787

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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59