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. Beispiel: filter: blur(1px) fügt einem Knoten eine 1-Pixel-Weichzeichnung hinzu. Bei der automatischen Vervollständigung von Eigenschaften wie filter füllt die Entwicklertools jetzt der Eigenschaft einen aussagekräftigen Wert hinzu, sodass Sie in der Vorschau sehen können, welche Art von Änderung der Wert haben wird. auf dem Knoten.

Abbildung 1. Das alte Verhalten der automatischen Vervollständigung. Die Entwicklertools werden automatisch auf filter: blur vervollständigen und keine im Darstellungsbereich sichtbar ist.

Abbildung 2. Das neue Verhalten der automatischen Vervollständigung. Die Entwicklertools werden automatisch für filter: blur(1px) und ist die Änderung 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 und den Befehl Befehl Websitedaten löschen, um alle Daten im Zusammenhang mit der Seite zu löschen, einschließlich der Service Worker, localStorage, sessionStorage, IndexedDB, Web SQL, Cookies, Cache, und Anwendungscache.

Abbildung 3. Den Befehl Websitedaten löschen.

Sie können jetzt unter Anwendung > Websitedaten löschen. Speichere für eine Weile den Speicherinhalt. Das neue ist es in Chrome 75 möglich, den Befehl über das Befehlsmenü auszuführen.

Wenn Sie nicht alle Websitedaten löschen möchten, können Sie festlegen, aus welchen Daten Anwendung > Speicherinhalt löschen.

Abbildung 4. Anwendung > Speicherinhalt löschen

Relevantes Chromium-Problem: #942503

Alle IndexedDB-Datenbanken ansehen

Bisher Anwendung > Mit IndexedDB konnten Sie IndexedDB-Datenbanken nur aus dem Hauptherkunft. Beispiel: Ihre Seite enthält eine <iframe> und diese <iframe> hat IndexedDB können Sie die zugehörigen Datenbanken nicht sehen. Ab Chrome 75 wird in den Entwicklertools IndexedDB angezeigt Datenbanken für alle Ursprünge.

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

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. Für folgende Aktionen wird auf Ihrer Website die Textkomprimierung verwendet. die Übertragungsgröße von Ressourcen reduzieren. Sie möchten sehen, wie groß die Ressourcen der Seite sind, werden sie vom Browser dekomprimiert. Bisher waren diese Informationen nur bei Verwendung von großen Anfragen verfügbar. Zeilen. Sie können jetzt auf diese Informationen zugreifen, indem Sie den Mauszeiger auf die Spalte Größe bewegen.

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);

Schon seit einiger Zeit können Sie in den Entwicklertools festlegen, wann genau bei einem Haltepunkt pausiert werden soll. am Anfang der Zeile, bevor document.querySelector('#dante') aufgerufen wird, oder bevor addEventListener('click', logWarning) aufgerufen wird. Wenn Sie alle drei aktivieren, 3 Haltepunkte werden erstellt. Bisher konnten Sie im Bereich Haltepunkte keine diese 3 Haltepunkte einzeln zu platzieren. Ab Chrome 75 hat jeder Inline-Haltepunkt einen eigenen Eintrag im Bereich Haltepunkte:

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

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

Relevantes Chromium-Problem: #927961

Anzahl von IndexedDB- und Cache-Ressourcen

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

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.

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

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

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. Sobald eine Tastatur Nutzer konnten nicht mit der Tabulatortaste in den Editor wechseln, da die Tabulatortaste für den Einzug verwendet. Wenn Sie das Standardverhalten überschreiben und den Fokus mithilfe der Tabulatortaste verschieben möchten, aktivieren Sie Einstellungen > Einstellungen > Quellen > Fokus auf 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 erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• 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