Neuerungen in den Entwicklertools (Chrome 110)

Jecelyn Yeen

Bereich „Leistung“ beim Aktualisieren gelöscht

Im Bereich Leistung werden jetzt sowohl der Screenshot als auch der Trace gelöscht, wenn Sie auf die Schaltfläche Profilierung starten und Seite neu laden klicken.

Bisher wurde im Bereich Leistung eine Zeitachse mit Screenshots aus vorherigen Aufzeichnungen angezeigt. Dadurch war es schwierig zu erkennen, wann die eigentliche Messung begann. Das Steuerfeld wechselt jetzt immer zuerst zur Seite about:blank, damit die Aufzeichnung mit einer leeren Spur beginnt. Das entspricht dem Bereich Leistungsstatistiken, in dem dies bereits der Fall war.

Der Bereich „Leistung“ wird beim Aktualisieren gelöscht.

Chromium-Probleme: 1101268, 1382044

Updates für den Rekorder

Code des Nutzerflusses im Rekorder ansehen und hervorheben

Der Aufzeichnungstool bietet jetzt eine Codeansicht mit zwei Spalten, die die Ansicht des Nutzerfluss-Codes erleichtert. Wenn Sie auf die Codeansicht zugreifen möchten, öffnen Sie einen Nutzerfluss und klicken Sie auf Code anzeigen.

Im Aufzeichnungstool wird der entsprechende Code hervorgehoben, wenn Sie den Mauszeiger auf die einzelnen Schritte links bewegen. So können Sie den Ablauf ganz einfach verfolgen. Über das Drop-down-Menü können Sie das Codeformat ändern und so zwischen Formaten wie dem Nightwatch-Testskript wechseln.

Codeansicht im Rekorder

Chromium-Problem: 1385489

Selectortypen einer Aufnahme anpassen

Sie können Aufzeichnungen erstellen, bei denen nur die Auswahltypen erfasst werden, die für Sie wichtig sind. Mit der neuen Option zum Anpassen von Auswahltypen beim Erstellen einer neuen Aufnahme können Sie Auswahlen wie XPath ein- oder ausschließen, damit nur die gewünschten Auswahlen in Ihren Nutzerflüssen erfasst werden.

Neue Option zum Anpassen von Auswahltypen.

Chromium-Problem: 1384431

Aufrufabfolge während der Aufnahme bearbeiten

Mit dem Rekorder können Sie jetzt während der Aufnahme Änderungen vornehmen und so flexibel in Echtzeit arbeiten. Sie müssen die Aufnahme nicht mehr beenden, um Anpassungen vorzunehmen.

Bearbeiten während der Aufzeichnung des User Flows

Chromium-Problem: 1381971

Automatische direkte Formatierung

Im Bereich Quellen werden minimierte Quelldateien jetzt automatisch an Ort und Stelle formatiert. Sie können auf die Schaltfläche Schönformatierung { } klicken, um die Änderung rückgängig zu machen.

Bisher wurden im Bereich Quellen standardmäßig minimierte Inhalte angezeigt. Zum Formatieren des Inhalts mussten Sie manuell auf die Schaltfläche „Schöner Ausdruck“ klicken. Außerdem wurden die schön formatierten Inhalte nicht auf demselben Tab, sondern auf einem anderen ::formatted-Tab angezeigt.

Eine minimierte Datei vor und nach der automatischen Formatierung anzeigen.

Chromium-Probleme: 1383453, 1382752, 1382397

Verbesserte Syntaxhervorhebung und Inline-Vorschau für Vue, SCSS und mehr

Im Bereich Quellen wurde die Syntaxhervorhebung für mehrere gängige Dateiformate verbessert, damit Sie Code leichter lesen und seine Struktur erkennen können. Dazu gehören Vue, JSX, Dart, LESS, SCSS, SASS und Inline-CSS.

Syntaxhervorhebung in Vue

Außerdem wurde die Inline-Vorschau für Vue, Inline-HTML und TSX in den DevTools verbessert. Bewegen Sie den Mauszeiger auf eine Variable, um eine Vorschau des Werts zu sehen.

Inline-Vorschau für Vue.

Außerdem wird in den DevTools jetzt die Quellzuordnung eines Stylesheets im Bereich Quellen angezeigt. Wenn Sie beispielsweise eine SCSS-Datei öffnen, können Sie über den Link zur Quellzuordnung auf die zugehörige CSS-Datei zugreifen.

Link zur Quellzuordnung für SASS.

Chromium-Probleme: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

Ergonomischer und einheitlicher Autocomplete in der Console

In den DevTools wurde die automatische Vervollständigung durch die folgenden Änderungen verbessert:

  • Tab wird immer für die automatische Vervollständigung verwendet.
  • Das Verhalten von Arrow right und Enter variiert je nach Kontext.
  • Die automatische Vervollständigung funktioniert in allen Texteditoren und in den Bereichen Konsole, Quellen und Elemente gleich.

Wenn Sie beispielsweise cons in die Konsole eingeben, passiert Folgendes:

  • In der Konsole wird eine Liste mit Vorschlägen für die automatische Vervollständigung angezeigt. Die oberste Option ist durch einen dezenten gepunkteten Rahmen gekennzeichnet, der darauf hinweist, dass die Navigation noch nicht begonnen hat. Gepunkteter Rahmen um die oberste Option für die automatische Vervollständigung.

  • In der Konsole wird die Zeile ausgeführt, wenn Sie Enter drücken. Bisher wurde die Zeile automatisch mit dem obersten Vorschlag vervollständigt. Drücken Sie zum automatischen Ausfüllen entweder Tab oder Arrow Right. Die Zeile wird bei Eingabe der Eingabetaste ausgeführt.

  • In der Console wird die ausgewählte Option hervorgehoben, wenn Sie sich mit den Tastenkürzeln Arrow up und Arrow down durch die Vorschlagsliste bewegen. Highlights während der Navigation durch Vorschläge

  • Wenn Sie während der Navigation die ausgewählte Option automatisch vervollständigen möchten, verwenden Sie die Tasten Tab, Enter oder Arrow Right. Automatische Vervollständigung mit der ausgewählten Option während der Navigation.

  • Wenn Sie mitten im Code bearbeiten, also wenn sich der Cursor beispielsweise zwischen n und s befindet, verwenden Sie Tab für die automatische Vervollständigung, Enter zum Ausführen der Zeile und Arrow Right, um den Cursor vorwärts zu bewegen. Bearbeitung in der Mitte des Codes

Chromium-Probleme: 1399436, 1276960

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

  • Ein Regressionsproblem in den DevTools, bei dem die Ausführung in Inline-Scripts nicht bei der debugger-Anweisung angehalten wurde, wurde behoben. (1385374)
  • Eine neue Console-Einstellung, mit der Sie console.trace()-Nachrichten standardmäßig maximieren oder minimieren können. Sie können die Einstellungen unter Einstellungen > Einstellungen > console.trace()-Nachrichten standardmäßig maximieren aktivieren oder deaktivieren. (1139616)
  • Der Bereich Snippets im Bereich Quellen unterstützt eine erweiterte automatische Vervollständigung, ähnlich wie in der Console. (772949) Autovervollständigung in Snippets

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.