Neuerungen in den Entwicklertools (Chrome 118)

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.

Unter Elemente > Stile: Bewegen Sie den Mauszeiger auf den Namen der Eigenschaft. Daraufhin werden die Beschreibungen 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:

• Gehen Sie unter Quellen > Seite: Wenn Sie 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.

  

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

  

• Gehen Sie unter Quellen > Überschreibungen: Die Menüoption Alle Überschreibungen löschen wurde durch die Option Löschen mit präziser Funktionsweise ersetzt.

  

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 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 du die vorherige Option wieder aktivieren möchtest, aktiviere die Option „Alle Überschreibungen vorübergehend löschen“ in den Einstellungen >. Tests.

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

Erweiterte Suche

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.

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 sehen Sie im Abschnitt Quellen > Der Bereich Dateisystem wurde 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.

Quellen > Mit Workspace 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 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.

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 Anwendungen > Verbesserungen beim Vorabladen, insbesondere sortierbare Raster und überarbeitete Details des Regelsatzes (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).
• 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 erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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 > 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