Neuerungen in den Entwicklertools (Chrome 76)

Kayce Basques

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

Automatische Vervollständigung 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 automatische Vervollständigung im Bereich „Stil“ unterstützt jetzt CSS-Werte. Wenn Sie sich an den gewünschten Keyword-Wert erinnern, aber den Attributnamen vergessen haben, geben Sie den Wert ein. Die automatische Vervollständigung sollte Ihnen helfen, den gesuchten Namen zu finden.

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

Feedback zu dieser neuen Funktion können Sie unter Chromium-Problem 931145 senden.

Eine neue Benutzeroberfläche für Einstellungen für Werbenetzwerke

Im Netzwerkbereich gab es zuvor ein Problem mit der Nutzerfreundlichkeit, bei dem Optionen wie das Menü zur Drosselung nicht erreichbar waren, wenn das DevTools-Fenster schmal war. Um dieses Problem zu beheben und den Netzwerkbereich übersichtlicher zu gestalten, 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, Screenshots erstellen. In Abbildung 3 werden die alten Standorte den neuen zugeordnet.

Abbildung 3: Die alten Standorte werden den neuen zugeordnet.

Feedback zu dieser Änderung der Benutzeroberfläche können Sie unter Chromium-Problem 892969 geben.

WebSocket-Nachrichten in HAR-Exporten

Wenn Sie eine HAR-Datei aus dem Netzwerkbereich exportieren, um Netzwerkprotokolle mit Ihren Kollegen zu teilen, enthält die HAR-Datei jetzt WebSocket-Nachrichten. Das Attribut _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!"
  }
]
...

Feedback zu dieser neuen Funktion können Sie unter Chromium-Problem 496006 senden.

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 einfacher mit Kollegen teilen. Der Import und Export von HAR-Dateien ist in den Entwicklertools schon länger möglich. Die Schaltflächen sind jetzt leichter zu finden.

Abbildung 4: Die neuen HAR-Schaltflächen.

Feedback zu dieser Änderung der Benutzeroberfläche können Sie unter Chromium-Problem 904585 senden.

Gesamte Arbeitsspeichernutzung in Echtzeit

Im Bereich „Arbeitsspeicher“ wird jetzt die gesamte Arbeitsspeichernutzung in Echtzeit angezeigt.

Abbildung 5: Unten im Bereich „Memory“ sehen Sie, dass die Seite insgesamt 43,4 MB Arbeitsspeicher verwendet. 209 KB/s gibt an, dass die Gesamtarbeitsspeichernutzung um 209 KB pro Sekunde steigt.

Weitere Informationen zur Echtzeit-Überwachung der Arbeitsspeichernutzung finden Sie unter Leistungsmonitor.

Feedback zu dieser neuen Funktion können Sie unter Chromium-Problem 958177 senden.

Portnummern für die Service Worker-Registrierung

Im Bereich Service Workers werden jetzt Portnummern in den Titeln angezeigt, damit Sie leichter nachvollziehen können, welchen Service Worker Sie gerade debuggen.

Abbildung 6: Service Worker-Ports.

Feedback zu dieser Änderung der Benutzeroberfläche können Sie unter Chromium-Problem 601286 geben.

Ereignisse für Hintergrundabruf und Hintergrundsynchronisierung prüfen

Im neuen Bereich Hintergrunddienste des Bereichs Anwendung können Sie Ereignisse für Hintergrundabruf und Hintergrundsynchronisierung im Blick behalten. Da Ereignisse vom Typ „Background Fetch“ und „Background Sync“ im Hintergrund auftreten, wäre es nicht sehr nützlich, wenn die DevTools diese Ereignisse nur aufzeichnen würden, während die DevTools geöffnet sind. Sobald Sie mit der Aufzeichnung beginnen, werden Ereignisse für „Background Fetch“ und „Background Sync“ auch dann weiter aufgezeichnet, wenn Sie den Tab oder Chrome schließen.

Rufen Sie den Bereich Anwendung auf, öffnen Sie den Tab Background Fetch oder Background Sync und klicken Sie dann auf Aufzeichnen , um mit dem Logging von Ereignissen zu beginnen. Klicken Sie auf ein Ereignis, um weitere Informationen dazu aufzurufen.

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

Abbildung 8. Der Bereich „Hintergrundsynchronisierung“.

Feedback zu diesen neuen Funktionen können Sie unter Chromium-Problem 927726 senden.

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 Video unten gezeigt.

Nach dem Ausführen von node example.js wird Firefox geöffnet und der Text page wird in das Suchfeld auf der Puppeteer-Dokumentationswebsite eingefügt. Anschließend wird dieselbe Aufgabe in Chromium wiederholt.

Im Puppeteer-Vortrag von Joel und Andrey auf der Google I/O 2019 erfährst du mehr über Puppeteer und Puppeteer für Firefox. Die Ankündigung zu Firefox erfolgt etwa bei 4:05.

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Vorabversionen erhalten Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Nutzen Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder andere Themen im Zusammenhang mit den Entwicklertools zu diskutieren.

• Feedback und Feature Requests können Sie unter crbug.com einreichen.
• Sie können ein Problem mit den Entwicklertools melden, indem Sie in den Entwicklertools auf das Dreipunkt-Menü more_vert Weitere Optionen > Hilfe > Problem mit den Entwicklertools melden klicken.
• Tweeten Sie an @ChromeDevTools.
• Hinterlassen Sie Kommentare zu den YouTube-Videos What's new in DevTools oder DevTools Tips.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.