Neuerungen in den Entwicklertools (Chrome 115)

Sofia Emelianova
Sofia Emelianova
GitHub

Verbesserungen bei Elementen

Neues CSS-Subgrid-Emblem

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, das ein Unterraster ist und daher die Anzahl und Größe der Spuren vom übergeordneten Element erbt, untersuchen und debuggen möchten, klicken Sie auf das Symbol. Damit wird ein Overlay ein- oder ausgeblendet, in dem Spalten, Zeilen und ihre Nummern über dem Element im Viewport angezeigt werden.

Das Subgrid-Symbol und das Overlay im Darstellungsbereich.

Eine Liste aller Badges im Bereich Elemente finden Sie in der Badge-Referenz.

Chromium-Problem: 1442536.

Selektorspezifität in Kurzinfos

Bewegen Sie den Mauszeiger unter Elemente > Stile auf einen Selektornamen, um das Gewicht der Spezifität in einem Kurzinfo-Fenster 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 ihren Wert in einem Kurzinfo-Fenster zu sehen.

Die Kurzinfo mit einem Wert der benutzerdefinierten CSS-Eigenschaft.

Das DevTools-Team möchte 一丝 und Suyan für diese Verbesserung danken.

Chromium-Problem: 1380779.

Verbesserungen bei den Quellen

CSS-Syntaxhervorhebung

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

  • Syntaxhervorhebung
  • Unterstützung von 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.

Tastenkombination zum Festlegen bedingter Haltepunkte

Sie können jetzt bedingte Haltepunkte schneller mit einer Tastenkombination festlegen. Wenn Sie das Breakpoint-Dialogfeld ö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 das Haltepunkt-Dialogfeld.

Chromium-Problem: 1405767.

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

Mit dem Bounce-Tracking-Eindämmung-Test in Chrome können Sie den Status von Websites, die anscheinend websiteübergreifendes Tracking mit der Bounce-Tracking-Technik durchführen, identifizieren und löschen. Der Bereich Anwendung > Hintergrunddienste erhält einen neuen Tab Bounce-Tracking-Maßnahmen, auf dem Sie Tracking-Maßnahmen manuell erzwingen und die Websites auflisten können, deren Status gelöscht wurde.

Sehen Sie sich diese Sicherheitsfunktion an:

  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 die Option.
  2. Stellen Sie in chrome://flags den Test Eindämmung von Bounce-Tracking auf Aktiviert mit Löschung ein.
  3. Sehen Sie sich diese Demoseite an, öffnen Sie Anwendung > Hintergrunddienste > Maßnahmen gegen Bounce-Tracking, klicken Sie auf einen Bounce-Link auf der Seite, warten Sie 10 Sekunden, bis Chrome den Bounce aufzeichnet, und klicken Sie auf Ausführung erzwingen, um den Status sofort zu löschen.

Unter „Eindämmung von Bounce-Tracking“ wird ein Löschen des Status aufgeführt.

Außerdem werden Sie auf dem Tab Probleme vor dem bevorstehenden Löschen des Status gewarnt.

Chromium-Problem: 1432303.

Lighthouse 10.2.0

Im Bereich Lighthouse wird jetzt Lighthouse 10.2.0 ausgeführt. Insbesondere beim LCP-Check (Largest Contentful Paint) wird eine Tabelle mit Phasenberechnungen für die simulierte und die DevTools-Drosselung angezeigt. Vollständige Liste der Änderungen

Die LCP-Phasentabelle.

Die Grundlagen zur Verwendung des Lighthouse-Bereichs in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Content-Scripts 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 Skripts und stoppt nicht an den von ihnen ausgelösten Ausnahmen.
  • Im Bereich Quellen > Aufrufstack werden ignorierte Frames übersprungen. Wenn Sie das Überspringen hier deaktivieren möchten, setzen Sie ein Häkchen bei Kästchen. Frames auf der Ignorierliste anzeigen.
  • In der Console werden ignorierte Frames in Stacktraces minimiert. Klicken Sie auf N weitere Frames anzeigen, um die Liste zu maximieren, und auf Weniger anzeigen, um sie wieder zu minimieren.

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

Außerdem wurde der Text für die Kästchen in der Ignore List (Liste der zu ignorierenden Elemente) überarbeitet.

Chromium-Probleme: 1440958, 1364501.

Netzwerk > Antwort standardmäßig formatieren

Im Bereich Netzwerk > Antwort werden minimierte Antworttextkörper jetzt standardmäßig formatiert, ähnlich wie im Bereich Quellen.

Die Funktion „Pretty Print“ wurde im Antwortfenster des Tabs „Netzwerk“ aktiviert.

Außerdem wird die Syntax von SVG-Dateien hervorgehoben.

Syntaxhervorhebung für SVG.

Chromium-Probleme: 1382752, 1385374.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Einstellungen. Einstellungen > Geräte: Der Liste der Agent-Strings wurde Facebook für Android v407 auf Pixel 6 hinzugefügt.
  • Netzwerk: Die Verknüpfung Netzwerkprotokoll löschen (1444991) wurde hinzugefügt:
    • macOS: Befehlstaste + K
    • Windows/Linux: Strg + L
  • Die Drop-down-Option Recorder > Aufzeichnung N > Leistungsübersicht wurde entfernt (1414773).
  • Stylesheets, die nicht geladen werden konnten, werden jetzt im Navigationsbaum ausgeblendet (1386059).
  • Leistung: Die Einblendung des aufklappbaren Tracks Interaktionen wurde korrigiert (1432510).
  • Elemente: Stylesheets, die nicht geladen werden konnten, sind jetzt mit Wellenlinien unterstrichen (1440626).
  • Der Debugger wechselt nicht automatisch zu WebAssembly, 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 wiederhergestellt (1241848):
    • macOS: Wahltaste + Pfeiltaste
    • Windows/Linux: Strg + Pfeiltaste

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.