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-Raster-Editor

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 mit nur einem Klick eine Vorschau der möglichen Änderungen mit den Bildschirmsymbolen (z.B. justify-content: space-around) ansehen und die Rasterdarstellung 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. Sie können kleine Änderungen am Code vornehmen und den Vorgang wiederholen, 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). Beachten Sie, dass die folgenden Szenarien standardmäßig nicht unterstützt werden:

  • 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

Daraufhin werden Sie zu einer Ansicht der iFrame-Details im Anwendungsbereich weitergeleitet. Dort können Sie Dokumentdetails, Sicherheit und Isolierungsstatus, Berechtigungsrichtlinie und mehr, um potenzielle Probleme zu beheben.

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 „fehlende explizite Breite und Höhe“ Die Warnung für Bilder, bei denen aspect-ratio in CSS definiert ist, wurde entfernt. 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

„Frame neu starten“ eingestellt Kontextmenü im Aufrufstack

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