Neuerungen in den Entwicklertools (Chrome 76)

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

Autocomplete mit CSS-Werten

Beim Hinzufügen von Stildeklarationen zu einem DOM-Knoten ist der Deklarationswert manchmal leichter zu merken als der Deklarationsname. Wenn Sie beispielsweise einen <p>-Knoten fett formatieren, kann sich der Wert bold leichter 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, aber nicht an den Namen der Eigenschaft erinnern können, geben Sie den Wert ein. Die automatische Vervollständigung hilft Ihnen, den gewünschten Namen zu finden.

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

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 das Netzwerkpanel zu entlasten, wurden einige weniger häufig verwendete Optionen in den neuen Bereich Netzwerkeinstellungen Schaltfläche „Netzwerkeinstellungen“ verschoben.

Einstellungen für Werbenetzwerke

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 werden die alten Standorte den neuen Standorten zugeordnet.

Die alten Standorte den neuen zuordnen.

Abbildung 3: Die alten zu den neuen Standorten 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 Steuerfeld „Netzwerk“ exportieren, um Netzwerkprotokolle für Ihre Kollegen freizugeben, enthält Ihre 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 für HAR-Import und -Export

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

Die neuen HAR-Schaltflächen.

Abbildung 4: Die neuen HAR-Schaltflächen

Senden Sie uns über das Chromium-Problem 904585 Feedback zu dieser Änderung der Benutzeroberfläche.

Gesamte Arbeitsspeichernutzung in Echtzeit

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

Gesamte Arbeitsspeichernutzung in Echtzeit.

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.

Informationen zum Tracking der Arbeitsspeichernutzung in Echtzeit finden Sie unter Leistungsüberwachung.

Senden Sie uns Feedback zu dieser neuen Funktion über das 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.

Service Worker-Ports

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 diese Ereignisse 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.

Gehen Sie zum Bereich Anwendung, öffnen Sie den Tab Hintergrundabruf oder Hintergrundsynchronisierung und klicken Sie dann auf Aufzeichnen Eintrag, um mit der Protokollierung von Ereignissen zu beginnen. Klicken Sie auf ein Ereignis, um weitere Informationen dazu aufzurufen.

Bereich „Hintergrundabruf“

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

Im Bereich „Hintergrundsynchronisierung“

Abbildung 8. Im Bereich „Hintergrundsynchronisierung“

Senden Sie uns Feedback zu diesen neuen Funktionen über das 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 folgenden Video 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. Dann 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 Firefox-Ankündigung erfolgt gegen 4:05 Uhr.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs 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 DevTools

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