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, weil 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, die in Chrome 70 in den Entwicklertools eingeführt werden, gehören:

• Live-Ausdrücke in der Console
• DOM-Knoten während der genauen Auswertung hervorheben:
• Optimierungen des Leistungsbereichs:
• Zuverlässigeres Debugging:
• Netzwerkdrosselung über das Befehlsmenü aktivieren
• Bedingte Haltepunkte automatisch vervollständigen:
• Unterbrechungen bei AudioContext-Ereignissen:
• Node.js-Apps mit ndb debuggen
• Bonustipp: Nutzerinteraktionen in der Praxis mit der User Timing API messen.

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

Live-Ausdrücke in der Console

Sie können einen Live-Ausdruck oben in der Konsole anpinnen, um seinen Wert in Echtzeit zu beobachten.

1. Klicken Sie auf Live-Ausdruck erstellen . Die Benutzeroberfläche für Live-Ausdrücke wird geöffnet.

   

   Abbildung 1. UI für Live-Ausdruck

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

   

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

3. Klicken Sie außerhalb der Benutzeroberfläche für Live-Ausdrücke, um den Ausdruck zu speichern.

   

   Abbildung 3. Ein gespeicherter Live-Ausdruck

Die Werte für Live-Ausdrücke 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 ausgewertet wird, wird dieser Knoten jetzt durch Eager Evaluation (Sofortige Auswertung) im Viewport hervorgehoben.

Abbildung 4. Da der aktuelle Ausdruck zu einem Knoten ausgewertet wird, wird dieser Knoten im Viewport hervorgehoben.

Hier sind einige Ausdrücke, die hilfreich sein könnten:

• document.activeElement zum Hervorheben des Knotens, der sich derzeit im Fokus befindet.
• 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 zum Hervorheben des aktuell im DOM-Baum ausgewählten Knotens.
• $0.parentElement, um das übergeordnete Element des aktuell ausgewählten Knotens hervorzuheben.

Optimierungen des Leistungsbereichs

Beim Profiling einer großen Seite dauerte es bisher mehrere zehn Sekunden, bis das Leistungspanel die Daten verarbeitet und visualisiert hatte. Wenn Sie auf ein Ereignis geklickt haben, um mehr darüber auf dem Tab „Zusammenfassung“ zu erfahren, hat es manchmal mehrere Sekunden gedauert, bis die Informationen geladen wurden. Die Verarbeitung und Visualisierung ist in Chrome 70 schneller.

Abbildung 5. Leistungsdaten verarbeiten und laden

Zuverlässigere Fehlerbehebung

In Chrome 70 wurden einige Fehler behoben, die dazu führten, dass Breakpoints verschwanden oder nicht ausgelöst wurden.

Außerdem werden Fehler im Zusammenhang mit Quellzuordnungen behoben. Einige TypeScript-Nutzer haben DevTools angewiesen, eine bestimmte TypeScript-Datei beim Durchgehen des Codes zu ignorieren. Stattdessen hat DevTools die gesamte gebündelte JavaScript-Datei ignoriert. Diese Korrekturen beheben auch ein Problem, das dazu führte, dass das Quellenfeld im Allgemeinen langsam ausgeführt wurde.

Netzwerkdrosselung über das Befehlsmenü aktivieren

Sie können die Netzwerkdrosselung jetzt über das Befehlsmenü auf „Schnelles 3G“ oder „Langsames 3G“ einstellen.

Abbildung 6. Befehle zur Netzwerkdrosselung im Befehlsmenü

Bedingte Haltepunkte automatisch vervollständigen

Mit der Benutzeroberfläche für die automatische Vervollständigung können Sie Conditional Breakpoint-Ausdrücke schneller eingeben.

Abbildung 7. UI für die automatische Vervollständigung

Schon gewusst? Die Benutzeroberfläche für die automatische Vervollständigung wird durch CodeMirror ermöglicht, das auch die Konsole unterstützt.

Bei AudioContext-Ereignissen unterbrechen

Verwenden Sie den Bereich Event-Listener-Haltepunkte, um die Ausführung in der ersten Zeile eines AudioContext-Lifecycle-Event-Handlers zu pausieren.

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

Abbildung 8. AudioContext-Ereignisse im Bereich „Event-Listener-Haltepunkte“

Fehlerbehebung für Node.js-Apps mit ndb

ndb ist ein neuer Debugger für Node.js-Anwendungen. Zusätzlich zu den üblichen Debugging-Funktionen, die Sie über die Entwicklertools erhalten, bietet ndb auch Folgendes:

• Unterprozesse erkennen und anhängen
• Breakpoints müssen vor Modulen platziert werden.
• Dateien in der DevTools-Benutzeroberfläche bearbeiten
• Standardmäßig werden alle Skripts außerhalb des aktuellen Arbeitsverzeichnisses ignoriert.

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

Möchten Sie messen, wie lange echte Nutzer brauchen, um wichtige Abläufe auf Ihren Seiten zu durchlaufen? Instrumentieren Sie Ihren Code mit der User Timing API.

Angenommen, Sie möchten messen, wie lange ein Nutzer auf Ihrer Startseite verbringt, bevor er auf die Call-to-Action-Schaltfläche klickt. Zuerst markieren Sie den Beginn des Ablaufs in einem Ereignishandler, der einem Seitenaufbau-Ereignis zugeordnet 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 Messungen auch extrahieren, um sie ganz einfach an Ihren Analysedienst zu senden und anonyme, zusammengefasste Daten zu erheben:

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

DevTools kennzeichnet Ihre Nutzertiming-Messungen automatisch im Bereich Nutzertiming Ihrer Leistungsaufzeichnungen.

Abbildung 10. Abschnitt „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 führt dies im Entwicklungsmodus aus.

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 unter 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.