Neuerungen in den Entwicklertools (Chrome 108)

Jecelyn Yeen

Hinweise für inaktive CSS-Properties

DevTools erkennt jetzt CSS-Stile, die zwar gültig sind, aber keine sichtbare Wirkung haben. Im Bereich Stile werden inaktive Eigenschaften in DevTools ausgeblendet. Bewegen Sie den Mauszeiger auf das Symbol daneben, um zu erfahren, warum die Regel keine sichtbaren Auswirkungen hat.

Hinweise für inaktive CSS-Properties.

Chromium-Problem: 1178508

XPath- und Text-Selectors im Rekorder-Bereich automatisch erkennen

Das Feld Rekorder unterstützt jetzt XPath- und Text-Selectors. Nutzerfluss aufzeichnen: Der Rekorder wählt automatisch den XPath und den kürzesten eindeutigen Text eines Elements als Selektor aus, sofern verfügbar.

XPath- und Text-Selectors im Bereich „Rekorder“.

Chromium-Probleme: 1327206,1327209

Durch kommagetrennte Ausdrücke gehen

Sie können jetzt beim Debuggen durch kommagetrennte Ausdrücke gehen. Dadurch wird die Debugging-Fähigkeit von minimiertem Code verbessert.

Schrittweise durch kommagetrennte Ausdrücke gehen.

Bisher wurde in DevTools nur das Durchlaufen von durch Semikolon getrennten Ausdrücken unterstützt.

Angenommen, Sie haben den folgenden Code:

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

Transpiler und Minifier können sie in kommagetrennte Ausdrücke umwandeln.

function bar(){return foo(),foo(),42}

Das kann beim Debuggen zu Verwirrung führen, da sich das Stepping-Verhalten zwischen minimiertem und selbst geschriebenem Code unterscheidet. Das ist noch verwirrender, wenn Sie Sourcemaps verwenden, um den minimierten Code anhand des Originalcodes zu debuggen. Der Entwickler sieht dann Semikolons (die von der Toolchain in Kommas umgewandelt wurden), aber der Debugger hält nicht an ihnen an.

Chromium-Problem: 1370200

Verbesserte Einstellung für die Ignorierliste

Rufen Sie die Einstellungen > Ignore List auf. In DevTools wurde das Design verbessert, damit Sie die Regeln so konfigurieren können, dass ein einzelnes Skript oder ein Muster von Skripts ignoriert wird.

Der Tab „Ignorieren-Liste“.

Chromium-Problem: 1356517

Sonstige Highlights

Hier sind einige wichtige Korrekturen in dieser Version:

  • CSS-Attributname im Bereich Styles durch Drücken der Leertaste automatisch vervollständigen (1343316)
  • Entfernen Sie den automatischen Bildlauf im Breadcrumb-Menü des Bereichs Element. (1369734)

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.