Andere Effekte anwenden: automatisches dunkles Design aktivieren, Fokus emulieren und mehr

In diesem Artikel zu den Optionen auf dem Tab Rendering finden Sie nützliche Effekte, die Sie auf Ihre Seite anwenden können.

Anzeigen-Frames hervorheben

So prüfen Sie, ob Frames als Anzeigen getaggt sind:

1. Öffnen Sie in dieser Demo den Tab Rendering und aktivieren Sie Anzeigenframes hervorheben.
2. Sehen Sie sich den rot hervorgehobenen Anzeigenrahmen an.

Fokussierte Seite emulieren

Wenn Sie den Fokus von der Seite auf die Entwicklertools verschieben, werden einige Overlay-Elemente automatisch ausgeblendet, wenn sie durch den Fokus ausgelöst werden. beispielsweise Drop-down-Listen, Menüs oder Datumsauswahl. Mit der Option check_box Eine Seite im Fokus emulieren können Sie Fehler an einem solchen Element beheben, als ob es im Fokus wäre.

So emulieren Sie eine fokussierte Seite:

1. Öffnen Sie eine Seite mit dem Element, das Sie debuggen möchten, z. B. die YouTube-Website mit der zugehörigen Suchleiste.

2. Öffnen Sie auf der Seite den Tab Rendering, aktivieren und deaktivieren Sie Eine Seite im Fokus emulieren.

   

Die gleiche Option finden Sie auch in der Aktionsleiste unter der Schaltfläche :hov unter Elemente > Stile.

Lokale Schriftarten deaktivieren

Prüfen Sie, ob die lokalen Alternativen für Schriftarten wie erwartet funktionieren. Deaktivieren Sie dazu local()-Quellen in @font-face-Regeln.

Oft verwenden Entwickler und Designer während 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:

• Fehler beim Laden von Webschriftarten beheben und deren Leistung optimieren und Fehler beheben
• Richtigkeit Ihrer @font-face-Regeln für Preisvergleichsportale prüfen
• Unterschiede zwischen Webschriftarten und ihren lokalen Versionen erkennen

Fehlende local()-Quellen in @font-face Regeln emulieren:

1. Prüfen Sie den Satz oben, öffnen Sie Elemente > Computed, scrollen Sie ganz nach unten und sehen Sie unter Gerenderte Schriftarten, dass Chrome Courier New in lokalen Dateien gefunden hat.

   

2. Öffnen Sie den Tab Rendering, aktivieren Sie Lokale Schriftarten deaktivieren und refresh aktualisieren Sie die Seite.

3. Sehen Sie sich den im Web gefundenen Satz in Roboto an.

   

Automatischen dunklen Modus aktivieren

Sehen Sie sich an, wie Ihre Website im dunklen Modus aussehen könnte, auch wenn Sie ihn nicht implementiert haben.

Mit Chrome 96 wurde ein Ursprungstest für das automatische dunkle Design auf Android eingeführt. Mit dieser Funktion wendet der Browser ein automatisch generiertes dunkles Design auf helle Websites an, wenn der Nutzer im Betriebssystem das dunkle Design aktiviert hat.

So aktivieren Sie den automatischen dunklen Modus:

1. Öffnen Sie auf dieser Seite den Tab Rendering und aktivieren Sie Automatischen dunklen Modus aktivieren.
2. Sieh dir diese Seite im dunklen Modus an.

Sehschwächen emulieren

Jeder sollte auf das Web zugreifen und es nutzen können. Google möchte dies Wirklichkeit werden lassen.

Mit den Chrome-Entwicklertools können Sie sehen, wie Personen mit Sehschwächen Ihre Website sehen, und Ihre Website entsprechend optimieren. Weitere Informationen finden Sie unter Simulieren von Farbblindheitsschwächen.

So emulieren Sie Sehschwächen:

1. Öffnen Sie den Tab Rendering.

2. Wählen Sie unter Sehschwächen simulieren 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; Verwirrung von Grün-, Rot- und Gelbtönen.
   • Tritanopie (kein Blau). Geringe Wahrnehmung von Blau; Verwirrung von Grün und Blau.
   • Achromatopsie (keine Farbe). Teilweise oder vollständiges Fehlen von Farbwahrnehmung.

AVIF- und WebP-Bildformate deaktivieren

Diese Emulationen erleichtern es Entwicklern, verschiedene Szenarien beim Laden von Bildern zu testen, ohne den Browser wechseln zu müssen.

Angenommen, Sie verfügen über den folgenden HTML-Code, um ein Bild in den Formaten AVIF und WebP für neuere Browser bereitzustellen – mit einem PNG-Bild als Ersatz für ältere Browser.

<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 auf einer Seite (oder WebP-Bilder ähnlich):

1. Öffnen Sie den Tab Rendering und aktivieren Sie AVIF-Bildformat deaktivieren.
2. refresh Aktualisieren Sie die Seite und bewegen Sie den Mauszeiger auf img src. Die aktuelle Bildquelle (currentSrc) ist jetzt das WebP-Fallback-Bild.

Ebenso können Sie WebP-Bilder deaktivieren.