Neuerungen in den Entwicklertools (Chrome 70)

Kayce Basques

Willkommen zurück! Seit unserem letzten Update für Chrome 68 sind etwa 12 Wochen vergangen. Wir haben Chrome 69 übersprungen, da es nicht genügend neue Funktionen oder Änderungen an der Benutzeroberfläche gab, um einen Beitrag zu rechtfertigen.

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

Lies weiter oder sieh dir 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.

    Gib in der Live-Ausdrucks-Benutzeroberfläche „Date.now()“ ein.

    Abbildung 2. Date.now() in die Live-Ausdruck-Benutzeroberfläche eingeben

  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 genauen Auswertung 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 zu einem Knoten führt, wird dieser 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 Bereich „Leistung“

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 haben die DevTools angewiesen, beim Durchlaufen des Codes eine bestimmte TypeScript-Datei zu ignorieren. Stattdessen wurde die gesamte gebundelte 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.

Die 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, das 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-Haltepunkte“

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:

  • Untergeordnete Prozesse erkennen und anhängen
  • Setzen von Haltepunkten vor Modulen ist erforderlich.
  • Dateien in der DevTools-Benutzeroberfläche bearbeiten
  • Alle Scripts außerhalb des aktuellen Arbeitsverzeichnisses werden standardmäßig ignoriert.

Die ndb-Benutzeroberfläche

Abbildung 9. Die ndb-Benutzeroberfläche

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');
});

Anschließend markieren Sie das Ende der Fahrt und berechnen die 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.

Im Bereich „Nutzertiming“

Abbildung 10. Bereich „Nutzertiming“

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

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.

Neu in den DevTools

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