Neuerungen in den Entwicklertools (Chrome 68)

Kayce Basques

Neu bei den Entwicklertools in Chrome 68:

• Eager Evaluation (Eager Evaluation): Während Sie Ausdrücke eingeben, wird in der Konsole eine Vorschau des Ergebnisses angezeigt.
• Argumenthinweise. Während der Eingabe von Funktionen zeigt die Konsole die erwarteten Argumente dafür an. .
• Automatische Vervollständigung von Funktionen: Nachdem Sie einen Funktionsaufruf wie document.querySelector('p') eingegeben haben, zeigt die Konsole die Funktionen und Eigenschaften an, die vom Rückgabewert unterstützt werden.
• ES2017-Keywords in der Konsole. Keywords wie await sind jetzt im Menü der Console verfügbar. UI für die automatische Vervollständigung.
• Lighthouse 3.0 im Bereich „Audits“. Schnellere, konsistentere Prüfungen, eine neue Benutzeroberfläche und neue Audits.
• Support für BigInt. Testen Sie die neue JavaScript-Ganzzahl mit beliebiger Genauigkeit in der Konsole.
• Property-Pfade zum Beobachtungsbereich hinzufügen Attribute aus dem Bereich „Scope“ (Umfang) zur Smartwatch hinzufügen .
• „Zeitstempel anzeigen“ zu den Einstellungen.

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 die Konsole eingeben, kann die Konsole nun eine Vorschau des Ergebnisses dieses Ausdrucks anzeigen. unter dem Cursor.

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

So aktivieren Sie die unmittelbare Bewertung:

1. Öffnen Sie die Console.
2. Öffnen Sie die Console-Einstellungen.
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.

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

Nach der Aktivierung von „Eager Evaluation“ (Eager Evaluation) sehen Sie in der Console jetzt auch, welche Attribute und Funktionen nach der Eingabe einer Funktion verfügbar sind.

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

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.

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 Lantern, das deine Prüfungen abschließt und mit geringerer Varianz zwischen den Ausführungen.

Neue Benutzeroberfläche

Lighthouse 3.0 hat dank der Zusammenarbeit von Lighthouse und der Chrome-UX eine neue Benutzeroberfläche. Forschungs- und Designteams.

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 können Sie ganze Zahlen mit beliebiger Genauigkeit angeben. Probieren Sie es in der Console aus:

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

Property-Pfad zur Beobachtung hinzufügen

Klicken Sie bei pausiertem Haltepunkt im Bereich „Umfang“ mit der rechten Maustaste auf eine Eigenschaft und wählen Sie Eigenschaft hinzufügen zu beobachtenden Pfad, um dieses Attribut dem Beobachtungsbereich hinzuzufügen.

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

„Zeitstempel anzeigen“ in die Einstellungen verschoben

Bisher in den Console-Einstellungen das Kästchen Zeitstempel anzeigen 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 erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• 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