Neuerungen in den Entwicklertools (Chrome 68)

Kayce Basques

Neu in den Entwicklertools in Chrome 68:

• Genaue Auswertung: Während Sie Ausdrücke eingeben, wird in der Konsole eine Vorschau des Ergebnisses angezeigt.
• Argumenthinweise. Während Sie Funktionen eingeben, werden in der Console die erwarteten Argumente für die jeweilige Funktion angezeigt.
• Automatische Vervollständigung von Funktionen Nachdem Sie einen Funktionsaufruf wie document.querySelector('p') eingegeben haben, werden in der Konsole die Funktionen und Eigenschaften angezeigt, die vom Rückgabewert unterstützt werden.
• ES2017-Schlüsselwörter in der Konsole Keywords wie await sind jetzt in der Autocomplete-Benutzeroberfläche der Console verfügbar.
• Lighthouse 3.0 im Bereich „Audits“ Schnellere, konsistentere Audits, eine neue Benutzeroberfläche und neue Audits.
• BigInt-Support. Probieren Sie in der Konsole die neue JavaScript-Ganzzahl mit beliebiger Genauigkeit aus.
• Dem Bereich „Watch“ Property-Pfade hinzufügen Fügen Sie dem Bereich „Watch“ Properties aus dem Bereich „Scope“ hinzu.
• „Zeitstempel anzeigen“ in die Einstellungen verschoben

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

Assistive Console

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

Genaue Auswertung

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

Abbildung 1. Die Konsole 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. Öffnen Sie die Konsoleneinstellungen .
3. Aktivieren Sie das Kästchen Eager Evaluation (Sofortige Auswertung).

DevTools wertet nicht sofort aus, ob der Ausdruck Nebenwirkungen verursacht.

Hinweise zu Argumenten

Während Sie Funktionen eingeben, werden in der Console jetzt die Argumente angezeigt, die für die Funktion erforderlich sind.

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

Hinweise:

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

Automatische Vervollständigung nach Funktionsausführungen

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

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

ES2017-Schlüsselwörter in der automatischen Vervollständigung

ES2017-Schlüsselwörter wie await sind jetzt in der Autovervollständigungs-Benutzeroberfläche der Console verfügbar.

Abbildung 4. In der automatischen Vervollständigung der Console wird jetzt await vorgeschlagen.

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

Chrome 68 wird mit Lighthouse 3.0 ausgeliefert. In den nächsten Abschnitten werden einige der wichtigsten Änderungen zusammengefasst. Weitere Informationen

Schnellere und zuverlässigere Audits

Lighthouse 3.0 hat eine neue interne Prüf-Engine mit dem Codenamen „Lantern“, die Ihre Audits schneller und mit weniger Abweichungen zwischen den Ausführungen durchführt.

Neue Benutzeroberfläche

Lighthouse 3.0 bietet auch eine neue Benutzeroberfläche, die durch die Zusammenarbeit der Teams von Lighthouse und Chrome UX (Research & Design) entstanden ist.

Abbildung 5. 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
• Mehrere kostspielige Hin- und Rückfahrten zu einem beliebigen Ursprungsort vermeiden

BigInt-Unterstützung

Chrome 68 unterstützt ein neues numerisches Primitiv namens BigInt. Mit BigInt können Sie Ganzzahlen mit beliebiger Genauigkeit darstellen. In der Console ausprobieren:

Abbildung 6. Beispiel für BigInt in der Console

Property-Pfad zu Watch hinzufügen

Klicken Sie mit der rechten Maustaste auf eine Eigenschaft im Bereich „Scope“ und wählen Sie Property-Pfad zu Watch hinzufügen aus, um die Eigenschaft 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 Konsoleneinstellungen befand, ist jetzt in den Einstellungen zu finden.

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare in den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.