Neuerungen in den Entwicklertools (Chrome 77)

Stile des Elements kopieren

Klicken Sie mit der rechten Maustaste auf einen Knoten in der DOM-Struktur, um die CSS dieses DOM-Knotens in die Zwischenablage zu kopieren.

Stile kopieren.

Abbildung 1: Elementstile kopieren.

Vielen Dank an Adam Argyle und VisBug für die Inspiration.

Layoutverschiebungen visualisieren

Angenommen, Sie lesen einen Nachrichtenartikel auf Ihrer Lieblingswebsite. Beim Lesen der Seite verlieren Sie den Überblick, weil der Inhalt ruckelt. Dieses Problem wird als Layoutverschiebung bezeichnet. Dies geschieht normalerweise, wenn Bilder und Anzeigen fertig geladen sind. Auf der Seite ist kein Platz für Bilder und Anzeigen reserviert. Daher muss der Browser alle anderen Inhalte nach unten verschieben, um Platz zu schaffen. Die Lösung ist die Verwendung von placeholders.

Mit den Entwicklertools können Sie jetzt Layoutverschiebungen erkennen:

  1. Öffnen Sie das Befehlstaste-Menü.
  2. Beginnen Sie mit der Eingabe von Rendering.
  3. Führen Sie den Befehl Darstellung anzeigen aus.
  4. Klicken Sie das Kästchen Layout Shift Regions an. Wenn Sie mit einer Seite interagieren, werden Layout Shifts blau hervorgehoben.

Ein Layout Shift

Abbildung 2: Ein Layout Shift

Chromium-Problem #961846

Lighthouse 5.1 im Bereich „Audits“

Im Bereich „Audits“ wird jetzt Lighthouse 5.1 ausgeführt. Neue Prüfungen umfassen Folgendes:

Die neue Benutzeroberfläche des Audits-Bereichs.

Abbildung 3: Die neue Benutzeroberfläche des Audits-Bereichs.

Die Node- und Befehlszeilenversionen von Lighthouse 5.1 haben drei neue Hauptfunktionen, die Sie sich ansehen sollten:

  • Leistungsbudgets: Verhindern Sie, dass Ihre Website im Laufe der Zeit zurückgeht, indem Sie die Anzahl der Anfragen und Dateigrößen angeben, die von den Seiten nicht überschritten werden sollen.
  • Plug-ins: Sie können Lighthouse mit eigenen benutzerdefinierten Prüfungen erweitern.
  • Stack Packs Fügen Sie Prüfungen hinzu, die auf bestimmte Technology Stacks zugeschnitten sind. Das WordPress Stack Pack wurde zuerst versandt. React- und AMP-Stack Packs befinden sich noch in der Entwicklung.

Synchronisierung des Betriebssystemdesigns

Wenn Sie das dunkle Design Ihres Betriebssystems verwenden, wechseln die Entwicklertools jetzt automatisch zum eigenen dunklen Design.

Tastenkombination zum Öffnen des Haltepunkt-Editors

Drücken Sie Strg + Alt + B oder Befehlstaste + Wahltaste + B (Mac), wenn der Fokus im Editor des Bereichs "Quellen" liegt, um den Haltepunkt-Editor zu öffnen. Mit dem Breakpoint-Editor können Sie Logpoints und bedingte Haltepunkte erstellen.

Haltepunkt-Editor

Abbildung 4: Haltepunkteditor

Prefetch-Cache im Netzwerkbereich

In der Spalte Größe des Steuerfelds „Netzwerk“ steht jetzt (prefetch cache), wenn eine Ressource aus dem Prefetch-Cache geladen wurde. Prefetch ist eine neue Webplattformfunktion zur Beschleunigung nachfolgender Seitenladevorgänge. Can I use... gibt an, dass sie seit Juli 2019 in 83,33% der globalen Browser unterstützt wird.

Die Spalte „Size“ (Größe) gibt an, dass Ressourcen aus dem Prefetch-Cache stammen.

Abbildung 5: In der Spalte Größe sehen Sie, dass prefetch2.html und prefetch2.css aus (prefetch cache) stammen.

Du kannst die Funktion unter Prefetch-Demo ausprobieren.

Chromium-Problem #935267

Privatgrundstücke beim Betrachten von Objekten

In der Objektvorschau der Console werden jetzt Felder der privaten Klasse angezeigt.

Bei der Untersuchung eines Objekts zeigt die Console jetzt private Felder wie „#color“ an.

Abbildung 6. In der alten Chrome-Version auf der linken Seite wird bei der Objektprüfung das Feld #color nicht angezeigt, in der neuen Version auf der rechten Seite jedoch schon.

Benachrichtigungen und Push-Nachrichten im Anwendungsbereich

Der Abschnitt „Hintergrunddienste“ des Steuerfelds „Anwendung“ unterstützt jetzt Push-Nachrichten und Benachrichtigungen. Push-Nachrichten treten auf, wenn ein Server Informationen an einen Service Worker sendet. Benachrichtigungen werden ausgelöst, wenn ein Service Worker oder ein Seitenskript dem Nutzer Informationen anzeigt.

Wie bei den Funktionen für Hintergrundabruf und Hintergrundsynchronisierung von Chrome 76 werden Push-Nachrichten und Benachrichtigungen auf dieser Seite nach dem Beginn der Aufzeichnung drei Tage lang aufgezeichnet, auch wenn die Seite geschlossen ist und selbst wenn Chrome geschlossen ist.

Die neuen Bereiche „Benachrichtigungen“ und „Push-Nachrichten“

Abbildung 7. Die neuen Push-Nachrichten- und Benachrichtigungsbereiche im Anwendungsbereich.

Chromium-Problem #927726

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