Neuerungen in den Entwicklertools (Chrome 115)

Sofia Emelianova
Sofia Emelianova

Verbesserungen bei Elementen

Neues CSS-Abzeichen für das CSS-Unterraster

Der Bereich Elemente erhält ein neues subgrid-Symbol für Unterraster. Diese Funktion befindet sich derzeit in der Testphase in Chrome Canary.

Wenn Sie ein verschachteltes Raster prüfen und debuggen möchten, das ein untergeordnetes Raster ist und daher die Anzahl und Größe der Tracks von seinem übergeordneten Element übernimmt, klicken Sie auf das Symbol. Dadurch wird ein Overlay aktiviert, in dem Spalten, Zeilen und ihre Nummern über dem Element im Viewport angezeigt werden.

Das Symbol für das untergeordnete Raster und das Overlay im Darstellungsbereich.

Eine Liste aller Logos im Bereich Elemente finden Sie in der Referenz zu Logos.

Chromium-Problem: 1442536.

Spezifität der Auswahl in Kurzinfos

Bewegen Sie den Mauszeiger unter Elemente > Stile auf den Namen eines Auswählens, um in einer Kurzinfo das Gewicht der Spezifität zu sehen.

Eine Kurzinfo mit dem Spezifitätsgewicht eines Selektors.

Chromium-Problem: 1204932

Werte benutzerdefinierter CSS-Properties in Kurzinfos

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

Die Kurzinfo mit einem Wert der benutzerdefinierten CSS-Eigenschaft.

Das DevTools-Team bedankt sich bei 一丝 und Suyan für diese Verbesserung.

Chromium-Problem: 1380779

Verbesserungen bei Quellen

CSS-Syntaxhervorhebung

Im Bereich Quellen werden für vorbehandelte CSS-Dateien wie SASS, SCSS und LESS die folgenden Informationen angezeigt:

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

Chromium-Probleme: 1302261, 1392085

Tastenkombination zum Festlegen bedingter Haltepunkte

Mit einer Tastenkombination können Sie jetzt schneller bedingte Haltestellen festlegen. Wenn Sie das Dialogfeld für den Haltepunkt öffnen möchten, 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 im Dialogfeld für den Haltepunkt.

Chromium-Problem: 1405767.

„Anwendung“ > „Eindämmung von Bounce-Tracking“

Mit dem Test Eindämmung von Bounce-Tracking in Chrome können Sie den Status von Websites ermitteln und löschen, die offenbar websiteübergreifend mithilfe von Bounce-Tracking-Methoden erfassen. Im Bereich Anwendung > Hintergrunddienste gibt es einen neuen Tab Maßnahmen zur Bounce-Tracking-Minimierung, auf dem Sie Maßnahmen zur Tracking-Minimierung manuell erzwingen können. Außerdem werden dort die Websites aufgeführt, deren Status gelöscht wurde.

Hier eine Sicherheitsfunktion:

  1. Drittanbieter-Cookies in Chrome blockieren Gehen Sie zu Dreipunkt-Menü > Einstellungen > Sicherheit Datenschutz und Sicherheit > Cookies und andere Websitedaten > Optionsfeld ist ausgewählt. Drittanbieter-Cookies blockieren und aktivieren Sie diese Option.
  2. Legen Sie in chrome://flags für den Test Eindämmung von Bounce-Tracking die Option Mit Löschen aktiviert fest.
  3. Sehen Sie sich diese Demoseite an, öffnen Sie Anwendung > Hintergrunddienste > Maßnahmen zur Minimierung des Auslösens von „Absprung“, klicken Sie auf einen Sprunglink auf der Seite, warten Sie 10 Sekunden, bis Chrome den Auslöser erfasst hat, und klicken Sie auf Erzwungenen Durchlauf, um den Status sofort zu löschen.

Unter „Eindämmung von Bounce-Tracking“ wird ein Status gelöscht.

Außerdem werden Sie auf dem Tab Probleme über die bevorstehende Statuslöschung informiert.

Chromium-Problem: 1432303

Lighthouse 10.2.0

Im Bereich Lighthouse wird jetzt Lighthouse 10.2.0 ausgeführt. Insbesondere wird für die Prüfung des Largest Contentful Paint eine Tabelle mit Phasenberechnungen für die simulierte und die DevTools-Drosselung angezeigt. Weitere Informationen finden Sie in der vollständigen Liste der Änderungen.

Die LCP-Phasentabelle.

Informationen zu den Grundlagen der Verwendung des Lighthouse-Steuerfelds in den DevTools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558

Inhaltsscripts standardmäßig ignorieren

Die Option Einstellungen. Einstellungen > Ignorierliste > Kästchen. Von Erweiterungen eingefügte Inhaltsskripte ist jetzt standardmäßig aktiviert.

Wenn diese Einstellung aktiviert ist, gilt Folgendes:

  • Der Debugger ignoriert solche Scripts und hält nicht an den von ihnen ausgelösten Ausnahmen an.
  • Ignorierte Frames werden im Bereich Quellen > Aufrufstack übersprungen. Wenn Sie das Überspringen hier deaktivieren möchten, setzen Sie ein Häkchen bei Kästchen. Frames auf der Ignorierliste anzeigen.
  • In der Konsole werden ignorierte Frames in Stack-Traces minimiert. Klicken Sie auf N weitere Frames anzeigen, um die Ansicht zu maximieren, und auf Weniger anzeigen, um sie wieder zu minimieren.

Von Erweiterungen eingefügte Inhaltsskripte sind standardmäßig aktiviert. Sie finden sie in den Einstellungen unter „Ignorierliste“.

Außerdem wurde der Text in den Kästchen unter Ignorierliste verständlicher formuliert.

Chromium-Probleme: 1440958, 1364501

Netzwerk > Standardmäßig schönes Drucken von Antworten

Im Bereich Netzwerk > Antwort werden minimierte Antwortkörper jetzt standardmäßig im Pretty-Print-Format dargestellt, ähnlich wie im Bereich Quellen.

Im Antwortfenster auf dem Tab „Netzwerk“ wurde die schöne Ausgabe aktiviert.

Außerdem werden SVG-Dateien syntaxfarbig hervorgehoben.

SVG-Syntaxhervorhebung

Chromium-Probleme: 1382752, 1385374.

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Einstellungen. Einstellungen > Geräte: Facebook für Android v407 auf Google Pixel 6 wurde der Liste der Agentenstrings hinzugefügt.
  • Netzwerk: Es wurde die Verknüpfung Netzwerkprotokoll löschen (1444991) hinzugefügt:
    • macOS: Befehlstaste + K
    • Windows/Linux: Strg + L
  • Das Drop-down-Menü Aufzeichnung > Aufzeichnung N > Bereich „Leistungsstatistiken“ wurde entfernt (1414773).
  • Stylesheets, die nicht geladen werden konnten, werden jetzt im Navigationsbaum ausgeblendet (1386059).
  • Leistung: Die Anzeige des ausblendbaren Interaktionen-Tracks wurde korrigiert (1432510).
  • 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 kein Plug-in für die jeweilige Sprache vorhanden ist (1443342).
  • Die Tastenkombination, mit der der Cursor jeweils ein Wort weiter bewegt wird, wurde für CSS-Dateien unter Quellen > Editor (1241848) wiederhergestellt:
    • macOS: Alt + Pfeil
    • Windows/Linux: Strg + Pfeil

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.