Neuerungen in den Entwicklertools (Chrome 63)

Kayce Basques
Kayce Basques
X GitHub

Willkommen zurück! Zu den neuen Funktionen, die in Chrome 63 in den Entwicklertools eingeführt werden, gehören:

Weitere Informationen finden Sie unten oder im Video.

Unterstützung für das Remote-Debugging mehrerer Clients

Wenn Sie schon einmal versucht haben, eine App über eine IDE wie VS Code oder WebStorm zu debuggen, haben Sie wahrscheinlich festgestellt, dass das Öffnen der DevTools Ihre Debugging-Sitzung beeinträchtigt. Dieses Problem hat es auch unmöglich gemacht, WebDriver-Tests mit DevTools zu debuggen.

Ab Chrome 63 werden in den Entwicklertools standardmäßig mehrere Remote-Debugging-Clients unterstützt. Eine Konfiguration ist nicht erforderlich.

Das Remote-Debugging mit mehreren Clients war das beliebteste DevTools-Problem auf crbug.com und das drittbeliebteste im gesamten Chromium-Projekt. Die Unterstützung mehrerer Clients bietet auch einige interessante Möglichkeiten, andere Tools in die Entwicklertools zu integrieren oder diese Tools auf neue Weise zu verwenden. Beispiel:

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

Arbeitsbereiche 2.0

Arbeitsbereiche gibt es schon seit einiger Zeit in den Entwicklertools. Mit dieser Funktion können Sie die Entwicklertools als IDE verwenden. Sie nehmen in den Entwicklertools Änderungen an Ihrem Quellcode vor und die Änderungen werden in der lokalen Version Ihres Projekts in Ihrem Dateisystem beibehalten.

Workspaces 2.0 basiert auf Version 1.0 und bietet eine benutzerfreundlichere Oberfläche sowie eine verbesserte automatische Zuordnung von transpiliertem Code. Diese Funktion sollte ursprünglich kurz nach dem Chrome Developer Summit (CDS) 2016 veröffentlicht werden. Das Team hat die Veröffentlichung jedoch verschoben, um einige Probleme zu beheben.

Im DevTools-Vortrag auf der CDS 2016 können Sie sich ab etwa 14:28 Minuten ansehen, wie Workspaces 2.0 in der Praxis funktioniert.

Vier neue Audits

In Chrome 63 enthält der Bereich Audits vier neue Audits:

  • Bilder als WebP bereitstellen
  • Verwenden Sie Bilder mit einem geeigneten Seitenverhältnis.
  • Vermeiden Sie Frontend-JavaScript-Bibliotheken mit bekannten Sicherheitslücken.
  • Es wurden Browserfehler in der Konsole protokolliert.

Hier erfahren Sie, wie Sie Lighthouse in den Chrome-Entwicklertools ausführen. Dort wird auch beschrieben, wie Sie das Audits-Panel verwenden, um die Qualität Ihrer Seiten zu verbessern.

Weitere Informationen zum Projekt, das das Bereich „Prüfungen“ unterstützt, finden Sie unter Lighthouse.

Push-Benachrichtigungen mit benutzerdefinierten Daten simulieren

Das Simulieren von Push-Benachrichtigungen ist in den Entwicklertools schon seit einiger Zeit möglich, allerdings mit einer Einschränkung: Sie konnten keine benutzerdefinierten Daten senden. Mit dem neuen Textfeld Push, das in Chrome 63 im Bereich Service Worker verfügbar ist, ist das jetzt möglich. Jetzt ausprobieren:

  1. Rufen Sie die Simple Push Demo auf.
  2. Klicken Sie auf Push-Benachrichtigungen aktivieren.
  3. Klicken Sie auf Zulassen, wenn Sie in Chrome aufgefordert werden, Benachrichtigungen zuzulassen.
  4. Öffnen Sie die Entwicklertools.
  5. Rufen Sie den Bereich Service Workers auf.

  6. Geben Sie etwas in das Textfeld Push ein.

    Push-Benachrichtigung mit benutzerdefinierten Daten simulieren

    Abbildung 1. Push-Benachrichtigung mit benutzerdefinierten Daten über das Textfeld Push im Bereich Service Worker simulieren

  7. Klicken Sie auf Push, um die Benachrichtigung zu senden.

    Die simulierte Push-Benachrichtigung

    Abbildung 2. Die simulierte Push-Benachrichtigung

Hintergrundsynchronisierungsereignisse mit benutzerdefinierten Tags auslösen

Das Auslösen von Hintergrundsynchronisierungsereignissen ist schon seit einiger Zeit im Bereich Service Workers möglich. Jetzt können Sie auch benutzerdefinierte Tags senden:

  1. Öffnen Sie die Entwicklertools.
  2. Rufen Sie den Bereich Service Workers auf.
  3. Geben Sie Text in das Textfeld Synchronisieren ein.
  4. Klicken Sie auf Synchronisieren.

Benutzerdefiniertes Hintergrundsynchronisierungsereignis auslösen

Abbildung 3. Nachdem Sie auf Synchronisieren geklickt haben, sendet DevTools ein Hintergrundsynchronisierungsereignis mit dem benutzerdefinierten Tag update-content an den Service Worker.

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.

Neu in den Entwicklertools

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