In dieser Referenz zu den Optionen auf dem Tab Rendering finden Sie nützliche Effekte, die Sie auf Ihre Seite anwenden können.
Anzeigen-Frames hervorheben
So überprüfen Sie, ob Frames als Anzeigen getaggt sind:
- Öffnen Sie in dieser demo den Tab Rendering und aktivieren Sie Anzeigenframes hervorheben.
- Sehen Sie sich den rot hervorgehobenen Anzeigen-Frame an.
Fokussierte Seite emulieren
Wenn Sie den Fokus von der Seite auf die Entwicklertools legen, werden einige Overlay-Elemente automatisch ausgeblendet, wenn sie durch den Fokus ausgelöst werden. z. B. Drop-down-Listen, Menüs oder Datumsauswahl. Mit der Option Eine Seite im Fokus emulieren können Sie Fehler an einem solchen Element beheben, als wäre es im Fokus.
So emulieren Sie eine fokussierte Seite:
- Öffne eine Seite mit dem Element, das du debuggen möchtest, z. B. die YouTube-Website mit der Suchleiste.
Öffnen Sie auf der Seite den Tab Rendering und aktivieren und deaktivieren Sie die Option Fokussierte Seite emulieren.
Sie finden diese Option auch unter der Schaltfläche :hov in der Aktionsleiste unter Elemente > Stile.
Lokale Schriftarten deaktivieren
Prüfen Sie, ob die lokalen Schriftarten wie erwartet funktionieren, indem Sie local()-Quellen in @font-face-Regeln deaktivieren.
Häufig verwenden Entwickler und Designer bei der Entwicklung zwei verschiedene Kopien derselben Schriftart:
- Eine lokale Schriftart für Ihre Designtools und
- Eine Webschriftart für Ihren Code
Das Deaktivieren lokaler Schriftarten erleichtert Ihnen Folgendes:
- Ladeleistung und Optimierung von Webschriftarten debuggen und messen
- Korrektheit Ihrer CSS-
@font-face-Regeln prüfen - Unterschiede zwischen Webschriftarten und ihren lokalen Versionen
Fehlende local()-Quellen in @font-face-Regeln emulieren:
Prüfen Sie den obigen Satz, öffnen Sie Elemente > Berechnet, scrollen Sie ganz nach unten und sehen Sie unter Gerenderte Schriftarten, dass Chrome Courier New in lokalen Dateien gefunden hat.
Öffnen Sie den Tab Rendering, setzen Sie ein Häkchen bei Lokale Schriftarten deaktivieren und aktualisieren Sie die Seite.
Sehen Sie sich den Satz in Roboto an, den Sie im Web gefunden haben.
Automatischen dunklen Modus aktivieren
Sehen Sie sich an, wie Ihre Website im dunklen Modus aussehen könnte, auch wenn Sie sie nicht implementiert haben.
In Chrome 96 wurde ein Ursprungstest für das automatische dunkle Design auf Android eingeführt. Mit dieser Funktion wendet der Browser auf Websites mit hellem Design ein automatisch generiertes dunkles Design an, wenn der Nutzer das dunkle Design aktiviert hat.
So aktivieren Sie den automatischen dunklen Modus:
- Öffnen Sie auf dieser Seite den Tab Rendering und klicken Sie auf das Kästchen Automatischen dunklen Modus aktivieren.
- Sehen Sie sich diese Seite im dunklen Modus an.
Sehschwächen emulieren
Jeder sollte auf das Web zugreifen und es nutzen können. Google setzt sich dafür ein, dies zu ermöglichen.
Mit den Chrome-Entwicklertools können Sie sehen, wie Menschen mit Sehbeeinträchtigungen Ihre Website sehen, und sie entsprechend optimieren. Weitere Informationen finden Sie unter Mangel bei Farbblindheit simulieren.
So emulieren Sie Sehschwächen:
- Öffnen Sie den Tab Rendering.
Wählen Sie unter Sehschwäche emulieren eine der folgenden Optionen aus der Drop-down-Liste aus:
- Keine Emulation.
- Verschwommenes Sehen
- Reduzierter Kontrast
- Protanopie (kein Rot). Geringe Wahrnehmung von Rot: Verwirrung von Grün-, Rot- und Gelbtönen.
- Deuteranopie (kein Grün) Geringe Wahrnehmung von Grün; Verwechslung von Grün, Rot und Gelb.
- Tritanopie (kein Blau). Schlechte Wahrnehmung von Blau; Verwechslung von Grün und Blau
- Achromatopsie (keine Farbe) Teilweise oder vollständige Abwesenheit von Farbenblindheit.
AVIF- und WebP-Bildformate deaktivieren
Diese Emulationen erleichtern es Entwicklern, verschiedene Szenarien für das Laden von Bildern zu testen, ohne den Browser wechseln zu müssen.
Angenommen, Sie haben den folgenden HTML-Code, um ein Bild im AVIF- und WebP-Format für neuere Browser und ein Fallback-PNG-Bild für ältere Browser bereitzustellen.
<picture>
<source srcset="test.avif" type="image/avif">
<source srcset="test.webp" type="image/webp">
<img src="test.png" alt="A test image">
</picture>
So deaktivieren Sie alle AVIF-Bilder (oder WebP-Bilder) auf einer Seite:
- Öffnen Sie den Tab Rendering und setzen Sie ein Häkchen bei AVIF-Bildformat deaktivieren.
- Aktualisieren Sie die Seite und bewegen Sie den Mauszeiger auf
img src. Das aktuelle Bild-Src (currentSrc) ist jetzt das WebP-Fallback-Bild.
Ebenso können Sie WebP-Bilder deaktivieren.