In der Entwicklerkonsole der neuesten Version von Chrome wurden so coole Funktionen angezeigt, dass ich einen Beitrag zu diesem Thema aus dem offiziellen Entwicklerblog übersetzen wollte.
Die Chrome Developer Console hat mich lange mit der Tiefe ihrer Entwicklung beeindruckt. Es war einmal, als ich mich von Firebug wegzog, und jetzt sind die Tage gekommen, an denen ich mein Leben ohne Entwicklung auf Chrom nicht sehen kann. Es ist gut, wenn Menschen sich im Geschäft gegenseitig übertreffen wollen.
- Vorausschauende Ausführung . Sobald Sie einen Ausdruck schreiben, zeigt die Konsole das Ergebnis an.
- Argumenttipps . Während Sie den Namen der Funktion eingeben, zeigt Ihnen die Konsole die erwarteten Argumente dafür an.
- Funktionsabschluss . Nach dem Wählen eines Funktionsaufrufs, z. B.
document.querySelector('p') , zeigt Ihnen die Konsole die Funktionen und Eigenschaften an, die der Rückgabewert unterstützt. - Schlüsselwörter von ES2017 bis Console . Schlüsselwörter wie "
await sind jetzt in der Konsole in der Benutzeroberfläche für die automatische Vervollständigung verfügbar. - Lighthouse 3.0 im Audit-Dashboard . Schnellere, konsistentere Prüfung, neue Benutzeroberfläche und neue Arten von Prüfungen.
- Unterstützen Sie
BigInt . Probieren Sie den neuen Integer-Typ in der Konsole aus. - Fügen Sie der Eigenschaft im Dashboard Pfade hinzu . Fügen Sie dem Dashboard Eigenschaften aus dem Zielbereich hinzu.
- Die Option "Zeitstempel anzeigen" wurde in den Einstellungsbereich verschoben.
Hinweis: Überprüfen Sie, welche Version von Chrome derzeit auf der Seite chrome://version wird. Wenn Sie mit einer früheren Version arbeiten, sind diese Funktionen nicht vorhanden. Wenn Sie eine spätere Version ausführen, können sich diese Funktionen ändern. Chrome wird alle 6 Wochen automatisch auf eine neue Hauptversion aktualisiert.
Lesen oder sehen Sie sich die Videoversion dieser Notizen an:
Hilfskonsole
Chrome 68 verfügt über neue Konsolenfunktionen für die Code-Vervollständigung und eine Vorschau der Ausführung.
Vorausschauende Ausführung
Wenn Sie einen bestimmten Ausdruck in die Konsole schreiben, kann er Ihnen von nun an das Ergebnis der Ausführung dieses Ausdrucks unter Ihrem Cursor anzeigen:
Bild 1 . Die Konsole zeigt das Ergebnis der sort() -Operation an, bevor sie explizit ausgeführt wird.
So aktivieren Sie die proaktive Ausführung:
- Konsole öffnen
- Öffnen Sie die Einstellungen (Konsoleneinstellungen)
- Aktivieren Sie das Kontrollkästchen für die Eager-Bewertung
Entwicklertools führen keine Ausdrücke aus, die zu Nebenwirkungen führen können .
Argumenttipps
Sobald Sie die Funktion geschrieben haben, zeigt Ihnen die Konsole die erwarteten Argumente an.
Bild 2 . Verschiedene Beispiele für Argumentationshinweise in der Konsole.
Anmerkungen:
- Das Fragezeichen vor dem Argument, z. B.
?options , zeigt auf ein optionales Argument. - Ein Auslassungszeichen vor einem Argument, z. B.
...items , verweist auf einen Erweiterungsoperator . - Einige Funktionen, wie z. B.
CSS.supports() , verwenden viele Argumentsignaturen.
Automatische Vervollständigung nach Funktionsausführung
Hinweis: Diese Funktion hängt von der proaktiven Ausführung ab, die in den Einstellungen der Entwicklertools aktiviert werden muss.
Nach dem Aktivieren der proaktiven Ausführung zeigt Ihnen die Konsole auch an, welche Eigenschaften und Funktionen verfügbar sind, nachdem Sie die Funktion geschrieben haben.
Bild 3 . Der erste Screenshot zeigt das alte Verhalten und der zweite ein neues, das die Fertigstellung unterstützt.
Schlüsselwörter von ES2017 bis Console
Schlüsselwörter wie " await jetzt in der Konsole in der Benutzeroberfläche für die automatische Vervollständigung verfügbar.
Bild 4 . Die Konsole bietet jetzt await in ihrer Auto-Completion-Oberfläche.
Schnellere, zuverlässigere Audits, eine neue Benutzeroberfläche und neue Arten von Audits
Chrome 68 wird mit Lighthouse 3.0 geliefert. In den folgenden Abschnitten werden einige der größten Änderungen erläutert. Die vollständige Geschichte finden Sie auch in einem separaten Artikel , in dem Lighthouse 3.0 angekündigt wird.
Schnellere und zuverlässigere Audits
Lighthouse 3.0 verfügt über eine neue interne Audit-Engine namens Lantern, die Ihre Audits schneller und mit weniger Fehlern zwischen den Läufen abschließt.
Neue Schnittstelle
Lighthouse 3.0 bietet dank der Zusammenarbeit zwischen den Teams Lighthouse und Chrome UX (Development and Design) auch eine neue Benutzeroberfläche.
Bild 5 . Neue Berichtsoberfläche in Lighthouse 3.0.
Neue Arten von Audits
Lighthouse 3.0 bietet Ihnen außerdem 4 neue Arten von Audits:
- Erstes Rendern von Inhalten
- robots.txt ist ungültig
- Verwenden Sie Videoformate für animierte Inhalte
- Vermeiden Sie mehrere und kostspielige Webressourcenanforderungen
BigInt-Unterstützung
Hinweis: Dies ist keine völlig neue Funktion der Entwicklertools, sondern eine neue Funktion der JavaScript-Sprache, die Sie in der Konsole ausprobieren können.
Chrome 68 unterstützt ein neues ganzzahliges BigInt namens BigInt . BigInt können Sie Zahlen mit beliebiger Genauigkeit darstellen. Probieren Sie diese Funktion in der Konsole aus:
Bild 6 . Ein Beispiel für die Verwendung von BigInt in der Konsole.
Fügen Sie im Dashboard Eigenschaftspfade hinzu
Wenn wir die Codeausführung am Haltepunkt gestoppt haben, klicken Sie mit der rechten Maustaste auf die Eigenschaft im Zielfenster und wählen Add property path to watch hinzufügen, um die Eigenschaft dem Überwachungsfenster hinzuzufügen.
Bild 7 . Ein Beispiel für das Hinzufügen eines Pfads zu einer Beobachtungsliste.
Die Option "Zeitstempel anzeigen" wurde in den Einstellungsbereich verschoben
Jetzt wurde die Option Zeitstempel anzeigen, die zuvor in den Konsoleneinstellungen enthalten war, in die Einstellungen der Entwicklertools verschoben.