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 für Remote-Debugging für mehrere Clients

Wenn Sie schon einmal versucht haben, das Debugging einer App über eine IDE wie VS Code oder WebStorm zu beheben, wissen Sie wahrscheinlich schon, dass das Öffnen der Entwicklertools Ihre Fehlerbehebungssitzung durcheinanderbringt. Außerdem war es aufgrund dieses Problems unmöglich, mit den Entwicklertools WebDriver-Tests zu debuggen.

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

Das Remote-Debugging über Mehrfachkunden war das häufigste Problem der Entwicklertools auf crbug.com und Nummer 3 im gesamten Chromium-Projekt. Die Unterstützung von Mehrfachkunden bietet auch einige interessante Möglichkeiten, andere Tools in die Entwicklertools zu integrieren oder 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 DevTools ausgeführt werden.
  • Zwei separate WebSocket-Protokoll-Clients 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 verschiedene Chrome-Erweiterungen können jetzt die chrome.debugger API gleichzeitig 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 einige Änderungen an Ihrem Quellcode in den Entwicklertools vor, die in der lokalen Version Ihres Projekts in Ihrem Dateisystem erhalten bleiben.

Workspaces 2.0 baut auf 1.0 auf und bietet eine praktischere UX und eine verbesserte automatische Zuordnung von transpiliertem Code. Die Veröffentlichung dieser Funktion war ursprünglich für kurz nach dem Chrome Developer Summit (CDS) 2016 geplant, das Team hat sie aber verschoben, um einige Probleme zu beheben.

Im Abschnitt "Authoring" (etwa 14:28 Uhr) des DevTools Talk von CDS 2016 erfahren Sie, wie Arbeitsbereiche 2.0 in Aktion aussehen.

Vier neue Prüfungen

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

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

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

Unter Lighthouse finden Sie weitere Informationen zu dem Projekt, das dem Bereich Audits zugrunde liegt.

Push-Benachrichtigungen mit benutzerdefinierten Daten simulieren

Die Simulation von Push-Benachrichtigungen gibt es in den Entwicklertools schon eine Weile, 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 Simple Push Demo.
  2. Klicken Sie auf Push-Benachrichtigungen aktivieren.
  3. Klicken Sie in Chrome auf Zulassen, wenn Sie aufgefordert werden, Benachrichtigungen zuzulassen.
  4. Öffnen Sie die Entwicklertools.
  5. Wechseln Sie zum Bereich Service Workers.
  6. Geben Sie etwas in das Textfeld Senden ein.

    Simulieren einer Push-Benachrichtigung mit benutzerdefinierten Daten.

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

  7. Klicken Sie 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 Synchronisierungsereignissen im Hintergrund befindet sich schon länger im Bereich Service Workers. Jetzt können Sie aber benutzerdefinierte Tags senden:

  1. Öffnen Sie die Entwicklertools.
  2. Wechseln Sie zum Bereich Service Workers.
  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 die Entwicklertools ein Hintergrundsynchronisierungsereignis mit dem benutzerdefinierten Tag update-content an den Service Worker

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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 abgebrochen.

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