Neuerungen in den Entwicklertools (Chrome 76)

Kayce Basques

Hallo! Das ist neu bei 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, 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. Mit der automatischen Vervollständigung sollte der gewünschte Name angezeigt werden.

Nach der Eingabe von &quot;fett&quot; wird im Stilbereich automatisch &quot;font-weight: fett&quot; angezeigt.

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

Die alten Standorte den neuen zuordnen.

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 Exportieren und HAR-Datei importieren 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.

Die neuen HAR-Schaltflächen.

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.

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.

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

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 uns über das Chromium-Problem 601286 Feedback zu dieser Änderung der Benutzeroberfläche.

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 mit der Aufzeichnung beginnen, werden die Ereignisse im Hintergrund sowie bei der Hintergrundsynchronisierung aufgezeichnet, auch nachdem Sie den Tab und Chrome geschlossen haben.

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

Der Bereich „Hintergrundabruf“.

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

Bereich „Hintergrundsynchronisierung“

Abbildung 8. Im Bereich „Hintergrundsynchronisierung“

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

Puppeteer für Firefox

Puppeteer für 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

Verwende die folgenden Optionen, um die neuen Funktionen, Updates oder andere Aspekte der Entwicklertools zu besprechen.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools