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 die registrierte Property im minimierten Bereich @property aufzurufen.

Chromium-Probleme: 1471102, 1471103, 1471105

Weitere Verbesserungen bei lokalen Ü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 zur ursprünglichen Quelle gelangen. Der Inhalt von Dateien mit Quellzuordnung kann 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 damit nur die Überschreibungen gelöscht wurden, die in der aktuellen Sitzung aktiv waren und mit dem lila Punktsymbol Gespeichert. gekennzeichnet waren.

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 sehen Sie den Vergleich zwischen vorher (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 Der Bereich Quellen > Dateisystem wurde 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.

So sieht die neue Einrichtung und der neue Workflow in der Praxis aus:

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

Bereiche in „Quellen“ neu anordnen

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

Chromium-Probleme: 1473758

Syntaxhervorhebung und schönere Darstellung für mehr Scripttypen

Im Bereich Quellen können Sie jetzt:

  • In den folgenden Scripttypen muss Inline-JavaScript in einer lesbaren Formatierung dargestellt werden: module, importmap und speculationrules.
  • Hervorheben Sie die Syntax der Scripttypen importmap und speculationrules, die beide JSON enthalten.

Vor und nach dem Formatieren und Syntax-Hervorheben des Scripts für Spekulationsregeln

Weitere Informationen zu Spekulationsregeln finden Sie unter Seiten in Chrome vorab rendern, um sofort zur gewünschten Seite zu gelangen.

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 Cookie-Probleme jetzt über mehrere Navigationen hinweg gespeichert (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 und mehr (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).
  • Bei Elementen wurde die Erkennung von Mediaabfragefunktionen korrigiert (1472693).

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

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 den DevTools

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