Neuerungen in den Entwicklertools (Chrome 68)

Kayce Basques

Neu in den Entwicklertools in Chrome 68:

• Eager Evaluation Während Sie Ausdrücke eingeben, wird in der Console eine Vorschau des Ergebnisses angezeigt.
• Argumenthinweise Während Sie Funktionen eingeben, werden in der Console die erwarteten Argumente für diese Funktion angezeigt.
• Automatische Vervollständigung von Funktionen Nachdem Sie einen Funktionsaufruf wie document.querySelector('p') eingegeben haben, werden in der Console die Funktionen und Eigenschaften angezeigt, die der Rückgabewert unterstützt.
• ES2017-Keywords in der Console Keywords wie await sind jetzt in der automatischen Vervollständigung der Console verfügbar.
• Lighthouse 3.0 im Bereich „Audits“ Schnellere und einheitlichere Prüfungen, eine neue Benutzeroberfläche und neue Prüfungen.
• BigInt-Support. Probieren Sie die neue Ganzzahl mit beliebiger Genauigkeit in JavaScript in der Console aus.
• Property-Pfade zum Bereich „Watch“ hinzufügen Fügen Sie dem Bereich „Watch“ Properties aus dem Bereich „Scope“ hinzu.
• Die Option „Zeitstempel anzeigen“ wurde in die Einstellungen verschoben.

Lies weiter oder sieh dir die Videoversion der Release Notes unten an.

Hilfskonsole

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

Genaue Auswertung

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

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

So aktivieren Sie die genaue Auswertung:

1. Öffnen Sie die Console.
2. Öffne die Konsoleneinstellungen .
3. Aktivieren Sie das Kästchen Eager evaluation (Sofortige Auswertung).

In den DevTools wird nicht sofort ausgewertet, ob der Ausdruck Nebenwirkungen verursacht.

Hinweise zu Argumenten

Wenn Sie Funktionen eingeben, werden in der Console jetzt die Argumente angezeigt, die die Funktion erwartet.

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

Hinweise:

• Ein Fragezeichen vor einem Argument wie ?options steht für ein optionales Argument.
• Auslassungspunkte vor einem Argument wie ...items stehen für einen Bereich.
• Einige Funktionen wie CSS.supports() akzeptieren mehrere Argumentsignaturen.

Automatische Vervollständigung nach Funktionsausführungen

Nachdem Sie die vorzeitige Auswertung aktiviert haben, werden in der Console jetzt auch die verfügbaren Eigenschaften und Funktionen angezeigt, nachdem Sie eine Funktion eingegeben haben.

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

ES2017-Keywords in der automatischen Vervollständigung

ES2017-Keywords wie await sind jetzt in der automatischen Vervollständigung der Console verfügbar.

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

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

Chrome 68 wird mit Lighthouse 3.0 ausgeliefert. In den folgenden Abschnitten werden einige der wichtigsten Änderungen zusammengefasst. Weitere Informationen finden Sie unter Ankündigung von Lighthouse 3.0.

Schnellere und zuverlässigere Prüfungen

Lighthouse 3.0 hat eine neue interne Analyse-Engine mit dem Codenamen „Lantern“, mit der Prüfungen schneller und mit weniger Abweichungen zwischen den einzelnen Durchläufen abgeschlossen werden.

Neue Benutzeroberfläche

Lighthouse 3.0 bietet außerdem eine neue Benutzeroberfläche, die in Zusammenarbeit zwischen den Lighthouse- und Chrome-UX-Teams (Recherche und Design) entwickelt wurde.

Abbildung 5. Die neue Benutzeroberfläche für Berichte in Lighthouse 3.0

Neue Audits

Lighthouse 3.0 enthält außerdem vier neue Prüfungen:

• First Contentful Paint
• robots.txt ist ungültig
• Videoformate für animierte Inhalte verwenden
• Vermeiden Sie mehrere teure Rundfahrten zu einem beliebigen Startpunkt.

BigInt-Unterstützung

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

Abbildung 6. Beispiel für BigInt in der Console

Property-Pfad zu Watch hinzufügen

Wenn die Ausführung an einem Haltepunkt pausiert ist, klicken Sie im Bereich „Umfang“ mit der rechten Maustaste auf eine Property und wählen Sie Property-Pfad zu Watch hinzufügen aus, um die Property dem Bereich „Watch“ hinzuzufügen.

Abbildung 7. Beispiel für Property-Pfad zu Watch hinzufügen

„Zeitstempel anzeigen“ wurde in die Einstellungen verschoben

Das Kästchen Zeitstempel anzeigen, das sich zuvor in den Console-Einstellungen befand, wurde in die Einstellungen verschoben.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

• Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
• Melden Sie ein DevTools-Problem über das Dreipunkt-Menü more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Tweeten Sie an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.