Neuerungen in den Entwicklertools (Chrome 118)

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

Um die registrierten benutzerdefinierten Eigenschaften zu überprüfen, bewegen Sie unter Elemente > Stile den Mauszeiger auf den Namen der Eigenschaft. Die Beschreibungen werden in einer Kurzinfo 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

Als Ergänzung zu den Verbesserungen in der vorherigen Version bieten lokale Überschreibungen nun Folgendes:

  • 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 Originalcode statt zur Quellzuordnungsdatei gelangen.

  • Der Bereich Netzwerk enthält die neue Spalte Hat Überschreibungen und den entsprechenden Filter has-overrides:[content|headers|yes|no]. Wenn Sie die Spalte Hat Überschreibungen aufrufen möchten, klicken Sie mit der rechten Maustaste auf die Kopfzeile der Tabelle und wählen Sie sie aus.

    Filtern nach dem Wert „has-overrides:yes“ in der Spalte „Enthält Überschreibungen“.

  • In Quellen > Überschreibungen wurde die Menüoption Alle Überschreibungen löschen durch die Option Löschen ersetzt.

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

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

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

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

Die Suchergebnisse enthalten jetzt einen Eintrag für alle gefundenen Übereinstimmungen in einer Codezeile. Zuvor wurde nur die erste Übereinstimmung pro Codezeile angezeigt. Die neue Funktionsweise ist besonders nützlich, wenn Sie in komprimierten Dateien suchen. Wenn Sie auf ein Suchergebnis klicken, wird die Datei im Editor geöffnet und das Trefferbild wird jetzt nicht nur vertikal, sondern auch horizontal angezeigt.

Der Vorher und nach dem Start der Suche zeigt alle Übereinstimmungen pro Zeile an.

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

Die Suche unterstützt jetzt auch das Ignorieren von Listen. Es werden keine Ergebnisse aus ignorierten Dateien angezeigt.

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 klarer und frei von Redundanzen.
  • Verbesserte Einrichtung: Sehen Sie bessere Hinweise für das Verschieben von Ordnern per Drag-and-drop oder klicken Sie auf einen Link, um einen Ordner auszuwählen.

Über 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 für sofortige Seitennavigation vorab rendern.

Chromium-Problem: 1473875.

Medienfeature „präferenz-reduzierte-Transparenz“ emulieren

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

Um dieses Medienfeature zu emulieren, öffnen Sie den Tab Rendering und scrollen Sie nach unten.

Chromium-Problem: 1424879.

Lighthouse 11

Im Bereich Lighthouse wird jetzt Lighthouse 11 ausgeführt. Vor allem wird mit dieser Version die alte Navigation entfernt und neue Prüfungen zur Barrierefreiheit hinzugefügt. Außerdem ändert sich die Bewertung der Kategorie für Barrierefreiheit.

Eine vollständige Liste der Änderungen finden Sie hier. Grundlegende Informationen zur Verwendung des Bereichs Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Verbesserte Bedienungshilfen

Die Entwicklertools unterstützen jetzt mehr Navigationstasten:

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

Darüber hinaus wurden mehrere Probleme mit Screenreader-Ansagen behoben.

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

Verschiedene Highlights

Im Folgenden sind einige bemerkenswerte Fehlerbehebungen und Verbesserungen in dieser Version aufgeführt:

  • Netzwerk: Neue Symbole für beliebte Ressourcentypen: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
  • Farbaktualisierung für das Material 3-Farben in vielen UI-Elementen, insbesondere in den Bereichen Elemente und Leistung (1456690, 1472243).
  • Unter Probleme werden jetzt Cookie-Probleme bei der Navigation 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 für nicht durch Referenzen nicht definierte Enums, Objekte ohne Typreferenz, Filterbefehle nach Teilstring-Übereinstimmungen und mehr (1448050)
  • Das Flammendiagramm Leistung hat einen Rahmen um das Feld mit den Gesamtwerten im Kreisdiagramm (1470147).
  • Quellen behandeln Bindestriche jetzt nicht mehr als Wortzeichen in CSS (1471354).
  • Die automatische Vervollständigung sortiert Keywords in Bezug auf CSS jetzt immer am Ende.
  • RegEx-Filter unterstützen jetzt Leerzeichen (1346936).
  • Festgelegte 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 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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 101

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 gekündigt.

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