Neuerungen in den Entwicklertools (Chrome 63)

Kayce Basques

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

Weitere Informationen findest du im Folgenden oder im Video unten.

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

Wenn Sie schon einmal versucht haben, eine App in einer IDE wie VS Code oder WebStorm zu debuggen, haben Sie wahrscheinlich festgestellt, dass das Öffnen der DevTools die Debug-Sitzung stört. Außerdem war es aufgrund dieses Problems nicht möglich, WebDriver-Tests mit DevTools zu debuggen.

Ab Chrome 63 unterstützen die DevTools standardmäßig mehrere Remote-Debugging-Clients. Eine Konfiguration ist nicht erforderlich.

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

  • Protokoll-Clients wie ChromeDriver oder die Chrome-Debugging-Erweiterungen für VS Code und Webstorm sowie WebSocket-Clients wie Puppeteer können jetzt gleichzeitig mit den DevTools ausgeführt werden.
  • Zwei separate WebSocket-Protokoll-Clients wie Puppeteer oder chrome-remote-interface können sich jetzt gleichzeitig mit demselben Tab verbinden.
  • Chrome-Erweiterungen, die die chrome.debugger API verwenden, können jetzt gleichzeitig mit den DevTools ausgeführt werden.
  • Mehrere verschiedene Chrome-Erweiterungen können die chrome.debugger API jetzt gleichzeitig auf demselben Tab verwenden.

Workspaces 2.0

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

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

Im Teil „Authoring“ (etwa bei 14:28) des DevTools-Vortrags von der CDS 2016 sehen Sie Workspaces 2.0 in Aktion.

Vier neue Audits

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

  • Bilder als WebP bereitstellen
  • Verwenden Sie Bilder mit dem richtigen Seitenverhältnis.
  • Vermeiden Sie Frontend-JavaScript-Bibliotheken mit bekannten Sicherheitslücken.
  • Browserfehler, die in der Console protokolliert wurden

Im Hilfeartikel Lighthouse in den Chrome-Entwicklertools ausführen erfahren Sie, wie Sie mit dem Bereich Audits die Qualität Ihrer Seiten verbessern können.

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

Push-Benachrichtigungen mit benutzerdefinierten Daten simulieren

Die Simulation von Push-Benachrichtigungen ist schon länger in den DevTools verfügbar, allerdings mit einer Einschränkung: Es konnten keine benutzerdefinierten Daten gesendet werden. Mit dem neuen Textfeld Push im Bereich Dienstworker in Chrome 63 ist das jetzt möglich. Jetzt ausprobieren:

  1. Rufen Sie die Demo für einfache Push-Benachrichtigungen 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 Dienstworker auf.

  6. Gib 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 Dienst-Worker simulieren

  7. Klicke 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 Dienstworker möglich. Jetzt können Sie auch benutzerdefinierte Tags senden:

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

Benutzerdefiniertes Ereignis für die Hintergrundsynchronisierung 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 als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.