Neuerungen in den Entwicklertools (Chrome 110)

Jecelyn Yeen

Leistungsbereich beim Neuladen leeren

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

Bisher wurde im Bereich Leistung eine Zeitachse mit Screenshots aus früheren Aufnahmen angezeigt. Dadurch war es schwierig zu erkennen, wann die eigentliche Messung begann. Das Steuerfeld wird jetzt immer zuerst zur Seite about:blank weitergeleitet, damit die Aufzeichnung mit einem leeren Trace beginnt. Das entspricht dem Bereich Leistungsstatistiken, in dem das bereits der Fall war.

Leistungsbereich beim Neuladen leeren.

Chromium-Probleme: 1101268, 1382044

Rekorder-Updates

Code Ihres Nutzerflusses im Recorder ansehen und hervorheben

Der Recorder bietet jetzt eine geteilte Codeansicht, die das Anzeigen des Codes für den Nutzerfluss erleichtert. Wenn Sie auf die Codeansicht zugreifen möchten, öffnen Sie einen Nutzerfluss und klicken Sie auf Code anzeigen.

Im Recorder wird der entsprechende Code hervorgehoben, wenn Sie den Mauszeiger auf der linken Seite auf einen Schritt bewegen. So können Sie Ihren Ablauf ganz einfach nachvollziehen. Sie können das Codeformat über das Drop-down-Menü ändern und so zwischen Formaten wie dem Nightwatch Test-Skript wechseln.

Codeansicht im Recorder

Chromium-Problem: 1385489

Selectortypen einer Aufzeichnung anpassen

Sie können Aufzeichnungen erstellen, in denen nur die Selektortypen erfasst werden, die für Sie wichtig sind. Mit der neuen Option zum Anpassen von Selektortypen beim Erstellen einer neuen Aufzeichnung können Sie Selektoren wie XPath ein- oder ausschließen. So erfassen Sie in Ihren Nutzerflows nur die gewünschten Selektoren.

Neue Option zum Anpassen von Selektortypen

Chromium-Problem: 1384431

User-Flow während der Aufzeichnung bearbeiten

Mit der Rekorder App können Sie jetzt auch während der Aufnahme Änderungen vornehmen. Sie müssen die Aufnahme nicht mehr beenden, um Anpassungen vorzunehmen.

Bearbeitung während der Aufzeichnung des User Flows

Chromium-Problem: 1381971

Automatische direkte Formatierung

Im Bereich Quellen werden reduzierte Quelldateien jetzt automatisch formatiert. Sie können auf die Schaltfläche Quelltextformatierung { } klicken, um die Formatierung rückgängig zu machen.

Bisher wurden im Bereich Quellen standardmäßig minimierte Inhalte angezeigt. Um den Inhalt zu formatieren, mussten Sie manuell auf die Schaltfläche „Pretty Print“ klicken. Außerdem wurde der formatierte Inhalt nicht auf demselben Tab, sondern auf einem anderen ::formatted-Tab angezeigt.

Zeigen Sie eine minimierte Datei vor und nach dem automatischen In-Place-Formatieren.

Chromium-Probleme: 1383453, 1382752, 1382397

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

Im Bereich Quellen wurde die Syntaxhervorhebung für mehrere häufig verwendete Dateiformate verbessert. So können Sie Code leichter lesen und seine Struktur erkennen, einschließlich 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 Entwicklertools verbessert. Bewegen Sie den Mauszeiger auf eine Variable, um eine Vorschau des zugehörigen Werts aufzurufen.

Direktvorschau für Vue.

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

Link zur Quellzuordnung für SASS.

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

Ergonomische und konsistente Vervollständigung in der Console

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

  • 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 ist in allen Texteditoren, in den Bereichen Console, Sources und Elements, einheitlich.

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 mit einer dezenten gepunkteten Linie umrandet, um darauf hinzuweisen, 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 besten Vorschlag vervollständigt. Drücken Sie zum automatischen Vervollständigen entweder Tab oder Arrow Right. Die Zeile wird mit der Eingabetaste ausgeführt.

  • In der Console wird die ausgewählte Option hervorgehoben, wenn Sie mit den Tastenkombinationen Arrow up und Arrow down durch die Vorschlagsliste navigieren. Highlights während der Navigation mit Vorschlägen.

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

  • Wenn Sie Code in der Mitte bearbeiten, z. B. wenn sich der Cursor 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 wichtige Korrekturen in dieser Version:

  • Ein Regressionsproblem in den Entwicklertools, bei dem das Debugging bei der debugger-Anweisung in Inline-Scripts nicht angehalten wurde, wurde behoben. (1385374)
  • Eine neue Konsoleneinstellung, mit der Sie console.trace()-Meldungen standardmäßig maximieren oder minimieren können. Sie können die Einstellungen über Einstellungen > Einstellungen > console.trace()-Meldungen standardmäßig maximieren ein- oder ausschalten. (1139616)
  • Der Bereich Snippets im Bereich Quellen unterstützt die erweiterte automatische Vervollständigung, ähnlich wie die Konsole. (772949) Automatische Vervollständigung in Snippets

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.