Neuerungen in den Entwicklertools (Chrome 118)

Sofia Emelianova
Sofia Emelianova
GitHub

Neuer Bereich für benutzerdefinierte Properties unter „Elemente“ > „Stile“

Das Steuerfeld Elemente unterstützt jetzt das CSS-At-Rule „@property“. Damit können Sie benutzerdefinierte CSS-Eigenschaften explizit definieren und in einem Stylesheet registrieren, ohne JavaScript auszuführen.

Wenn Sie Ihre registrierten benutzerdefinierten Properties prüfen möchten, bewegen Sie den Mauszeiger unter Elemente > Stile auf den Namen der Property. Die Beschreibungen werden dann in einem Kurzinfofeld angezeigt. Klicken Sie in der Kurzinfo auf den Link, um das registrierte Attribut im minimierbaren Bereich @property aufzurufen.

Chromium-Probleme: 1471102, 1471103, 1471105

Mehr Verbesserungen für lokale Überschreibungen

Wie schon in der vorherigen Version können Sie mit lokalen Überschreibungen Folgendes tun:

  • Wenn Sie unter Quellen > Seite mit der rechten Maustaste auf eine Datei mit Quellzuordnung klicken und Inhalt überschreiben auswählen, wird in den Entwicklertools ein Dialogfeld angezeigt, über das Sie stattdessen zur ursprünglichen Quelle gelangen. Inhalte von Dateien mit Quellzuordnung können nicht überschrieben werden.

    Das Dialogfeld, über das Sie zum ursprünglichen Code statt zur Datei mit der Quellzuordnung gelangen.

  • Im Bereich Netzwerk gibt es eine neue Spalte Überschreibungen vorhanden und einen entsprechenden has-overrides:[content|headers|yes|no]-Filter. Wenn Sie die Spalte Überschreibungen vorhanden sehen möchten, klicken Sie mit der rechten Maustaste auf die Tabellenüberschrift und wählen Sie sie aus.

    Filtern Sie in der Spalte „Überschreibungen vorhanden“ nach dem Wert „has-overrides:yes“.

  • Unter Quellen > Überschreibungen wurde die Menüoption Alle Überschreibungen löschen durch die Option Löschen mit einem präzisen Verhalten ersetzt.

    Vor und nach dem Ersetzen von „Alle Überschreibungen löschen“ durch „Löschen“

Die vorherige Option Alle Überschreibungen löschen war verwirrend, da nur die Überschreibungen gelöscht wurden, die in der aktuellen Sitzung aktiv waren. Diese sind durch das lilafarbene Punktsymbol Gespeichert. gekennzeichnet.

Wenn Sie die neue Option Löschen verwenden, wird zuerst eine Warnung angezeigt und Sie werden aufgefordert, die Aktion zu bestätigen. Anschließend wird der angeklickte Ordner mit seinem gesamten Inhalt gelöscht.

Wenn Sie die vorherige Option wiederherstellen möchten, setzen Sie unter Einstellungen. Einstellungen > Tests das Häkchen bei Kästchen. „Alle Überschreibungen vorübergehend löschen“ aktivieren.

Chromium-Probleme: 1472952, 1416338, 1472580, 1473681 1475668.

In den Suchergebnissen wird jetzt für jede Übereinstimmung in einer Codezeile ein Eintrag angezeigt. Bisher wurde nur die erste Übereinstimmung pro Codezeile angezeigt. Das neue Verhalten ist besonders nützlich, wenn Sie in minimierten Dateien suchen. Wenn Sie auf ein Suchergebnis klicken, wird die Datei im Editor geöffnet und die Übereinstimmung wird jetzt nicht nur vertikal, sondern auch horizontal angezeigt.

Vor und nach der Suche werden alle Übereinstimmungen pro Zeile angezeigt.

Außerdem wurde die Suche beschleunigt. Im nächsten Video siehst du einen Vergleich (links) und nachher (rechts).

Außerdem unterstützt die Suche jetzt die Liste der ignorierten Dateien. Sie sehen also keine Ergebnisse aus ignorierten Dateien.

Chromium-Probleme: 1468875, 1472019.

Verbesserter Bereich „Quellen“

Optimierter Arbeitsbereich im Bereich „Quellen“

Die Funktion Arbeitsbereich im Bereich Quellen wurde optimiert:

  • Einheitliche Benennung Vor allem wurde der Bereich Quellen > Dateisystem in Arbeitsbereich umbenannt. Verschiedene UI-Texte in diesem Bereich sind jetzt verständlicher und frei von Redundanzen.
  • Verbesserte Einrichtung: Sie sehen jetzt bessere Hinweise zum Ziehen und Droppen von Ordnern oder können auf einen Link klicken, um einen Ordner auszuwählen.

Unter Quellen > Arbeitsbereich können Sie Änderungen, die Sie in den Entwicklertools vornehmen, direkt mit Ihren Quelldateien synchronisieren.

Sehen Sie sich die neue Einrichtung und den neuen Workflow in Aktion an:

Chromium-Probleme: 1473771, 1473880, 1473963, 1474686, 1474687.

Bereiche in „Quellen“ neu anordnen

Sie können Bereiche auf der linken Seite des Bereichs Quellen jetzt per Drag-and-drop neu anordnen, ähnlich wie Sie andere Felder, Tabs und Bereiche neu anordnen.

Chromium-Probleme: 1473758.

Syntaxhervorhebung und Optimierung für weitere Skripttypen

Im Bereich Quellen können Sie jetzt:

  • Quelltextformatierung für Inline-JavaScript in den folgenden Skripttypen: module, importmap, speculationrules.
  • Heben Sie die Syntax der Skripttypen importmap und speculationrules hervor, die beide JSON enthalten.

Vor und nach dem Pretty-Printing und Syntaxhervorhebung des Skripttyps für Spekulationsregeln.

Weitere Informationen zu Spekulationsregeln finden Sie unter Seiten in Chrome vorab rendern, um sofort zwischen Seiten zu wechseln.

Chromium-Problem: 1473875.

Medienfunktion „prefers-reduced-transparency“ emulieren

Chrome 118 unterstützt jetzt die prefers-reduced-transparency-Medienfunktion. Mit dieser Funktion können Entwickler Webinhalte an die vom Nutzer ausgewählte Einstellung für reduzierte Transparenz im Betriebssystem anpassen, z. B. die Einstellung Transparenz reduzieren unter macOS.

Wenn Sie diese Medienfunktion emulieren möchten, öffnen Sie den Tab Rendering und scrollen Sie nach unten.

Chromium-Problem: 1424879

Lighthouse 11

Im Bereich Lighthouse wird jetzt Lighthouse 11 ausgeführt. In dieser Version wurde die bisherige Navigation entfernt, neue Prüfungen für die Barrierefreiheit hinzugefügt und die Bewertung der Kategorie „Barrierefreiheit“ geändert.

Weitere Informationen finden Sie in der vollständigen Liste der Änderungen. Informationen zu den Grundlagen der Verwendung des Lighthouse-Steuerfelds in den DevTools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Verbesserte Bedienungshilfen

In den DevTools werden jetzt mehr Tastenkombinationen für die Navigation unterstützt:

  • CSS-Übersicht: Mit den Auf- und Abwärtspfeilen können Sie zwischen den Abschnitten in der linken Seitenleiste wechseln.
  • Arbeitsspeicher: Bewegen Sie den Fokus in der linken Seitenleiste mit der Tabulatortaste auf die Schaltfläche Speichern neben den Snapshots und drücken Sie die Eingabetaste, um den Ordner auszuwählen.

Außerdem wurden mehrere Probleme mit der Ansage von Screenreadern behoben.

Chromium-Probleme: 1470401, 1471301, 1474108, 1468631.

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Netzwerk: Neue Symbole für gängige Ressourcentypen: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
  • Die Farben vieler UI-Elemente wurden auf Material 3-Farben aktualisiert, insbesondere in den Bereichen Elemente und Leistung (1456690, 1472243).
  • Unter Probleme werden jetzt Cookie-Probleme bei der Navigation beibehalten (1466601).
  • Verschiedene Verbesserungen bei Anwendung > Vorabladen, insbesondere bei sortierbaren Rastern und überarbeiteten Details zu Regelsätzen (1410709).
  • Verschiedene Verbesserungen am Befehlseditor im Protokoll-Monitor, insbesondere Warnungen bei falscher Eingabe, Bearbeitung eines gesendeten Befehls, Editor für Objektparameter ohne vordefinierte Schlüssel, Unterstützung für durch Verweise nicht definierte Enumerationen, Objekte ohne Typreferenz, Filterbefehle nach Übereinstimmungen mit Teilstrings usw. (1448050)
  • Im Flammendiagramm für Leistung wird das Feld für die Gesamtzahl im Kreisdiagramm (1470147) umrandet.
  • Unter Quellen werden Bindestriche in CSS nicht mehr als Wortzeichen behandelt (1471354).
  • Die automatische Vervollständigung sortiert CSS-Keywords jetzt immer ans Ende.
  • In regulären Ausdrücken können jetzt auch Leerzeichen verwendet werden (1346936).
  • Feste Medienabfrage mit Elementen (1472693).

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 dies tun.

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 DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.