Neuerungen in den Entwicklertools (Chrome 92)

Jecelyn Yeen

CSS-Rastereditor

Eine sehr gefragte Funktion. Mit dem neuen CSS-Rastereditor können Sie das CSS-Raster in der Vorschau ansehen 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-/auszuschalten. Hier können Sie sich mithilfe der Bildschirmsymbole (z.B. justify-content: space-around) eine Vorschau der potenziellen Änderungen ansehen und die Rasterdarstellung mit nur einem Klick festlegen.

Chromium-Problem: 1203241

Unterstützung für const Neudeklaration in der Console

Die Console unterstützt jetzt die erneute Deklaration der const-Anweisung zusätzlich zu den vorhandenen let- und class-Neudeklarationen. Ein häufiges Ärgernis für Webentwickler, die die Console zum Experimentieren mit neuem JavaScript-Code über die Konsole nicht neu deklarieren, ist ein häufiges Ärgernis.

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

Sehen Sie sich dazu das Beispiel unten an. Die erneute Deklaration von const wird in separaten REPL-Skripts unterstützt (siehe Variable a). Beachten Sie, dass die folgenden Szenarien vom Design nicht unterstützt werden:

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

konst. Neudeklaration

Chromium-Problem: 1076427

Betrachter von Quellbestellungen

Du kannst dir jetzt die Reihenfolge der Quellelemente auf dem Bildschirm ansehen, um die Barrierefreiheit zu prüfen.

Betrachter von Quellbestellungen

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 in der Reihenfolge auf dem Bildschirm ganz anders aussehen als im HTML-Dokument. Dies ist ein großes Problem mit der Barrierefreiheit, da Nutzer von Screenreadern eine andere, wahrscheinlich verwirrende Erfahrung als sehende Nutzer erleben würden.

Chromium-Problem: 1094406

Neue Verknüpfung zum Anzeigen der Framedetails

Sie können sich die iFrame-Details ansehen, indem Sie im Steuerfeld „Elemente“ mit der rechten Maustaste auf das iFrame-Element klicken und Frame-Details anzeigen auswählen.

Framedetails anzeigen

Dadurch gelangen Sie zu einer Ansicht der iFrame-Details im Anwendungsbereich. Dort können Sie Dokumentdetails, den Sicherheits- und Isolationsstatus, die Berechtigungsrichtlinie und mehr prüfen, um potenzielle Probleme zu beheben.

Frame-Detailansicht

Chromium-Problem: 1192084

Erweiterte Unterstützung für CORS-Debugging

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

CORS-Probleme auf dem Tab „Probleme“

Chromium-Problem: 1141824

Aktualisierungen des Netzwerkbereichs

XHR-Label in Fetch/XHR umbenennen

Das XHR-Label heißt jetzt Fetch/XHR. Durch diese Änderung wird deutlicher, dass dieser Filter sowohl XMLHttpRequest- als auch Fetch API-Netzwerkanfragen enthält.

Abruf-/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-Hinweise werden jetzt auf dem Tab Netzwerkbedingungen im Feld User-Agent auf Geräte angewendet.

User-Agent-Client Hints sind eine neue Erweiterung der Client Hints API, mit der Entwickler auf datenschutzfreundliche und ergonomische Weise auf Informationen über den 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 mit dem Quirks-Modus und dem Modus mit eingeschränktem Quirks-Modus gemeldet.

Quirks-Modus und der Modus für begrenzte Quirks sind ältere Browsermodi, die noch vor der Einführung der Webstandards entstanden sind. Diese Modi emulieren Layoutverhalten aus der Vorzeit, das häufig zu unerwarteten visuellen Effekten führt.

Beim Debuggen von Layoutproblemen denken Entwickler möglicherweise, 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. Die Entwicklertools bieten Vorschläge zur Behebung dieses Problems.

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

Chromium-Problem: 622660

Compute-Intersections im Bereich „Leistung“ einschließen

Die Entwicklertools zeigen jetzt die Compute Intersections im Flammendiagramm an. Mit diesen Änderungen können Sie die Ereignisse vom Typ Intersection-Beobachter ermitteln und den potenziellen Leistungsaufwand beheben.

Schnittpunkte im Bereich „Leistung“ berechnen

Chromium-Problem: 1199137

Lighthouse 7.5 im Lighthouse-Bereich

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, bei denen die Breite und Höhe nicht definiert waren.

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

Chromium-Problem: 772558

Veraltetes Kontextmenü „Neustart des Frames“ im Aufrufstack

Die Option Frame neu starten wurde eingestellt. Diese Funktion erfordert weitere Entwicklung, damit sie einwandfrei funktioniert. Sie funktioniert derzeit nicht und stürzt häufig ab.

Veraltetes Kontextmenü zum Neustarten des Frames

Chromium-Problem: 1203606

[Experimentell] Protokollmonitor

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

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

  • Ü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 mit Schritten basierend auf Ihrer Interaktion mit dem Browser. Früher haben DevTools stattdessen direkt ein Puppeteer-Skript generiert. Die neue Schaltfläche Export wurde hinzugefügt, mit der Sie die Schritte als Puppeteer-Skript exportieren können.

Nachdem du die Schritte aufgezeichnet hast, kannst du die neue Schaltfläche Noch einmal abspielen verwenden, um die Schritte noch einmal abzuspielen. In dieser Anleitung erfährst du, wie du die Aufzeichnung startest.

Dieser Test befindet sich noch in der Anfangsphase. Wir planen, die Rekorder-Funktionalität im Laufe der Zeit zu verbessern und zu erweitern.

Puppeteer-Rekorder

Chromium-Problem: 1199787

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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 abgebrochen.

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