Neuerungen in den Entwicklertools (Chrome 110)

Jecelyn Yeen

Steuerfeld „Leistung“ beim Aktualisieren wird gelöscht

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

Bisher war im Bereich Leistung eine Zeitachse mit Screenshots früherer Aufnahmen zu sehen. Dadurch war es schwierig zu erkennen, wann die eigentliche Messung begonnen hat. Im Steuerfeld wird jetzt immer zuerst die Seite about:blank aufgerufen, damit die Aufzeichnung mit einem leeren Trace beginnt. Dies entspricht dem bereits bekannten Bereich Leistungsstatistiken.

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

Chromium-Probleme: 1101268, 1382044

Rekorder-Updates

Code Ihres User Flows in der Rekorder App ansehen und hervorheben

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

Der Rekorder hebt den entsprechenden Code hervor, wenn Sie den Mauszeiger auf die einzelnen Schritte auf der linken Seite bewegen, sodass Sie den Ablauf leicht verfolgen können. Du kannst das Codeformat über das Drop-down-Menü ändern, über das du zwischen Formaten wie dem Skript Nachtuhr-Test wechseln kannst.

Codeansicht in der Rekorder App

Chromium-Problem: 1385489

Auswahltypen für eine Aufnahme anpassen

Sie können Aufzeichnungen erstellen, in denen nur die Auswahltypen erfasst werden, die für Sie wichtig sind. Mit der neuen Option zum Anpassen von Auswahltypen beim Erstellen einer neuen Aufzeichnung können Sie Selektoren wie XPath ein- oder ausschließen, damit nur die Auswahlelemente erfasst werden, die Sie in Ihren Nutzerflüssen erfassen möchten.

Neue Option zum Anpassen der Auswahltypen.

Chromium-Problem: 1384431

User Flow während der Aufzeichnung bearbeiten

Mit der Rekorder App kannst du jetzt Änderungen in Echtzeit vornehmen. Sie müssen die Aufzeichnung nicht mehr beenden, um Anpassungen vorzunehmen.

Bearbeitung während der Aufzeichnung des User Flows.

Chromium-Problem: 1381971

Automatischer Direktdruck

Im Steuerfeld Quellen werden jetzt automatisch reduzierte Quelldateien gedruckt. Sie können auf die Schaltfläche Druck { } 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 Pretty Print-Schaltfläche klicken. Außerdem wurde der schön gedruckte Inhalt nicht auf demselben Tab angezeigt, sondern auf einem anderen ::formatted-Tab.

Zeigt eine komprimierte Datei vor und nach der automatischen Direktdruck-Funktion an.

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 gängige Dateiformate verbessert. So können Sie Code leichter lesen und seine Struktur erkennen, darunter Vue, JSX, Dart, LESS, SCSS, SASS und Inline-CSS.

Syntaxhervorhebung in Vue.

Darüber hinaus haben die Entwicklertools auch die Inline-Vorschau für Vue, Inline-HTML und TSX verbessert. Bewegen Sie den Mauszeiger auf eine Variable, um eine Vorschau ihres Werts zu sehen.

Inline-Vorschau für Vue.

Abgesehen davon wird in den Entwicklertools jetzt im Bereich 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 Sourcemap-Link klicken.

Link zur Quellzuordnung für SASS.

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

Ergonomische und konsistente automatische Vervollständigung in der Console

Die Entwicklertools verbessern die automatische Vervollständigung durch Implementierung der 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 Steuerfeldern Konsole, Quellen und Elemente einheitlich.

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

  • Die Console zeigt eine Liste automatisch vervollständigter Vorschläge mit einem dezenten gepunkteten Rahmen um die Option oben an, der darauf hinweist, dass die Navigation noch nicht begonnen hat. Gepunkteter Rahmen um die obere Option für die automatische Vervollständigung.

  • Die Console führt die Zeile aus, wenn Sie Enter drücken. Bisher wurde die Zeile mit dem obersten Vorschlag automatisch vervollständigt. Drücken Sie zur automatischen Vervollständigung entweder Tab oder Arrow Right. Führt die Zeile bei der Eingabe aus.

  • In der Konsole wird die ausgewählte Option hervorgehoben, während Sie durch die Vorschlagsliste blättern. Verwenden Sie dazu die Tastenkombination Arrow up und Arrow down. Highlights bei der Navigation für Vorschläge.

  • Mit den Tasten Tab, Enter oder Arrow Right können Sie die ausgewählte Option während der Navigation automatisch vervollständigen. Automatische Vervollständigung mit der ausgewählten Option während der Navigation.

  • Wenn Sie den Code mitten im Code 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 zum Vorwärtsbewegen des Cursors. Sie bearbeiten den Code mitten im Code.

Chromium-Probleme: 1399436, 1276960

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen in dieser Version:

  • Wir haben ein Regressionsproblem in den Entwicklertools behoben, bei dem es in Inline-Skripts nicht bei der debugger-Anweisung beendet wurde. 1385374
  • Eine neue Einstellung Konsole, mit der Sie console.trace()-Nachrichten standardmäßig maximieren oder minimieren können. Wechseln Sie die Einstellungen unter Einstellungen > Einstellungen > Nachrichten von „console.trace()“ standardmäßig maximieren. (1139616)
  • Der Bereich Snippets im Bereich Quellen unterstützt ähnlich wie die Konsole die erweiterte automatische Vervollständigung. (772949) Automatische Vervollständigung in Snippets.

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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

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