Neuerungen in den Entwicklertools (Chrome 76)

Kayce Basques

Hallo! Das ist neu bei den Chrome-Entwicklertools in Chrome 76.

Mit CSS-Werten automatisch vervollständigen

Beim Hinzufügen von Stildeklarationen zu einem DOM-Knoten ist der Deklarationswert manchmal besser zu merken als der Deklarationsname. Wenn Sie beispielsweise einen <p>-Knoten fett formatieren, könnte der Wert bold leichter zu merken als den Namen font-weight. Die Benutzeroberfläche zur automatischen Vervollständigung des Stilbereichs unterstützt jetzt CSS Werte. Wenn Sie sich an den gewünschten Keyword-Wert, aber nicht an den Namen der Eigenschaft erinnern, versuchen Sie, die Eingabe des Werts und die automatische Vervollständigung helfen Ihnen, den gewünschten Namen zu finden.

Abbildung 1: Nachdem Sie bold eingegeben haben, wird der Stilbereich automatisch zu font-weight: bold vervollständigt.

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

Neue Benutzeroberfläche für Netzwerkeinstellungen

Im Bereich „Netzwerk“ traten zuvor Probleme mit der Nutzerfreundlichkeit auf, bei denen Optionen wie das Drosselungsmenü nicht erreichbar, wenn das Entwicklertools-Fenster schmal war. Um das Problem zu beheben und den Netzwerkbereich übersichtlicher zu gestalten, Einige seltener verwendete Optionen wurden hinter die neuen Werbenetzwerkeinstellungen verschoben .

Abbildung 2. Netzwerkeinstellungen.

Die folgenden Optionen wurden in die Netzwerkeinstellungen verschoben: Große Anfragezeilen verwenden, Gruppieren nach Frame, Show Overview (Übersicht anzeigen), Capture Screenshots (Screenshots aufnehmen). Abbildung 3 ordnet die alten Standorte den neuen Standorten zu. zu erhalten.

Abbildung 3: Die alten zu den neuen Standorten zuordnen

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

WebSocket-Nachrichten in HAR-Exporten

Wenn Sie eine HAR-Datei aus dem Steuerfeld „Netzwerk“ exportieren, um Netzwerkprotokolle für Kollegen freizugeben, Ihre HAR-Datei enthält jetzt WebSocket-Nachrichten. Das Attribut _webSocketMessages beginnt mit einem um anzuzeigen, 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 uns Ihr Feedback zu dieser neuen Funktion über das Chromium-Problem Nr. 496006.

Schaltflächen zum Importieren und Exportieren von HAR

Teilen Sie Netzwerkprotokolle mit der neuen Funktion Alle als HAR-Datei mit Inhalt exportieren noch einfacher mit Kollegen. und HAR-Datei importieren -Schaltflächen. HAR-Import und -Export gibt es schon seit einiger Zeit in den Entwicklertools. Die neuen Schaltflächen sind besser auffindbar.

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 „Arbeitsspeicher“ wird jetzt die gesamte Arbeitsspeichernutzung in Echtzeit angezeigt.

Abbildung 5: Unten im Bereich „Arbeitsspeicher“ wird angezeigt, dass die Seite 43,4 MB Arbeitsspeicher in gesamt. 209 KB/s zeigt an, dass die Gesamtspeicherauslastung um 209 KB pro Sekunde zunimmt.

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

Der Bereich Service Workers enthält jetzt Portnummern in den Titeln, um den Überblick zu behalten. welchen Service Worker Sie debuggen.

Abbildung 6. Service Worker-Ports

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

Ereignisse vom Typ „Hintergrundabruf“ und „Hintergrundsynchronisierung“ prüfen

Verwenden Sie den neuen Abschnitt Hintergrunddienste im Bereich Anwendung, um den Hintergrund Abrufereignisse und Hintergrundsynchronisierung Da die Ereignisse „Hintergrundabruf“ und „Hintergrundsynchronisierung“ im Hintergrund erfolgen, wäre es nicht sehr nützlich, wenn die Entwicklertools nur Abruf- und Hintergrundsynchronisierungsereignisse, während die Entwicklertools geöffnet waren. Sobald Sie mit der Aufnahme beginnen, Abruf- und Hintergrundsynchronisierungsereignisse werden weiterhin aufgezeichnet, auch wenn Sie den Tab schließen. auch nach dem Schließen von Chrome.

Gehen Sie zum Bereich Anwendung, öffnen Sie den Tab Hintergrundabruf oder Hintergrundsynchronisierung und Klicken Sie auf Record , um mit der Protokollierung zu beginnen. Ereignisse. Klicken Sie auf einen Termin, um weitere Informationen dazu anzuzeigen.

Abbildung 7. Bereich „Hintergrundabruf“ Demo von Maxim Salnikov

Abbildung 8. Bereich „Hintergrundsynchronisierung“

Senden Sie uns Feedback zu diesen neuen Funktionen über das Chromium-Problem 927726.

Puppeteer für Firefox

Puppeteer für Firefox ist ein neues experimentelles Projekt, mit dem Sie Firefox mit dem Puppeteer API Mit anderen Worten: Sie können Firefox und Chromium jetzt mit derselben Node API automatisieren, das im Video unten gezeigt wird.

Wenn Sie node example.js ausführen, wird Firefox geöffnet und der Text page wird in das Suchfeld eingefügt. auf der Dokumentationswebsite von Puppeteer. Dann wird dieselbe Aufgabe in Chromium wiederholt.

Im Puppeteer-Vortrag von Joel und Andrey von 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

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre Nutzer es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

• Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• Twittern Sie unter @ChromeDevTools.
• Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools