Neuerungen in den Entwicklertools (Chrome 115)

Sofia Emelianova
Sofia Emelianova

Verbesserungen an Elementen

Neues Preisvergleichsportal-Logo

Der Bereich Elemente erhält ein neues subgrid-Abzeichen für subgrid. Diese Funktion wird derzeit in Chrome Canary getestet.

Klicken Sie auf das Logo, um ein verschachteltes Raster, das ein untergeordnetes Raster ist und daher die Anzahl und Größe der Tracks vom übergeordneten Raster übernimmt, zu überprüfen und Fehler zu beheben. Damit wird ein Overlay umgeschaltet, das Spalten, Zeilen und deren Zahlen über dem Element im Darstellungsbereich anzeigt.

Das Logo des Subrasters und das Overlay im Darstellungsbereich.

Eine Liste aller Badges im Bereich Elemente findest du unter Badges-Referenz.

Chromium-Problem: 1442536.

Selektorspezifität in Kurzinfos

Bewegen Sie den Mauszeiger unter Elemente > Stile auf einen Selektornamen, um die Gewichtung der Spezifität in einer Kurzinfo zu sehen.

Eine Kurzinfo mit der Spezifitätsgewichtung eines Selektors.

Chromium-Problem: 1204932.

Werte von benutzerdefinierten CSS-Eigenschaften in Kurzinfos

Bewegen Sie unter Elemente > Stile den Mauszeiger auf den Namen einer benutzerdefinierten CSS-Eigenschaft, um ihren Wert in einer Kurzinfo zu sehen.

Die Kurzinfo mit einem Wert der benutzerdefinierten CSS-Eigenschaft.

Das Entwicklertools-Team möchte sich bei 丝 und Suyan für diese Verbesserung bedanken.

Chromium-Problem: 1380779.

Verbesserte Quellen

CSS-Syntaxhervorhebung

Im Bereich Quellen werden für vorverarbeitete CSS-Dateien wie SASS, SCSS und LESS folgende Informationen angezeigt:

  • Syntaxhervorhebung.
  • Unterstützung für Inline-Editoren. Diese Editoren ähneln denen unter Elemente > Stile, z. B. Farbauswahl und Easing-Editor.

Verbesserte CSS-Syntaxhervorhebung und Unterstützung von Inline-Editoren in „Quellen“.

Chromium-Probleme: 1302261, 1392085.

Verknüpfung zum Festlegen bedingter Haltepunkte

Sie können bedingte Haltepunkte jetzt über eine Tastenkombination schneller setzen. Um das Haltepunkt-Dialogfeld zu öffnen, halten Sie die Befehlstaste (MacOS) oder die Strg-Taste (Windows / Linux) gedrückt und klicken Sie in der linken Spalte von Quellen > Editor auf die Zeilennummer.

Die Zeilennummer in der linken Spalte und das Haltepunktdialogfeld.

Chromium-Problem: 1405767.

Anwendung > Eindämmung von Bounce-Tracking

Mithilfe des Tests zur Eindämmung von Bounce-Tracking in Chrome können Sie den Status von Websites ermitteln und löschen, die mithilfe des Bounce-Tracking-Verfahrens websiteübergreifendes Tracking durchführen. Im Bereich Anwendung > Hintergrunddienste wird der neue Tab Eindämmung von Bounce-Tracking angezeigt. Dort können Sie manuell Eindämmungen des Trackings erzwingen und die Websites auflisten, deren Status gelöscht wurden.

Probieren Sie diese Sicherheitsfunktion aus:

  1. Drittanbieter-Cookies in Chrome blockieren Aktivieren Sie Dreipunkt-Menü. > Einstellungen > Sicherheit Datenschutz und Sicherheit > Cookies und andere Websitedaten > Optionsfeld aktiviert. Drittanbieter-Cookies blockieren.
  2. Legen Sie in chrome://flags den Test Eindämmung von Bounce-Tracking auf Mit Löschung aktiviert fest.
  3. Sehen Sie sich diese Demoseite an, öffnen Sie Anwendung > Hintergrunddienste > Eindämmung von Bounce-Tracking, klicken Sie auf einen Bounce-Link auf der Seite, warten Sie 10 Sekunden, bis Chrome den Bounce erfasst, und klicken Sie auf Ausführung erzwingen, um den Status sofort zu löschen.

Die Eindämmung von Bounce-Tracking listet eine Statuslöschung auf.

Außerdem werden Sie auf dem Tab Probleme gewarnt, wenn der Status demnächst gelöscht wird.

Chromium-Problem: 1432303.

Lighthouse 10.2.0

Im Bereich Lighthouse wird jetzt Lighthouse 10.2.0 ausgeführt. Vor allem wird bei der Prüfung Largest Contentful Paint eine Tabelle mit Phasenberechnungen für die simulierte Drosselung und die Entwicklertools-Drosselung bereitgestellt. Eine vollständige Liste der Änderungen finden Sie hier.

Tabelle mit LCP-Phasen

Grundlegende Informationen zur Verwendung des Bereichs Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Content-Skripts standardmäßig ignorieren

Unter Einstellungen. Einstellungen > Ignorieren-Liste > Kästchen. Von Erweiterungen eingefügte Inhaltsskripte ist jetzt standardmäßig aktiviert.

Wenn diese Einstellung aktiviert ist, gilt Folgendes:

  • Der Debugger ignoriert solche Skripts und stoppt nicht bei den von ihnen ausgelösten Ausnahmen.
  • Im Bereich Quellen > Aufrufstack werden ignorierte Frames übersprungen. Wenn Sie das Überspringen hier deaktivieren möchten, klicken Sie auf das Kästchen Kästchen. Frames auf der Ignorieren-Liste anzeigen.
  • Die Console blendet ignorierte Frames in Stacktraces aus. Klicken Sie auf N weitere Frames anzeigen, um sie zu maximieren, und auf Weniger anzeigen, um sie wieder zu minimieren.

Inhaltsskripts, die von standardmäßig aktivierten Erweiterungen eingeschleust werden. Rufe dazu „Einstellungen“ und dann „Ignorierliste“ auf.

Außerdem wurden die Kästchen in der Liste Ignorieren-Liste jetzt verständlicher dargestellt.

Chromium-Probleme: 1440958, 1364501.

Netzwerk > Standard-Green-Printing für Antworten

Im Bereich Netzwerk > Antwort werden jetzt standardmäßig reduzierte Antworttexte übersichtlich dargestellt, ähnlich wie im Bereich Quellen.

Optimierte Druckfunktion im Antwortfenster auf dem Tab "Netzwerk" aktiviert.

Darüber hinaus wird für SVG-Dateien eine Syntaxhervorhebung eingeblendet.

SVG-Syntaxhervorhebung.

Chromium-Probleme: 1382752, 1385374.

Verschiedene Highlights

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

  • Einstellungen. Einstellungen > Geräte: Facebook für Android Version 407 auf Pixel 6 wurde der Liste der Agent-Strings hinzugefügt.
  • Netzwerk: Verknüpfung Netzwerkprotokoll löschen hinzugefügt (1444991):
    • macOS: Befehlstaste + K
    • Windows/Linux: Strg + L
  • Die Drop-down-Option Rekorder > Aufnahme N > Bereich „Leistungsstatistiken“ wurde entfernt (1414773).
  • Stylesheets, die nicht geladen werden konnten, werden jetzt in der Navigationsstruktur ausgeblendet (1386059).
  • Leistung: Fehlerhafte Darstellung des maximierbaren Tracks Interactions (1432510) wurde behoben.
  • Elemente: Stylesheets, die nicht geladen werden konnten, werden jetzt mit gewellten Linien unterstrichen (1440626).
  • Der Debugger führt nicht automatisch einen Schritt in WebAssembly aus, wenn für die entsprechende Sprache kein Plug-in vorhanden ist (1443342).
  • Die Tastenkombination, mit der der Cursor Wort für Wort bewegt wird, wird für CSS-Dateien unter Quellen > Editor (1241848) wiederhergestellt:
    • macOS: Alt + Pfeil
    • Windows/Linux: Strg + Pfeil

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