Neuerungen in den Entwicklertools (Chrome 75)

Kayce Basques

Hallo, Das ist neu bei den Chrome-Entwicklertools in Chrome 75.

Videoversion dieser Seite

Aussagekräftige voreingestellte Werte beim automatischen Vervollständigen von CSS-Funktionen

Einige CSS-Attribute wie filter verwenden Funktionen für Werte. Mit filter: blur(1px) wird einem Knoten beispielsweise eine 1-Pixel-Weichzeichnung hinzugefügt. Bei der automatischen Vervollständigung von Attributen wie filter wird in den Entwicklertools nun ein aussagekräftiger Wert für das Attribut eingefügt. So können Sie in einer Vorschau sehen, welche Art von Änderung der Wert auf dem Knoten vorgenommen wird.

Das alte Verhalten der automatischen Vervollständigung.

Abbildung 1. Das alte Verhalten der automatischen Vervollständigung. Die Entwicklertools werden automatisch für filter: blur kompiliert und es sind keine Änderungen im Darstellungsbereich sichtbar.

Das neue Verhalten der automatischen Vervollständigung.

Abbildung 2. Das neue Verhalten der automatischen Vervollständigung. In den Entwicklertools wird eine automatische Vervollständigung für filter: blur(1px) ausgeführt. Die Änderung ist im Darstellungsbereich sichtbar.

Relevantes Chromium-Problem: #931145

Websitedaten über das Befehlsmenü löschen

Drücken Sie Strg + Umschalttaste + P oder Befehlstaste + Umschalt + P (Mac), um das Befehlsmenü zu öffnen. Führen Sie dann den Befehl Websitedaten löschen aus, um alle Daten zu der Seite zu löschen, einschließlich Dienst-Worker, localStorage, sessionStorage, IndexedDB, Anwendungs-Cache, Web SQL-Cache, Web SQL-Cache und Web SQL-Cache.

Der Befehl „Websitedaten löschen“.

Abbildung 3. Den Befehl Websitedaten löschen.

Das Löschen von Websitedaten war eine Weile über Anwendung > Speicherinhalt löschen möglich. Die neue Funktion in Chrome 75 besteht darin, den Befehl über das Befehlsmenü auszuführen.

Wenn Sie nicht alle Websitedaten löschen möchten, können Sie unter Anwendung > Speicherinhalt löschen festlegen, welche Daten gelöscht werden.

Tab „Anwendung“ mit Auswahl von „Speicherinhalt löschen“

Abbildung 4. Anwendung > Speicherinhalt löschen.

Relevantes Chromium-Problem: #942503

Alle IndexedDB-Datenbanken ansehen

Bisher konnten Sie über Anwendung > IndexedDB nur IndexedDB-Datenbanken vom Hauptursprung aus prüfen. Wenn Ihre Seite beispielsweise eine <iframe> enthält und diese <iframe> IndexedDB verwendet, können Sie die zugehörigen Datenbanken nicht sehen. Ab Chrome 75 werden in den Entwicklertools IndexedDB-Datenbanken für alle Ursprünge angezeigt.

Das alte Verhalten. Auf der Seite ist eine Demo eingebettet, die IndexedDB verwendet, aber es sind keine Datenbanken sichtbar.

Abbildung 5. Das alte Verhalten. Auf der Seite ist eine Demo eingebettet, die IndexedDB verwendet, aber es sind keine Datenbanken sichtbar.

Das neue Verhalten. Die Datenbanken der Demo sind sichtbar.

Abbildung 6. Das neue Verhalten. Die Datenbanken der Demo sind sichtbar.

Relevantes Chromium-Problem: #943770

Unkomprimierte Größe einer Ressource ansehen, wenn der Mauszeiger darauf bewegt wird

Angenommen, Sie prüfen die Netzwerkaktivität. Ihre Website verwendet die Textkomprimierung, um die Übertragungsgröße von Ressourcen zu reduzieren. Sie möchten sehen, wie groß die Ressourcen einer Seite sind, nachdem sie vom Browser dekomprimiert wurden. Bisher waren diese Informationen nur bei großen Anfragezeilen verfügbar. Jetzt können Sie auf diese Informationen zugreifen, indem Sie den Mauszeiger auf die Spalte Größe bewegen.

Bewegen Sie den Mauszeiger auf die Spalte „Größe“, um die unkomprimierte Größe einer Ressource anzusehen.

Abbildung 7. Bewegen Sie den Mauszeiger auf die Spalte „Größe“, um die unkomprimierte Größe einer Ressource anzusehen.

Relevantes Chromium-Problem: #805429

Haltepunkte im Haltepunktbereich inline anzeigen

Angenommen, Sie fügen der folgenden Codezeile einen Haltepunkt für eine Codezeile hinzu:

document.querySelector('#dante').addEventListener('click', logWarning);

In den Entwicklertools können Sie seit einiger Zeit festlegen, wann genau an einem Haltepunkt wie diesem pausiert werden soll: am Anfang der Zeile, bevor document.querySelector('#dante') oder addEventListener('click', logWarning) aufgerufen wird. Wenn Sie alle drei aktivieren, erstellen Sie im Grunde drei Haltepunkte. Bisher konnten Sie diese drei Haltepunkte im Bereich Haltepunkte nicht einzeln verwalten. Ab Chrome 75 hat jeder Inline-Haltepunkt einen eigenen Eintrag im Bereich Haltepunkte.

Das alte Verhalten. Es gibt nur einen Eintrag im Bereich &quot;Breakpoints&quot;.

Abbildung 8. Das alte Verhalten. Im Bereich Haltepunkte gibt es nur einen Eintrag.

Das neue Verhalten. Der Bereich &quot;Breakpoints&quot; enthält drei Einträge.

Abbildung 9. Das neue Verhalten. Der Bereich Haltepunkte enthält drei Einträge.

Relevantes Chromium-Problem: #927961

Anzahl der indexierten DB- und Cache-Ressourcen

Die Bereiche IndexedDB und Cache geben jetzt die Gesamtzahl der Ressourcen in einer Datenbank oder einem Cache an.

Gesamtzahl der Einträge in einer IndexedDB-Datenbank.

Abbildung 10. Gesamtzahl der Einträge in einer IndexedDB-Datenbank.

Relevante Chromium-Probleme: #941197, #930773, #930865

Einstellung zum Deaktivieren der detaillierten Kurzinfo zur Prüfung

In Chrome 73 wurden detaillierte Kurzinfos im Prüfmodus eingeführt.

Eine detaillierte Kurzinfo.

Abbildung 11. Eine detaillierte Kurzinfo mit Farbe, Schriftart, Rand und Kontrast.

Sie können diese detaillierten Kurzinfos jetzt unter Einstellungen > Einstellungen > Elemente > Detaillierte Kurzinfo zur Prüfung anzeigen deaktivieren.

Eine kurze Kurzinfo.

Abbildung 12. Eine minimale Kurzinfo, die nur Breite und Höhe enthält.

Relevantes Chromium-Problem: #948417

Einstellung zum Ein- und Ausblenden des Tabs im Editor des Bereichs „Quellen“

Die Tests zur Barrierefreiheit ergaben, dass es im Editor einen Tab-Trap gibt. Nachdem ein Tastaturnutzer den Editor aufgerufen hatte, konnte er nicht mehr mit der Tabulatortaste wechseln, da zum Einrücken die Tabulatortaste verwendet wurde. Wenn Sie das Standardverhalten überschreiben und den Fokus mit der Tabulatortaste verschieben möchten, aktivieren Sie Einstellungen > Einstellungen > Quellen > Fokus für Tabverschiebungen aktivieren.

In letzter Zeit wurde hart daran gearbeitet, die Benutzeroberfläche der Entwicklertools selbst nutzerfreundlicher zu gestalten. Weitere Informationen finden Sie unter Chrome-Entwicklertools mit Hilfstechnologien verwenden.

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