Neuerungen in den Entwicklertools (Chrome 63)

Kayce Basques

Willkommen zurück! Zu den neuen Funktionen der Entwicklertools in Chrome 63 gehören:

• Unterstützung von Remote-Debugging für mehrere Clients.
• Workspaces 2.0.
• Vier neue Prüfungen.
• Push-Benachrichtigungen mit benutzerdefinierten Daten simulieren
• Synchronisierungsereignisse im Hintergrund mit benutzerdefinierten Tags auslösen

Lesen Sie weiter oder sehen Sie sich das Video unten an, um mehr zu erfahren.

Unterstützung von Remote-Debugging für mehrere Clients

Wenn Sie schon einmal das Debugging einer App in einer IDE wie VS Code oder WebStorm ausprobiert haben, haben festgestellt, dass beim Öffnen der Entwicklertools die Fehlerbehebungssitzung durcheinander geraten. Außerdem war es aufgrund dieses Problems WebDriver-Tests mit den Entwicklertools debuggen.

Ab Chrome 63 unterstützen die Entwicklertools standardmäßig mehrere Clients für die Remote-Fehlerbehebung. Konfiguration erforderlich.

Das Remote-Debugging mit mehreren Clients war das häufigste Problem in den Entwicklertools auf crbug.com. Nummer 3 für das gesamte Chromium-Projekt. Die Unterstützung von Mehrfachkundenkonten interessante Möglichkeiten zur Integration anderer Tools in die Entwicklertools oder die Verwendung dieser Tools in neuen . Beispiel:

• Protokollclients wie ChromeDriver oder die Chrome-Debugging-Erweiterungen für VS Code und Webstorm und WebSocket-Clients wie Puppeteer, können jetzt gleichzeitig mit den Entwicklertools ausgeführt werden.
• Zwei separate WebSocket-Protokollclients, wie z. B. Puppeteer oder chrome-remote-interface, können jetzt gleichzeitig mit demselben Tab verbunden werden.
• Chrome-Erweiterungen, die die chrome.debugger API verwenden, können jetzt gleichzeitig mit den Entwicklertools ausgeführt werden.
• Mehrere unterschiedliche Chrome-Erweiterungen können die chrome.debugger API jetzt auf demselben Tab verwenden gleichzeitig.

Arbeitsbereiche 2.0

Arbeitsbereiche gibt es schon seit einiger Zeit in den Entwicklertools. Mit dieser Funktion kannst du die Entwicklertools als Ihrer IDE. Sie nehmen einige Änderungen an Ihrem Quellcode in den Entwicklertools vor und diese Änderungen bleiben im lokale Version Ihres Projekts in Ihrem Dateisystem.

Workspaces 2.0 basiert auf Version 1.0 und bietet eine hilfreichere Benutzeroberfläche und eine verbesserte automatische Zuordnung von Code. Die Veröffentlichung dieser Funktion war ursprünglich kurz nach dem Chrome Developer Summit geplant. (CDS) 2016 beschlossen, aber das Team hat die Einführung verschoben, um einige Probleme zu lösen.

In der Rubrik "Authoring" Teil (ca. 14:28) des Entwicklertools-Vortrags von CDS 2016 über Arbeitsbereiche 2.0 in Aktion.

Vier neue Prüfungen

In Chrome 63 gibt es im Bereich Audits vier neue Audits:

• Bilder als WebP bereitstellen.
• Verwenden Sie Bilder mit geeigneten Seitenverhältnissen.
• Vermeiden Sie Front-End-JavaScript-Bibliotheken mit bekannten Sicherheitslücken.
• In der Console protokollierte Browserfehler.

Unter Lighthouse in den Chrome-Entwicklertools ausführen erfahren Sie, wie Sie mithilfe des Bereichs Audits die die Qualität Ihrer Seiten zu verbessern.

Weitere Informationen zu dem Projekt, das dem Bereich Audits zugrunde liegt, finden Sie unter Lighthouse.

Push-Benachrichtigungen mit benutzerdefinierten Daten simulieren

Die Simulation von Push-Benachrichtigungen gibt es in den Entwicklertools schon seit einiger Zeit. Es gibt allerdings eine Einschränkung: Es konnten keine benutzerdefinierten Daten gesendet werden. Mit dem neuen Textfeld Push im Bereich Service Worker in Chrome 63 ist das jetzt möglich. Jetzt ausprobieren:

1. Gehen Sie zu Einfache Push-Demo.
2. Klicken Sie auf Push-Benachrichtigungen aktivieren.
3. Klicken Sie auf Zulassen, wenn Sie von Chrome aufgefordert werden, Benachrichtigungen zuzulassen.
4. Öffnen Sie die Entwicklertools.
5. Wechseln Sie zum Bereich Service Worker.

6. Geben Sie einen Text in das Textfeld Senden ein.

   

   Abbildung 1. Simulieren einer Push-Benachrichtigung mit benutzerdefinierten Daten mithilfe des Textfelds Push in der Bereich Service Worker

7. Klicke auf Senden, um die Benachrichtigung zu senden.

   

   Abbildung 2. Die simulierte Push-Benachrichtigung

Synchronisierungsereignisse im Hintergrund mit benutzerdefinierten Tags auslösen

Das Auslösen von Hintergrundsynchronisierungsereignissen erfolgt seit einiger Zeit auch im Bereich Service Workers, aber können Sie jetzt benutzerdefinierte Tags senden:

1. Öffnen Sie die Entwicklertools.
2. Wechseln Sie zum Bereich Service Worker.
3. Geben Sie einen Text in das Textfeld Synchronisieren ein.
4. Klicken Sie auf Synchronisieren.

Abbildung 3. Nachdem Sie auf Synchronisieren geklickt haben, wird von den Entwicklertools ein Hintergrundsynchronisierungsereignis mit dem benutzerdefinierten Tag gesendet. update-content für den Service Worker

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