Neuerungen in den Entwicklertools (Chrome 70)

Kayce Basques

Willkommen zurück! Seit unserem letzten Update für Chrome 68 sind es ungefähr 12 Wochen. Wir haben Chrome 69 übersprungen, weil es nicht genügend neue Funktionen oder Änderungen an der Benutzeroberfläche gab, die einen Beitrag rechtfertigen würden.

Zu den neuen Funktionen und wichtigen Änderungen in den DevTools in Chrome 70 gehören:

Lesen Sie weiter oder sehen Sie sich die Videoversion dieses Dokuments an:

Live-Ausdrücke in der Console

Wenn Sie den Wert eines Live-Ausdrucks in Echtzeit beobachten möchten, können Sie ihn oben in der Console anpinnen.

  1. Klicke auf Live-Emoticon erstellen Live-Ausdruck erstellen. Die Live Expression-Benutzeroberfläche wird geöffnet.

    Die Live-Expression-Benutzeroberfläche

    Abbildung 1. Die Live-Expression-Benutzeroberfläche

  2. Geben Sie den Ausdruck ein, den Sie beobachten möchten.

    Geben Sie Date.now() in die Benutzeroberfläche für Live-Ausdrücke ein.

    Abbildung 2. Geben Sie Date.now() in die Benutzeroberfläche für Live-Ausdrücke ein.

  3. Klicken Sie außerhalb der Live-Expression-Benutzeroberfläche, um den Ausdruck zu speichern.

    Ein gespeicherter Live-Ausdruck.

    Abbildung 3. Gespeicherter Live-Ausdruck

Die Werte von Live-Ausdrücken werden alle 250 Millisekunden aktualisiert.

DOM-Knoten während der Eager Evaluation hervorheben

Wenn Sie in der Console einen Ausdruck eingeben, der zu einem DOM-Knoten führt, wird dieser Knoten jetzt mit Eager Evaluation (Sofortige Auswertung) im Viewport hervorgehoben.

Nachdem Sie „document.activeElement“ in die Konsole eingegeben haben, wird ein Knoten im Viewport hervorgehoben.

Abbildung 4. Da der aktuelle Ausdruck einen Knoten ergibt, wird dieser Knoten im Darstellungsbereich hervorgehoben.

Hier sind einige Ausdrücke, die Ihnen nützlich sein könnten:

  • document.activeElement, um den Knoten hervorzuheben, der derzeit im Fokus ist.
  • document.querySelector(s) zum Hervorheben eines beliebigen Knotens, wobei s ein CSS-Selektor ist. Das entspricht dem Bewegen des Mauszeigers auf einen Knoten im DOM-Baum.
  • $0, um den aktuell im DOM-Baum ausgewählten Knoten hervorzuheben.
  • $0.parentElement, um das übergeordnete Element des aktuell ausgewählten Knotens hervorzuheben.

Optimierungen im Leistungssteuerfeld

Beim Erstellen eines Seitenprofils dauerte es im Bereich „Leistung“ bisher mehrere Sekunden, bis die Daten verarbeitet und visualisiert wurden. Wenn Sie auf ein Ereignis geklickt haben, um auf dem Tab „Zusammenfassung“ weitere Informationen zu erhalten, dauerte es manchmal mehrere Sekunden, bis die Daten geladen wurden. Die Verarbeitung und Visualisierung ist in Chrome 70 schneller.

Verarbeitung und Laden von Leistungsdaten

Abbildung 5. Leistungsdaten verarbeiten und laden

Zuverlässigere Fehlerbehebung

In Chrome 70 wurden einige Fehler behoben, die dazu geführt haben, dass Haltestellen verschwunden sind oder nicht ausgelöst wurden.

Außerdem wurden Fehler im Zusammenhang mit Quellzuordnungen behoben. Einige TypeScript-Nutzer weisen die Entwicklertools an, eine bestimmte TypeScript-Datei beim Durchlaufen des Codes zu ignorieren. Stattdessen wird die gesamte gebündelte JavaScript-Datei ignoriert. Außerdem wurde ein Problem behoben, das dazu führte, dass das Bereich „Quellen“ im Allgemeinen langsam ausgeführt wurde.

Netzwerkdrosselung über das Befehlsmenü aktivieren

Sie können die Netzwerkdrosselung jetzt über das Befehlsmenü auf schnelles oder langsames 3G festlegen.

Befehle zur Netzwerkdrosselung im Befehlsmenü

Abbildung 6. Befehle zur Netzwerkdrosselung im Befehlsmenü

Bedingte Haltepunkte automatisch vervollständigen

Mit der automatischen Vervollständigung können Sie Bedingte Unterbrechungen schneller eingeben.

Benutzeroberfläche für die automatische Vervollständigung

Abbildung 7. Die Benutzeroberfläche für die automatische Vervollständigung

Schon gewusst? Die Benutzeroberfläche für die automatische Vervollständigung ist dank CodeMirror möglich, der auch die Console unterstützt.

Bei AudioContext-Ereignissen pausieren

Verwenden Sie den Bereich Event-Listener-Haltepunkte, um an der ersten Zeile eines AudioContext-Lifecycle-Ereignis-Handlers anzuhalten.

AudioContext ist Teil der Web Audio API, mit der Sie Audio verarbeiten und synthetisieren können.

AudioContext-Ereignisse im Bereich „Event-Listener-Haltepunkte“

Abbildung 8. AudioContext-Ereignisse im Bereich "Event Listener Breakpoints"

Node.js-Anwendungen mit ndb debuggen

„ndb“ ist ein neuer Debugger für Node.js-Anwendungen. Zusätzlich zu den üblichen Debugging-Funktionen in den DevTools bietet ndb Folgendes:

  • Erkennen und Anhängen an untergeordnete Prozesse
  • Setzen von Haltepunkten vor Modulen ist erforderlich.
  • Dateien in der DevTools-Benutzeroberfläche bearbeiten
  • Standardmäßig werden alle Skripts außerhalb des aktuellen Arbeitsverzeichnisses ignoriert.

Die ndb-Benutzeroberfläche

Abbildung 9. NDB-UI

Weitere Informationen finden Sie in der README-Datei von ndb.

Bonustipp: Nutzerinteraktionen in der Praxis mit der User Timing API messen

Sie möchten messen, wie lange es dauert, bis echte Nutzer wichtige Webseitenaufrufe abschließen? Sie können Ihren Code mit der User Timing API instrumentieren.

Angenommen, Sie möchten messen, wie lange ein Nutzer auf Ihrer Startseite verweilt, bevor er auf Ihre Call-to-Action-Schaltfläche klickt. Zuerst markieren Sie den Beginn des Kaufprozesses in einem Ereignishandler, der mit einem Seitenladeereignis verknüpft ist, z. B. DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

Dann markieren Sie das Ende der Reise und berechnen ihre Dauer, wenn auf die Schaltfläche geklickt wird:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

Sie können Ihre Messwerte auch extrahieren und so ganz einfach an Ihren Analysedienst senden, um anonyme, zusammengefasste Daten zu erheben:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

In DevTools werden Ihre Nutzertiming-Messungen im Bereich Nutzertiming Ihrer Leistungsaufzeichnungen automatisch markiert.

Bereich „Nutzertiming“

Abbildung 10. Bereich „Nutzertiming“

Dies ist auch beim Debuggen oder Optimieren von Code praktisch. Wenn Sie beispielsweise eine bestimmte Phase Ihres Lebenszyklus optimieren möchten, rufen Sie am Anfang und am Ende Ihrer Lebenszyklusfunktion window.performance.mark() auf. React macht das im Entwicklungsmodus.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs 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.

Neu in den Entwicklertools

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