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 Entwicklertools in Chrome 70 gehören:

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. Klicken Sie auf Live-Ausdruck erstellen Ausdrucksfreiheit. Die Benutzeroberfläche für Live-Ausdrücke wird geöffnet.

    Die Benutzeroberfläche für Live-Ausdrücke

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

  2. Geben Sie den Ausdruck ein, den Sie überwachen 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 auf eine Stelle außerhalb der Live-Ausdruck-Benutzeroberfläche, um Ihren Ausdruck zu speichern.

    Ein gespeicherter Live-Ausdruck.

    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 in der Konsole einen Ausdruck ein, der als DOM-Knoten ausgewertet wird. Durch Eager Evaluation wird dieser Knoten nun im Darstellungsbereich hervorgehoben.

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

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

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

  • document.activeElement zum Hervorheben des Knotens, der aktuell im Fokus ist.
  • document.querySelector(s) zum Hervorheben eines beliebigen Knotens, wobei s ein CSS-Selektor ist. Dies 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 Bereich „Leistung“

Beim Erstellen des Profils einer großen Seite dauerte die Verarbeitung und Visualisierung der Daten im Steuerfeld „Leistung“ mehrere Sekunden. Das Klicken auf ein Ereignis auf dem Tab „Zusammenfassung“, um weitere Informationen zu erhalten, hat manchmal auch mehrere Sekunden zum Laden gedauert. In Chrome 70 ist die Verarbeitung und Visualisierung schneller.

Leistungsdaten werden verarbeitet und geladen.

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 weisen die Entwicklertools an, beim Durchlaufen des Codes eine bestimmte TypeScript-Datei zu ignorieren. Stattdessen wird die gesamte gebündelte JavaScript-Datei ignoriert. Damit wurde auch ein Problem behoben, das dazu führte, dass der Bereich „Quellen“ im Allgemeinen langsam ausgeführt wurde.

Netzwerkdrosselung über das Befehlsmenü aktivieren

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

Befehle zur Netzwerkdrosselung im Befehlsmenü.

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.

Benutzeroberfläche für die automatische Vervollständigung

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, der auch die Console unterstützt.

Unterbrechung bei AudioContext-Ereignissen

Verwenden Sie den Bereich Ereignis-Listener-Haltepunkte, um in der ersten Zeile eines AudioContext-Lebenszyklus-Event-Handlers eine Pause einzulegen.

AudioContext ist Teil der Web Audio API, mit der Audioinhalte verarbeitet und synthetisiert werden können.

AudioContext-Ereignisse im Bereich "Event Listener Breakpoints" anzeigen.

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, die Sie über die Entwicklertools erhalten, 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.

Die ndb-Benutzeroberfläche.

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? Sie können Ihren Code mit der User Timing API instrumentieren.

Angenommen, Sie möchten messen, wie viel Zeit ein Nutzer auf Ihrer Startseite verbringt, bevor er auf die Call-to-Action-Schaltfläche (CTA) klickt. Zuerst markieren Sie den Beginn der Reise in einem Event-Handler, 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 auch Ihre Messungen extrahieren, um sie einfach an Ihren Analysedienst zu senden, um anonyme, aggregierte Daten zu erfassen:

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

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

Bereich „Nutzertiming“

Abbildung 10. Bereich „Nutzertiming“

Dies ist auch bei der Fehlerbehebung oder Optimierung 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

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine 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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59