Neuerungen in den Entwicklertools (Chrome 115)

Sofia Emelianova
Sofia Emelianova
GitHub

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

Gehen Sie unter Elemente > Stile: Bewegen Sie den Mauszeiger auf einen Selektornamen, um die Spezifitätsgewichtung in einer Kurzinfo zu sehen.

Eine Kurzinfo mit der Spezifitätsgewichtung eines Selektors.

Chromium-Problem: 1204932.

Werte von benutzerdefinierten CSS-Eigenschaften in Kurzinfos

Gehen Sie unter Elemente > Styles: Bewegen Sie 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 Verknüpfung schneller setzen. Um das Haltepunkt-Dialogfeld zu öffnen, halten Sie die Befehlstaste (MacOS) oder die Strg-Taste (Windows / Linux) gedrückt und klicken Sie auf die Zeilennummer in der linken Spalte des Bereichs Quellen > Bearbeiter:

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. Über die Anwendung > Im Bereich Hintergrunddienste gibt es den neuen Tab Eindämmung von Bounce-Tracking, über den Sie manuell Eindämmungen des Trackings erzwingen können. Außerdem werden die Websites aufgelistet, deren Status gelöscht wurden.

Probieren Sie diese Sicherheitsfunktion aus:

  1. Drittanbieter-Cookies in Chrome blockieren Dreipunkt-Menü. aufrufen und aktivieren > 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 das 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

Über die Einstellungen. Einstellungen > Ignorierliste > Kästchen. Von Erweiterungen eingefügte Inhaltsskripte sind 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.
  • Die Quellen > Im Bereich Call Stack 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 > Standardmäßiges Drucken von Antworten

Das Netzwerk > Im Bereich 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: Der Liste der Agent-Strings wurde Facebook für Android v407 auf Pixel 6 hinzugefügt.
  • Netzwerk: Verknüpfung Netzwerkprotokoll löschen hinzugefügt (1444991):
    • macOS: Befehlstaste + K
    • Windows/Linux: Strg + L
  • Rekorder entfernt > Aufnahme N > im Bereich Leistungsstatistiken (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 wiederhergestellt. Bearbeiter (1241848): <ph type="x-smartling-placeholder">
      </ph>
    • macOS: Alt + Pfeil
    • Windows/Linux: Ctrl + Ctrl

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.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > 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