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 das Video übersprungen Chrome 69, weil es nicht genügend neue Funktionen oder Änderungen an der Benutzeroberfläche gab, die einen Beitrag rechtfertigen.

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

• Live-Ausdrücke in der Console
• DOM-Knoten während der Eager-Bewertung hervorheben:
• Optimierungen im Leistungssteuerfeld:
• Zuverlässigere Fehlerbehebung.
• Aktivieren Sie die Netzwerkdrosselung über das Befehlsmenü.
• Bedingte Haltepunkte automatisch vervollständigen
• Unterbrechung bei AudioContext Terminen.
• Fehler in Node.js-Anwendungen mit ndb beheben
• Bonustipp: Erfassen Sie reale Nutzerinteraktionen mit der User Timing API.

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

Live-Ausdrücke in der Console

Pinnen Sie einen Live-Ausdruck oben in Ihrer Konsole an, wenn Sie seinen Wert in Echtzeit überwachen möchten.

1. Klicke auf Live-Ausdruck erstellen. Das Live Ausdrucks-Benutzeroberfläche wird geöffnet.

   

   Abbildung 1. Die Benutzeroberfläche für Live-Ausdrücke

2. Geben Sie den Ausdruck ein, den Sie überwachen möchten.

   

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

3. Klicken Sie auf eine Stelle außerhalb der Live-Ausdruck-Benutzeroberfläche, um Ihren 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 Eager Evaluation hervorheben

Geben Sie einen Ausdruck ein, der als DOM-Knoten in der Konsole ausgewertet wird, und klicken Sie jetzt auf Eager Evaluation (Eager Evaluation). wird dieser Knoten im Darstellungsbereich hervorgehoben.

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

Hier sind einige Ausdrücke, die für Sie von Interesse sein könnten:

• document.activeElement zum Hervorheben des Knotens, der derzeit im Fokus ist.
• document.querySelector(s) zum Hervorheben eines beliebigen Knotens, wobei s ein CSS-Selektor ist. Dieses entspricht dem Bewegen der Maus über einen Knoten in der DOM-Struktur.
• $0, um den aktuell in der DOM-Struktur ausgewählten Knoten hervorzuheben.
• Mit $0.parentElement wird das übergeordnete Element des aktuell ausgewählten Knotens markiert.

Optimierungen im Leistungssteuerfeld

Beim Erstellen eines Profils für eine große Seite dauerte die Verarbeitung des Steuerfelds „Leistung“ mehrere Sekunden. um die Daten zu visualisieren. Manchmal klicken auf der Registerkarte „Zusammenfassung“ auf ein Ereignis, um mehr darüber zu erfahren. das Laden dauerte mehrere Sekunden. In Chrome 70 ist die Verarbeitung und Visualisierung schneller.

Abbildung 5. Leistungsdaten werden verarbeitet und geladen

Zuverlässigere Fehlerbehebung

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

Außerdem werden Fehler im Zusammenhang mit Quellzuordnungen behoben. Einige TypeScript-Nutzer würden die Entwicklertools anweisen, beim Durchlaufen des Codes eine bestimmte TypeScript-Datei verwenden. Stattdessen würde die Entwicklertools den gesamte gebündelte JavaScript-Datei. Mit diesen Korrekturen wird auch ein Problem behoben, das den Quellenbereich verursacht hat. langsam laufen.

Netzwerkdrosselung über das Befehlsmenü aktivieren

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

Abbildung 6. Befehle zur Netzwerkdrosselung im Befehlsmenü

Bedingte Haltepunkte für automatische Vervollständigung

Verwenden Sie die Benutzeroberfläche der automatischen Vervollständigung, um Ihre bedingten Haltepunkt-Ausdrücke schneller einzugeben.

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

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

Unterbrechung bei AudioContext-Ereignissen

Verwenden Sie den Bereich Ereignis-Listener-Haltepunkte, um in der ersten Zeile eines AudioContexts zu pausieren. Lifecycle-Event-Handler.

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

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

Fehler in Node.js-Anwendungen mit ndb beheben

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

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

Abbildung 9. NDB-UI

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

Bonustipp: Erfassen Sie reale Nutzerinteraktionen mit der User Timing API.

Möchten Sie messen, wie viel Zeit echte Nutzer benötigen, um wichtige Kaufprozesse auf Ihren Seiten abzuschließen? Erwägen Sie Sie instrumentieren Ihren Code mit der User Timing API.

Angenommen, Sie möchten messen, wie viel Zeit ein Nutzer auf Ihrer Startseite verbringt, bevor er auf die Anzeige klickt. die Call-to-Action-Schaltfläche (CTA) einfügen. Zunächst einmal würden Sie den Beginn der Reise Event-Handler, der mit einem Seitenaufbauereignis wie DOMContentLoaded verknüpft ist:

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, um sie einfach an Ihren Analysedienst zu senden, anonyme, aggregierte Daten zu erheben:

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

Die Messungen für das Nutzertiming werden in den Entwicklertools automatisch im Bereich Nutzertiming des Auftritte aufzeichnen

Abbildung 10. Bereich „Nutzertiming“

Dies ist auch beim Debuggen oder Optimieren von Code praktisch. Wenn Sie z. B. eine Kampagne optimieren möchten, in einer bestimmten Phase Ihres Lebenszyklus haben, rufen Sie window.performance.mark() am Anfang und Ende Lebenszyklusfunktion. React macht das im Entwicklungsmodus.

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