Neuerungen in den Entwicklertools (Chrome 76)

Kayce Basques

Hallo! Hier sind die Neuigkeiten in den Chrome-Entwicklertools in Chrome 76.

Autocomplete mit CSS-Werten

Wenn Sie einem DOM-Knoten Stildeklarationen hinzufügen, ist der Deklarationswert manchmal leichter zu merken als der Deklarationsname. Wenn Sie beispielsweise einen <p>-Knoten fett formatieren, ist der Wert bold möglicherweise leichter zu merken als der Name font-weight. Die Benutzeroberfläche für die automatische Vervollständigung im Bereich „Stil“ unterstützt jetzt CSS-Werte. Wenn Sie sich an den gewünschten Keyword-Wert erinnern, sich aber nicht an den Property-Namen erinnern können, geben Sie den Wert ein. Mithilfe der automatischen Vervollständigung sollte der gewünschte Name angezeigt werden.

Abbildung 1: Nachdem Sie bold eingegeben haben, wird im Bereich „Stile“ automatisch font-weight: bold ergänzt.

Senden Sie Feedback zu dieser neuen Funktion an Chromium-Problem 931145.

Eine neue Benutzeroberfläche für die Netzwerkeinstellungen

Das Steuerfeld „Netzwerk“ hatte zuvor ein Usability-Problem, bei dem Optionen wie das Menü für die Drosselung nicht erreichbar waren, wenn das DevTools-Fenster schmal war. Um dieses Problem zu beheben und den Bereich „Netzwerk“ zu entlasten, wurden einige weniger häufig verwendete Optionen in den neuen Bereich Netzwerkeinstellungen verschoben.

Abbildung 2. Netzwerkeinstellungen.

Die folgenden Optionen wurden in die Netzwerkeinstellungen verschoben: Große Anfragezeilen verwenden, Nach Frame gruppieren, Übersicht anzeigen und Screenshots erstellen. In Abbildung 3 sind die alten Standorte den neuen zugeordnet.

Abbildung 3: Die alten Standorte den neuen zuordnen.

Senden Sie Feedback zu dieser Benutzeroberflächenänderung an Chromium-Problem 892969.

WebSocket-Nachrichten in HAR-Exporten

Wenn Sie eine HAR-Datei aus dem Bereich „Netzwerk“ exportieren, um Netzwerkprotokolle für Ihre Kollegen freizugeben, enthält die HAR-Datei jetzt WebSocket-Nachrichten. Die Property _webSocketMessages beginnt mit einem Unterstrich, um anzugeben, dass es sich um ein benutzerdefiniertes Feld handelt.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Senden Sie Feedback zu dieser neuen Funktion an Chromium-Problem 496006.

Schaltflächen zum Importieren und Exportieren von HAR-Dateien

Mit den neuen Schaltflächen Alle als HAR mit Inhalt exportieren und HAR-Datei importieren können Sie Netzwerkprotokolle jetzt noch einfacher mit Kollegen teilen. Der Import und Export von HAR-Dateien ist in DevTools schon länger möglich. Die Schaltflächen sind jetzt leichter zu finden.

Abbildung 4: Die neuen HAR-Schaltflächen

Senden Sie Feedback zu dieser Benutzeroberflächenänderung an Chromium-Problem 904585.

Gesamte Arbeitsspeichernutzung in Echtzeit

Im Bereich „Speicher“ wird jetzt die Gesamtspeichernutzung in Echtzeit angezeigt.

Abbildung 5: Unten im Bereich „Speicher“ sehen Sie, dass die Seite insgesamt 43,4 MB Arbeitsspeicher belegt. 209 KB/s bedeutet, dass sich die Gesamtnutzung des Arbeitsspeichers um 209 KB pro Sekunde erhöht.

Weitere Informationen finden Sie im Leistungsmonitor, mit dem Sie die Arbeitsspeichernutzung in Echtzeit erfassen können.

Senden Sie Feedback zu dieser neuen Funktion an Chromium-Problem 958177.

Portnummern für die Service Worker-Registrierung

Die Titel im Bereich Dienstworker enthalten jetzt Portnummern, damit Sie leichter nachvollziehen können, für welchen Dienstworker Sie das Debugging durchführen.

Abbildung 6. Service Worker-Ports

Senden Sie Feedback zu dieser Benutzeroberflächenänderung an Chromium-Problem 601286.

Ereignisse für den Hintergrundabruf und die Hintergrundsynchronisierung prüfen

Im Bereich Anwendung finden Sie den neuen Bereich Hintergrunddienste, in dem Sie Abruf im Hintergrund- und Synchronisierung im Hintergrund-Ereignisse überwachen können. Da Hintergrundabruf- und Hintergrundsynchronisierungsereignisse im Hintergrund stattfinden, wäre es nicht sehr nützlich, wenn DevTools nur Hintergrundabruf- und Hintergrundsynchronisierungsereignisse aufzeichnen würde, während DevTools geöffnet ist. Sobald Sie die Aufzeichnung gestartet haben, werden Ereignisse für den Abruf und die Synchronisierung im Hintergrund auch dann erfasst, wenn Sie den Tab oder Chrome schließen.

Rufen Sie den Bereich Anwendung auf, öffnen Sie den Tab Im Hintergrund abrufen oder Im Hintergrund synchronisieren und klicken Sie dann auf Aufzeichnen , um Ereignisse zu erfassen. Klicken Sie auf ein Ereignis, um weitere Informationen dazu aufzurufen.

Abbildung 7. Der Bereich „Hintergrundabruf“. Demo von Maxim Salnikov

Abbildung 8. Im Bereich „Hintergrundsynchronisierung“

Senden Sie Feedback zu diesen neuen Funktionen an Chromium-Problem 927726.

Puppeteer für Firefox

Puppeteer for Firefox ist ein neues experimentelles Projekt, mit dem Sie Firefox mit der Puppeteer API automatisieren können. Mit anderen Worten: Sie können jetzt Firefox und Chromium mit derselben Node API automatisieren, wie im Video unten gezeigt.

Nachdem Sie node example.js ausgeführt haben, wird Firefox geöffnet und der Text page wird in das Suchfeld auf der Dokumentationswebsite von Puppeteer eingefügt. Anschließend wird dieselbe Aufgabe in Chromium wiederholt.

Sehen Sie sich den Puppeteer-Vortrag von Joel und Andrey von der Google I/O 2019 an, um mehr über Puppeteer und Puppeteer für Firefox zu erfahren. Die Ankündigung zu Firefox erfolgt gegen 4:05 Uhr.

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.

• Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
• Melden Sie ein DevTools-Problem über das Dreipunkt-Menü more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Tweeten Sie an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.

Neu in den DevTools

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