Neuerungen in den Entwicklertools (Chrome 118)

Sofia Emelianova
Sofia Emelianova
GitHub

Neuer Abschnitt für benutzerdefinierte Eigenschaften unter „Elemente“ > „Stile“

Im Bereich Elemente wird jetzt die @property CSS-at-Regel unterstützt. Damit können Sie benutzerdefinierte CSS-Eigenschaften explizit definieren und in einem Stylesheet registrieren, ohne JavaScript ausführen zu müssen.

Wenn Sie Ihre registrierten benutzerdefinierten Eigenschaften prüfen möchten, bewegen Sie unter Elemente > Stile den Mauszeiger auf den Namen der Eigenschaft. Die zugehörigen Deskriptoren werden in einer Kurzinfo angezeigt. Klicken Sie in der Kurzinfo auf den Link, um die registrierte Eigenschaft im minimierbaren Bereich @property aufzurufen.

Chromium-Probleme: 1471102, 1471103, 1471105.

Weitere Verbesserungen bei der lokalen Überschreibung

Fortsetzung der Verbesserungen in der vorherigen Version, lokale Überschreibungen führen jetzt Folgendes aus:

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

    Das Dialogfeld, das Sie zum ursprünglichen Code anstatt zur Quellzuordnung der Datei führt.

  • Im Steuerfeld Netzwerk werden eine neue Spalte Mit Überschreibungen und ein entsprechender has-overrides:[content|headers|yes|no]-Filter angezeigt. Wenn Sie die Spalte Mit Überschreibungen sehen möchten, klicken Sie mit der rechten Maustaste auf die Tabellenüberschrift und wählen Sie sie aus.

    Es wird nach dem Wert „has-overrides:yes“ in der Spalte „Hat Überschreibungen“ gefiltert.

  • In Quellen > Überschreibungen wurde die Menüoption Alle Überschreibungen löschen durch die Option Löschen 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 in der aktuellen Sitzung aktiven Überschreibungen gelöscht wurden, die mit dem lilafarbenen Gespeichert.-Symbol gekennzeichnet sind.

Bei der neuen Option Löschen wird zuerst eine Warnmeldung angezeigt und Sie werden zur Bestätigung aufgefordert. Anschließend wird der angeklickte Ordner mit seinem gesamten Inhalt gelöscht.

Wenn Sie zur vorherigen Option zurückkehren möchten, aktivieren Sie unter Einstellungen. Einstellungen > Tests die Option Kästchen. Alle Überschreibungen vorübergehend löschen.

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

Die Suche zeigt jetzt einen Eintrag mit allen gefundenen Übereinstimmungen in einer Codezeile an. Bisher wurde nur die erste Übereinstimmung pro Codezeile angezeigt. Das ist besonders nützlich, wenn Sie in komprimierten Dateien suchen. Wenn Sie auf ein Suchergebnis klicken, wird die Datei im Editor geöffnet und die Übereinstimmung wird nicht nur vertikal, sondern auch horizontal in die Ansicht gescrollt.

In den Suchergebnissen vor und nach der Suche werden alle Übereinstimmungen pro Zeile angezeigt.

Außerdem ist die Suche schneller geworden. Sehen Sie sich den Vorher-Nachher-Vergleich (links) und den Nachher-Vergleich (rechts) im nächsten Video an.

Außerdem unterstützt die Suche jetzt das Ignorieren von Einträgen und zeigt Ihnen keine Ergebnisse aus ignorierten Dateien an.

Chromium-Probleme: 1468875, 1472019.

Verbesserter Bereich „Quellen“

Optimierter Arbeitsbereich im Bereich „Quellen“

Die Funktion Arbeitsbereich im Bereich Quellen wurde optimiert:

  • Einheitliche Benennung: Vor allem der Bereich Quellen > Dateisystem wurde in Arbeitsbereich umbenannt. Verschiedene UI-Texte in diesem Bereich sind jetzt klarer und redundanter.
  • Verbesserte Einrichtung: Sehen Sie bessere Hinweise zum Ziehen und Ablegen von Ordnern oder klicken Sie auf einen Link, um einen Ordner auszuwählen.

Über Quellen > Arbeitsbereich kannst du Änderungen, die du in den Entwicklertools vornimmst, direkt mit deinen Quelldateien synchronisieren.

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

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

Bereiche im Bereich „Quellen“ neu anordnen

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

Chromium-Probleme: 1473758.

Syntaxhervorhebung und Optimierung für mehr Skripttypen

Der Bereich Quellen hat jetzt folgende Möglichkeiten:

  • Quelltextformatierungs-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 der Optimierung und Syntaxhervorhebung des Skripttyps von Spekulationsregeln.

Weitere Informationen zu Spekulationsregeln finden Sie unter Seiten in Chrome für eine sofortige Seitennavigation vorab rendern.

Chromium-Problem: 1473875.

Medienfunktion mit reduzierter Transparenz emulieren

Chrome 118 unterstützt jetzt die Medienfunktion prefers-reduced-transparency. Mit dieser Funktion können Entwickler Webinhalte an die vom Nutzer gewählten Einstellungen anpassen, um die Transparenz im Betriebssystem zu reduzieren, z. B. die Einstellung Transparenz reduzieren unter macOS.

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

Chromium-Problem: 1424879.

Lighthouse 11

Im Steuerfeld Lighthouse wird jetzt Lighthouse 11 ausgeführt. Insbesondere wurden bei dieser Version die alte Navigation entfernt, es wurden neue Prüfungen zur Barrierefreiheit hinzugefügt und die Bewertung der Kategorie „Barrierefreiheit“ geändert.

Eine vollständige Liste der Änderungen finden Sie hier. Informationen zu den Grundlagen der Verwendung des Steuerfelds Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Verbesserte Bedienungshilfen

Die Entwicklertools unterstützen jetzt mehr Navigationstasten:

  • CSS-Übersicht: Mit dem Aufwärts- und Abwärtspfeil können Sie zwischen den Abschnitten in der linken Seitenleiste wechseln.
  • Arbeitsspeicher: Fokussieren Sie in der linken Seitenleiste auf die Schaltfläche Speichern neben den Snapshots. Drücken Sie dazu die Tabulatortaste und drücken Sie die Eingabetaste, um den Ordner auszuwählen.

Außerdem wurden mehrere Probleme mit Ankündigungen von Screenreadern behoben.

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

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen und Verbesserungen in dieser Version:

  • Netzwerk: Neue Symbole für gängige Ressourcentypen: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
  • Bei vielen UI-Elementen wurde die Farbe auf Material 3 aktualisiert, insbesondere in den Bereichen Elemente und Leistung (1456690, 1472243).
  • Unter Probleme werden jetzt Cookieprobleme in allen Navigationen beibehalten (1466601).
  • Verschiedene Verbesserungen unter Anwendung > Vorabladen, insbesondere sortierbare Raster und überarbeitete Regelsatzdetails (1410709).
  • Verschiedene Verbesserungen des Befehlseditors im Protokollmonitor, insbesondere Warnungen bei falscher Eingabe, Bearbeiten eines gesendeten Befehls, Editor für Objektparameter ohne vordefinierte Schlüssel, Unterstützung von nicht definierten Enums durch Verweise, Objekte ohne Typverweis, Filtern von Befehlen nach Teilstring-Übereinstimmungen und mehr (1448050).
  • Das Flame-Diagramm Leistung erhält einen Rahmen um das Feld mit der Gesamtzahl im Kreisdiagramm (1470147).
  • In Quellen werden Bindestriche in CSS jetzt nicht mehr als Wortzeichen behandelt (1471354).
  • Die automatische Vervollständigung sortiert CSS-spezifische Keywords jetzt immer am Ende.
  • In RegEx-Filtern werden jetzt Leerzeichen unterstützt (1346936).
  • Elemente: Funktionserkennung für feste Medienabfragen (1472693)

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