Neuerungen in den Entwicklertools (Chrome 76)

Kayce Basques

Hallo! Hier finden Sie die Neuerungen 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, aber nicht an den Namen der Property, 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 „Formatvorlagen“ automatisch font-weight: bold vervollständigt.

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

Neue Benutzeroberfläche für Netzwerkeinstellungen

Im Bereich „Netzwerk“ gab es bisher ein Usability-Problem: Optionen wie das Drosselungsmenü waren nicht erreichbar, wenn das Entwicklertools-Fenster schmal war. Um dieses Problem zu beheben und den Bereich „Netzwerk“ ü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 Anforderungszeilen verwenden, Nach Frame gruppieren, Übersicht anzeigen und Screenshots erstellen. In Abbildung 3 werden die alten Speicherorte den neuen zugeordnet.

Abbildung 3: Die alten Standorte den neuen zuordnen.

Feedback zu dieser Änderung der Benutzeroberfläche können Sie über Chromium-Problem #892969 senden.

WebSocket-Nachrichten in HAR-Exporten

Wenn Sie eine HAR-Datei aus dem Bereich „Netzwerk“ exportieren, um Netzwerkprotokolle mit Ihren Kollegen zu teilen, 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!"
  }
]
...

Feedback zu dieser neuen Funktion können Sie über Chromium-Problem #496006 senden.

Schaltflächen zum Importieren und Exportieren von HAR-Dateien

Mit den neuen Schaltflächen Alles als HAR mit Inhalt exportieren und HAR-Datei importieren können Sie Netzwerkprotokolle einfacher mit Kollegen teilen. Das Importieren und Exportieren von HAR-Dateien ist in den DevTools schon seit einiger Zeit 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 über Chromium-Problem 904585 senden.

Gesamte Arbeitsspeichernutzung in Echtzeit

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

Abbildung 5: Unten im Bereich „Arbeitsspeicher“ sehen Sie, dass die Seite insgesamt 43,4 MB Arbeitsspeicher verwendet. 209 KB/s bedeutet, dass die gesamte Speichernutzung um 209 KB pro Sekunde zunimmt.

Mit dem Performance Monitor können Sie die Arbeitsspeichernutzung in Echtzeit verfolgen.

Feedback zu dieser neuen Funktion können Sie über Chromium-Problem #958177 senden.

Service Worker-Registrierungsportnummern

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

Abbildung 6: Service Worker-Ports.

Feedback zu dieser Änderung der Benutzeroberfläche können Sie über Chromium-Problem #601286 senden.

Hintergrundabruf- und Hintergrundsynchronisierungsereignisse prüfen

Im neuen Bereich Hintergrunddienste des Bereichs Anwendung können Sie Ereignisse vom Typ Hintergrundabruf und Hintergrundsynchronisierung beobachten. Da Background Fetch- und Background Sync-Ereignisse im Hintergrund stattfinden, wäre es nicht sehr nützlich, wenn DevTools diese Ereignisse nur aufzeichnen würde, wenn DevTools geöffnet ist. Sobald Sie die Aufzeichnung starten, werden Ereignisse für Background Fetch und die Hintergrundsynchronisierung weiterhin aufgezeichnet, auch wenn Sie den Tab oder Chrome schließen.

Rufen Sie den Bereich Anwendung auf, öffnen Sie den Tab Background Fetch (Abruf im Hintergrund) oder Background Sync (Synchronisierung im Hintergrund) und klicken Sie dann auf Aufzeichnen , um mit der Protokollierung 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 über 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. Das bedeutet, dass Sie Firefox und Chromium jetzt mit derselben Node-API automatisieren können, wie im Video unten gezeigt.

Nach der Ausführung von node example.js 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.

Im Puppeteer-Vortrag von Joel und Andrey auf der Google I/O 2019 erfahren Sie mehr über Puppeteer und Puppeteer für Firefox. Die Firefox-Ankündigung erfolgt gegen 4:05 Uhr.

Vorschaukanäle herunterladen

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

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

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