Neuerungen in den Entwicklertools (Chrome 77)

Stile des Elements kopieren

Klicken Sie mit der rechten Maustaste auf einen Knoten in der DOM-Struktur, um den CSS-Code 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.

Layout Shifts visualisieren

Angenommen, Sie lesen einen Nachrichtenartikel auf Ihrer Lieblingswebsite. Beim Lesen der Seite verlieren Sie ständig den Platz, weil der Inhalt hin und her rutscht. Dieses Problem wird als Layout Shift bezeichnet. Das passiert normalerweise, wenn Bilder und Anzeigen vollständig geladen wurden. Auf der Seite ist kein Platz für Bilder und Anzeigen reserviert, sodass der Browser alle anderen Inhalte nach unten verschieben muss, um Platz für sie zu schaffen. Das Problem lässt sich durch die Verwendung von placeholders lösen.

Mit den Entwicklertools können Sie jetzt Layout Shifts erkennen:

  1. Öffnen Sie das Befehlsmenü.
  2. Beginnen Sie mit der Eingabe von Rendering.
  3. Führen Sie den Befehl Show Rendering (Rendering anzeigen) aus.
  4. Aktivieren Sie das Kästchen Layout Shift Regions. Bei der Interaktion mit einer Seite 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. Zu den neuen Prüfungen gehören:

Die neue Benutzeroberfläche des Audit-Bereichs

Abbildung 3: Die neue Benutzeroberfläche des Audit-Bereichs

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

  • Leistungsbudgets: Wenn Sie die Anzahl der Anfragen und Dateigrößen angeben, die Seiten nicht überschreiten dürfen, können Sie verhindern, dass sich Ihre Website im Laufe der Zeit zurücksetzt.
  • Plug-ins. Erweitern Sie Lighthouse mit Ihren eigenen benutzerdefinierten Audits.
  • Stack Packs Fügen Sie Audits hinzu, die auf bestimmte Technology Stacks zugeschnitten sind. Das WordPress Stack Pack wurde zuerst versandt. React- und AMP-Stackpacks sind in der Entwicklung.

Synchronisierung des Betriebssystemdesigns

Wenn du das dunkle Design deines Betriebssystems verwendest, wechselt die Entwicklertools jetzt automatisch zum eigenen dunklen Design.

Tastenkombination zum Öffnen des Breakpoint-Editors

Drücken Sie Strg + Alt + B oder Befehlstaste + Wahltaste + B (Mac), wenn der Fokus im Editor des Quellenbereichs liegt, um den Breakpoint-Editor zu öffnen. Verwenden Sie den Haltepunkteditor, um Logpoints und bedingte Haltepunkte zu erstellen.

Breakpoint-Editor

Abbildung 4: Haltepunkt-Editor

Prefetch-Cache im Netzwerkbereich

In der Spalte Größe des Steuerfelds „Netzwerk“ wird jetzt (prefetch cache) angezeigt, wenn eine Ressource aus dem Prefetch-Cache geladen wurde. Prefetch ist eine neue Webplattformfunktion, mit der nachfolgende Seitenladevorgänge beschleunigt werden. Can I use... gibt an, dass diese Funktion in 83,33% der Browser weltweit unterstützt wird (Stand Juli 2019).

Die Spalte „Size“, die anzeigt, dass die Ressourcen aus dem Prefetch-Cache stammen.

Abbildung 5: In der Spalte Größe wird angezeigt, dass prefetch2.html und prefetch2.css von (prefetch cache) stammen.

Weitere Informationen finden Sie unter Prefetch-Demo.

Chromium-Problem 935267

Private Properties beim Ansehen von Objekten

In der Konsole werden in der Objektvorschau jetzt Felder für private Klassen angezeigt.

Bei der Untersuchung eines Objekts werden in der Console jetzt private Felder wie „#color“ angezeigt.

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

Benachrichtigungen und Push-Nachrichten im Anwendungsbereich

Der Bereich „Hintergrunddienste“ des Anwendungsbereichs unterstützt jetzt Push-Nachrichten und -Benachrichtigungen. Push-Nachrichten treten auf, wenn ein Server Informationen an einen Service Worker sendet. Benachrichtigungen werden angezeigt, wenn ein Service Worker oder ein Seitenskript dem Nutzer Informationen anzeigt.

Wie bei den Funktionen Hintergrundabruf und Hintergrundsynchronisierung in Chrome 76 werden Push-Nachrichten und Benachrichtigungen auf dieser Seite drei Tage lang aufgezeichnet, sobald Sie mit der Aufzeichnung beginnen. Dies gilt auch dann, wenn die Seite geschlossen und Chrome geschlossen wird.

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

Abbildung 7. Die neuen Bereiche „Push-Nachrichten“ und „Benachrichtigungen“ im Anwendungsbereich

Chromium-Problem 927726

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