Neuerungen in den Entwicklertools (Chrome 68)

Kayce Basques

Neu bei den Entwicklertools in Chrome 68:

Lesen Sie weiter oder sehen Sie sich die Videoversion der Versionshinweise unten an.

Hilfskonsole

Chrome 68 bietet einige neue Console-Funktionen für die automatische Vervollständigung und die Vorschau.

Eifrige Bewertung

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

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

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

So aktivieren Sie die Eager-Bewertung:

  1. Öffnen Sie die Console.
  2. Öffnen Sie die Console-Einstellungen Schaltfläche „Konsoleneinstellungen“.
  3. Klicken Sie das Kästchen Eager-Bewertung an.

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

Argumenthinweise

Während Sie Funktionen eingeben, zeigt die Konsole jetzt die Argumente an, 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.
  • Eine Ellipse vor einem Argument wie ...items stellt einen Streuungstyp dar.
  • Einige Funktionen wie CSS.supports() akzeptieren Signaturen mit mehreren Argumenten.

Autocomplete nach Funktionsausführungen

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.

Nach dem Ausführen von „document.querySelector('p'“) können Sie in der Konsole die verfügbaren Eigenschaften und Funktionen für dieses Element anzeigen.

Abbildung 3. Der obere Screenshot zeigt das alte Verhalten und der untere Screenshot zeigt das neue Verhalten, das die automatische Vervollständigung von Funktionen unterstützt.

ES2017-Keywords in automatischer Vervollständigung

ES2017-Keywords wie await sind jetzt in der Cloud Console-Benutzeroberfläche für die automatische Vervollständigung verfügbar.

In der Console wird jetzt in der Benutzeroberfläche für die automatische Vervollständigung „await“ vorgeschlagen.

Abbildung 4. In der Console wird jetzt in der UI für die automatische Vervollständigung await vorgeschlagen

Schnellere, zuverlässigere Audits, eine neue UI 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 Ankündigung von Lighthouse 3.0.

Schnellere, zuverlässigere Audits

Lighthouse 3.0 hat eine neue interne Auditing-Engine mit dem Codenamen Lantern, die Ihre Prüfungen schneller und mit weniger Abweichungen zwischen Durchläufen abschließt.

Neue Benutzeroberfläche

Lighthouse 3.0 hat dank der Zusammenarbeit zwischen dem Lighthouse- und dem Chrome UX-Team (Research & Design) außerdem eine neue Benutzeroberfläche.

Die neue Berichtsoberfläche in Lighthouse 3.0

Abbildung 5. Die neue Berichtsoberfläche in Lighthouse 3.0

Neue Prüfungen

Lighthouse 3.0 wird außerdem mit vier neuen Prüfungen ausgeliefert:

  • First Contentful Paint
  • robots.txt ist ungültig
  • Videoformate für animierte Inhalte verwenden
  • Mehrfache, kostspielige Hin- und Rückflug zu einem beliebigen Startort vermeiden

BigInt-Support

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

Beispiel für BigInt in der Console

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

Property-Pfad zur Smartwatch hinzufügen

Klicken Sie bei pausiertem Haltepunkt mit der rechten Maustaste auf ein Attribut im Bereich „Umfang“ und wählen Sie Zu überwachenden Property-Pfad hinzufügen aus, um dieses Attribut dem Bereich „Ansehen“ hinzuzufügen.

Beispiel für das Hinzufügen eines Property-Pfads, der beobachtet werden soll

Abbildung 7. Beispiel für Zu beobachtende Property-Pfad hinzufügen

„Zeitstempel anzeigen“ wurde in die Einstellungen verschoben

Das Kästchen Zeitstempel anzeigen wurde zuvor in den Konsoleneinstellungen Schaltfläche „Konsoleneinstellungen“ in die Einstellungen verschoben.

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