Neuerungen in den Entwicklertools (Chrome 63)

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

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 Sie wahrscheinlich festgestellt, dass das Öffnen der Entwicklertools die Fehlerbehebungssitzung durchsetzt. Dieses Problem machte es auch unmöglich, die Entwicklertools zum Debuggen von WebDriver-Tests zu verwenden.

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

Die Fehlerbehebung per Fernzugriff über mehrere Clients war das häufigste Problem in den Entwicklertools auf crbug.com und war die Nummer 3 im gesamten Chromium-Projekt. Die Mehrfachkundenunterstützung bietet auch einige interessante Möglichkeiten, andere Tools in die Entwicklertools zu integrieren oder diese Tools auf neue Arten 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, wie 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 unterschiedliche Chrome-Erweiterungen können jetzt die chrome.debugger API auf demselben Tab gleichzeitig 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 einige Änderungen an Ihrem Quellcode in den Entwicklertools vor. Die Änderungen bleiben in der lokalen Version Ihres Projekts in Ihrem Dateisystem erhalten.

Workspaces 2.0 basiert auf 1.0 und bietet eine hilfreichere Benutzeroberfläche und eine verbesserte automatische Zuordnung von transpiliertem Code. Die Veröffentlichung dieser Funktion war ursprünglich kurz nach dem Chrome Developer Summit (CDS) 2016 geplant. Das Team hat sie jedoch verschoben, um einige Probleme zu beheben.

Sehen Sie sich den Teil „Authoring“ (ca. 14:28 Uhr) des Entwicklertools-Vortrags von CDS 2016 an, um zu sehen, wie Workspaces 2.0 in Aktion aussieht.

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 Qualität Ihrer Seiten verbessern können.

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, mit einer Einschränkung: Sie konnten keine benutzerdefinierten Daten senden. 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.

    Push-Benachrichtigungen mit benutzerdefinierten Daten simulieren

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

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

    Die simulierte Push-Benachrichtigung

    Abbildung 2. Die simulierte Push-Benachrichtigung

Synchronisierungsereignisse im Hintergrund mit benutzerdefinierten Tags auslösen

Das Auslösen von Hintergrundsynchronisierungsereignissen ist seit einiger Zeit auch im Bereich Service Workers möglich, aber jetzt können Sie 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.

Benutzerdefiniertes Synchronisierungsereignis im Hintergrund auslösen

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

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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59