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 kann man sich den Deklarationswert manchmal besser 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 „Network“ (Netzwerk) trat zuvor ein Problem bei der Nutzerfreundlichkeit auf, bei dem 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

Du kannst über das Chromium-Problem 892969 Feedback zu dieser Änderung der Benutzeroberfläche senden.

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 für HAR-Import und -Export

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 „Background Fetch“ und „Background Sync“ im Hintergrund erfolgen, wäre es nicht sehr nützlich, wenn die Entwicklertools nur den Hintergrund 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 der 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 erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine 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