Neuerungen in den Entwicklertools (Chrome 68)

Neu bei den Entwicklertools in Chrome 68:

Unten können Sie die Versionshinweise weiterlesen oder sich die Videoversion ansehen.

Assistive Konsole

Chrome 68 wird mit einigen neuen Konsolenfunktionen zur automatischen Vervollständigung und Vorschau ausgeliefert.

Enge Bewertung

Wenn Sie einen Ausdruck in der Console eingeben, kann die Console jetzt unter dem Cursor eine Vorschau des Ergebnisses dieses Ausdrucks anzeigen.

Die Konsole gibt das Ergebnis des sort()-Vorgangs aus, bevor dieser explizit ausgeführt wurde.

Abbildung 1. Die Console gibt das Ergebnis des sort()-Vorgangs aus, bevor dieser explizit ausgeführt wurde

So aktivieren Sie die unmittelbare Bewertung:

  1. Öffnen Sie die Console.
  2. Öffnen Sie die Console-Einstellungen Über die Schaltfläche „Console Settings“ (Konsoleneinstellungen).
  3. Klicken Sie das Kästchen Eager rating (Eager Evaluierung) an.

Die Entwicklertools prüfen nicht, ob der Ausdruck Nebeneffekte verursacht.

Argumenthinweise

Während Sie Funktionen eingeben, werden in der Konsole jetzt die Argumente angezeigt, die die Funktion erwartet.

Argumenthinweise in der Konsole

Abbildung 2. Verschiedene Beispiele für Argumenthinweise in der Console

Hinweise:

  • Ein Fragezeichen vor einem Argument wie ?options stellt ein optionales Argument dar.
  • Auslassungspunkte vor einem Argument wie ...items stellen eine Streuung dar.
  • Einige Funktionen wie CSS.supports() akzeptieren Signaturen mit mehreren Argumenten.

Automatische Vervollständigung nach Ausführung der Funktion

Nachdem Sie die Option „Eager Evaluation“ aktiviert haben, sehen Sie in der Console jetzt auch, welche Attribute und Funktionen verfügbar sind, nachdem Sie eine Funktion eingegeben haben.

Nachdem Sie document.querySelector('p' ausgeführt haben, können Sie in der Konsole jetzt die verfügbaren Eigenschaften und Funktionen für dieses Element anzeigen lassen.

Abbildung 3. Der obere Screenshot stellt das alte Verhalten dar, der untere Screenshot das neue Verhalten zur Unterstützung der automatischen Vervollständigung von Funktionen.

ES2017-Suchbegriffe in der automatischen Vervollständigung

ES2017-Schlüsselwörter wie await sind jetzt in der Benutzeroberfläche für die automatische Vervollständigung der Console verfügbar.

Die Konsole schlägt jetzt in der Benutzeroberfläche für die automatische Vervollständigung „await“ vor.

Abbildung 4. Die Console schlägt jetzt in der Benutzeroberfläche für die automatische Vervollständigung await vor

Schnellere, zuverlässigere Prüfungen, eine neue Benutzeroberfläche und neue Audits

Chrome 68 wird mit Lighthouse 3.0 ausgeliefert. In den nächsten Abschnitten werden die wichtigsten Änderungen zusammengefasst. Den vollständigen Bericht finden Sie unter Das neue Lighthouse 3.0.

Schnellere, zuverlässigere Prüfungen

Lighthouse 3.0 hat ein neues internes Auditing-Modul namens „Latern“, das Audits schneller und mit geringeren Abweichungen zwischen den Läufen abschließt.

Neue Benutzeroberfläche

Mit Lighthouse 3.0 wurde dank der Zusammenarbeit zwischen den UX-Teams von Lighthouse und Chrome UX (Research & Design) auch eine neue Benutzeroberfläche eingeführt.

Die neue Berichtsbenutzeroberfläche in Lighthouse 3.0

Abbildung 5. Die neue Berichtsbenutzeroberfläche in Lighthouse 3.0

Neue Prüfungen

Lighthouse 3.0 wird mit 4 neuen Prüfungen ausgeliefert:

  • First Contentful Paint
  • robots.txt ist ungültig
  • Videoformate für animierte Inhalte verwenden
  • Mehrere, kostspielige Hin- und Rückflüge zu beliebigen Startorten vermeiden

BigInt-Unterstützung

Chrome 68 unterstützt ein neues numerisches Primitive namens BigInt. Mit BigInt können Sie Ganzzahlen mit beliebiger Genauigkeit darstellen. Probieren Sie es in der Console aus:

Ein Beispiel für BigInt in der Console.

Abbildung 6. Ein Beispiel für BigInt in der Console

Property-Pfad zur Beobachtung hinzufügen

Klicken Sie bei einer Pause bei einem Haltepunkt mit der rechten Maustaste auf eine Eigenschaft im Bereich „Scope“ (Umfang) und wählen Sie Add property path to watch (Zu überwachender Attributpfad hinzufügen) aus, um dieses Attribut zum Überwachungsbereich hinzuzufügen.

Beispiel für „Zu beobachtenden Property-Pfad hinzufügen“.

Abbildung 7. Beispiel für Property-Pfad zur Beobachtung hinzufügen

„Zeitstempel anzeigen“ wurde in die Einstellungen verschoben

Das Kästchen Zeitstempel anzeigen, das zuvor in den Konsoleneinstellungen Über die Schaltfläche „Console Settings“ (Konsoleneinstellungen) angezeigt wurde, wurde in die Einstellungen verschoben.

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