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 war im Bereich Leistung eine Zeitachse mit Screenshots aus vorherigen Aufnahmen zu sehen. Daher war es schwierig, den Beginn der eigentlichen Messung zu erkennen. Im Steuerfeld 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, die nur die für Sie relevanten Selektortypen erfassen. Mit der neuen Option zum Anpassen von Selektortypen beim Erstellen einer neuen Aufzeichnung können Sie Selektoren wie XPath ein- oder ausschließen.

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

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

  • In der Konsole wird eine Liste mit Vorschlägen für die automatische Vervollständigung angezeigt. Die obere Option wird durch einen 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 Liste der Vorschläge 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. Wechseln Sie zu Settings > Preferences (Einstellungen) > Maximieren Sie console.trace()-Nachrichten standardmäßig. (1139616)
  • Der Bereich Snippets im Bereich Quellen unterstützt die erweiterte automatische Vervollständigung, ähnlich wie bei 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 erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine 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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59