Neuerungen in den Entwicklertools (Chrome 110)

Jecelyn Yeen

Leistungsbereich wird beim Aktualisieren gelöscht

Im Steuerfeld Leistung werden jetzt sowohl der Screenshot als auch der Trace gelöscht, wenn Sie auf die Schaltfläche Profilerstellung starten und Seite aktualisieren klicken.

Bisher wurde im Bereich Leistung eine Zeitachse mit Screenshots aus vorherigen Aufnahmen angezeigt. Daher war es schwierig, den Beginn der eigentlichen Messung zu erkennen. Im Bereich wird jetzt immer zuerst die Seite about:blank aufgerufen, damit die Aufzeichnung mit einem leeren Trace beginnt. Das gilt auch für den Bereich Leistungsstatistiken, in dem diese Änderung bereits erfolgt ist.

Das Steuerfeld „Leistung“ wird beim Aktualisieren gelöscht.

Chromium-Probleme: 1101268, 1382044

Updates für Rekorder

Code Ihres User Flows in der Rekorder App ansehen und hervorheben

Der Rekorder bietet jetzt eine geteilte Codeansicht, in der Sie sich den User Flow-Code einfacher ansehen können. Um auf die Codeansicht zuzugreifen, öffnen Sie einen User Flow und klicken Sie auf Show Code (Code anzeigen).

Der Rekorder hebt den entsprechenden Code hervor, wenn Sie den Mauszeiger links auf die einzelnen Schritte bewegen. So können Sie Ihren Ablauf einfach verfolgen. Sie können das Codeformat über das Drop-down-Menü ändern und zwischen Formaten wie dem Skript Nightwatch Test wechseln.

Codeansicht in der Rekorder App.

Chromium-Problem: 1385489

Auswahltypen einer Aufnahme 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, damit nur die Selektoren erfasst werden, die Sie in Ihren User Flows wünschen.

Neue Option zur Anpassung von Selektortypen.

Chromium-Problem: 1384431

User Flow während der Aufzeichnung bearbeiten

Mit der Rekorder App können jetzt Aufnahmen während einer Aufzeichnung bearbeitet werden. So lassen sich Änderungen in Echtzeit vornehmen. Sie müssen die Aufzeichnung nicht mehr beenden, um Anpassungen vorzunehmen.

Bearbeitung während der User Flow-Aufzeichnung.

Chromium-Problem: 1381971

Automatischer Direktdruck

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

Bisher wurden im Bereich Quellen standardmäßig reduzierte Inhalte angezeigt. Um den Inhalt zu formatieren, mussten Sie manuell auf die Schaltfläche "ordentliches Drucken" klicken. Außerdem wurde der schön gedruckte Inhalt nicht im selben Tab, sondern auf einem anderen ::formatted-Tab angezeigt.

Zeigt eine komprimierte Datei vor und nach dem automatischen Direktdruck an der richtigen Stelle an.

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, sodass Sie Code einfacher lesen und seine Struktur erkennen können, darunter Vue, JSX, Dart, LESS, SCSS, SASS und Inline-CSS.

Syntaxhervorhebung in Vue.

Darüber hinaus wurde in den Entwicklertools auch die Inline-Vorschau für Vue, Inline-HTML und TSX verbessert. Bewegen Sie den Mauszeiger auf eine Variable, um ihren Wert in der Vorschau anzuzeigen.

Inline-Vorschau für Vue.

Abgesehen davon wird in den Entwicklertools jetzt im Steuerfeld Quellen die Source Map eines Stylesheets angezeigt. Wenn Sie beispielsweise eine SCSS-Datei öffnen, können Sie auf die zugehörige CSS-Datei zugreifen, indem Sie auf den Link der Sourcemap klicken.

Quellzuordnungslink für SASS.

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

Ergonomische und konsistente automatische Vervollständigung in der Console

Die Entwicklertools bieten folgende Änderungen an der automatischen Vervollständigung:

  • 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, Quellen und Elemente einheitlich.

Wenn Sie beispielsweise cons in die Console eingeben, geschieht Folgendes:

  • Die Konsole zeigt eine Liste mit Vorschlägen für die automatische Vervollständigung an. Die obere Option wird mit einem dezenten gepunkteten Rahmen angezeigt, der darauf hinweist, dass die Navigation noch nicht begonnen hat. Gepunkteter Rahmen um die obere Option für die automatische Vervollständigung.

  • Wenn Sie Enter drücken, führt die Console die Zeile aus. Zuvor wurde die Zeile mit dem obersten Vorschlag automatisch vervollständigt. Für die automatische Vervollständigung drücken Sie entweder Tab oder Arrow Right. Führt die Zeile bei der Eingabetaste aus.

  • Die Konsole hebt die ausgewählte Option hervor, während Sie durch die Vorschlagsliste navigieren. Verwenden Sie dazu die Tastenkürzel Arrow up und Arrow down. Markierungen bei der Navigation für Vorschläge.

  • Um die ausgewählte Option während der Navigation automatisch zu vervollständigen, 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 schreiben und 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. Sie arbeiten mitten im Code.

Chromium-Probleme: 1399436, 1276960

Verschiedene Highlights

Im Folgenden sind einige wichtige Fehlerkorrekturen in dieser Version aufgeführt:

  • Ein Regressionsproblem in den Entwicklertools, bei dem in Inline-Skripts bei der debugger-Anweisung nicht beendet werden konnte, wurde behoben. (1385374)
  • Eine neue Konsoleneinstellung, mit der Sie console.trace()-Nachrichten standardmäßig maximieren oder minimieren können. Du kannst die Einstellungen über Einstellungen umschalten > Einstellungen > Maximieren Sie „console.trace()“-Nachrichten standardmäßig. (1139616)
  • Der Bereich Snippets im Bereich Quellen unterstützt die erweiterte automatische Vervollständigung, ähnlich wie in der Console. (772949) Automatische Vervollständigung in Snippets:

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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