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 Profiling starten und Seite neu laden klicken.

Bisher wurde im Bereich Leistung eine Zeitachse mit Screenshots aus früheren Aufzeichnungen 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.

Chromium-Probleme: 1101268, 1382044

Rekorder-Updates

Code Ihres Nutzerflusses im Recorder ansehen und hervorheben

Im Recorder ist jetzt eine geteilte Codeansicht verfügbar, die das Ansehen 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 zwischen Formaten wie dem Nightwatch Test-Skript wechseln.

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.

Chromium-Problem: 1384431

User-Flow während der Aufzeichnung bearbeiten

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

Chromium-Problem: 1381971

Automatische direkte Formatierung

Im Bereich Quellen werden reduzierte Quelldateien jetzt automatisch formatiert. Sie können auf die Schaltfläche Pretty Print { } klicken, um den Vorgang 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.

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.

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.

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.

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.

• 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.

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

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

• 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.

Chromium-Probleme: 1399436, 1276960

Sonstige Highlights

Hier sind einige wichtige Korrekturen in dieser Version:

• Ein Regressionsproblem in den Entwicklertools, bei dem das Programm nicht bei der debugger-Anweisung in Inline-Scripts 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)

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.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

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