Stosuj inne efekty: włącz automatyczny ciemny motyw, emuluj ostrość i korzystaj z innych funkcji

Sofia Emelianova

Poznaj przydatne efekty, które możesz zastosować na stronie, dzięki opcjom na karcie Wyświetlanie.

Podświetlanie ramek reklamy

Aby sprawdzić, czy ramki są otagowane jako reklamy:

1. Otwórz kartę Renderowanie w tej demo i zaznacz Wyróżnij ramki reklam.
2. Zwróć uwagę na ramkę reklamy podświetloną na czerwono.

Emuluj zaznaczoną stronę

Gdy przełączysz zaznaczenie ze strony na Narzędzia deweloperskie, niektóre nakładane elementy zostaną automatycznie ukryte, jeśli zostaną aktywowane przez zaznaczenie. Na przykład listy rozwijane, menu lub selektory dat. Opcja check_box Emuluj zaznaczoną stronę umożliwia debugowanie takiego elementu tak, jakby był zaznaczony.

Uwaga: gdy ta opcja jest włączona, document.visibilityState ma wartość visible, a zdarzenie visibilitychange nie będzie się uruchamiać. Więcej informacji znajdziesz na stronie Page Visibility API.

Aby emulować zaznaczoną stronę:

1. Otwórz stronę z elementem, który chcesz debugować, np. witrynę YouTube z paskiem wyszukiwania.

2. Na stronie otwórz kartę Rendering (Renderowanie), a potem zaznacz i odznacz opcję Emulation a selected page (Emuluj zaznaczoną stronę).

   

Tę samą opcję znajdziesz też pod przyciskiem :hov na pasku czynności w sekcji Elementy > Style.

Wyłącz czcionki lokalne

Aby sprawdzić, czy lokalne czcionki alternatywne działają zgodnie z oczekiwaniami, wyłącz w regułach local() źródła @font-face.

Podczas tworzenia programi deweloperzy i projektanci często używają 2 różnych kopii tej samej czcionki:

• lokalną czcionkę dla narzędzi do projektowania,
• Czcionka internetowa w kodzie

Wyłączenie czcionek lokalnych ułatwia:

• Debuguj i mierz wydajność ładowania czcionek internetowych i skuteczność ich optymalizacji
• Sprawdzanie poprawności reguł usługi porównywania cen @font-face
• poznasz różnice między czcionkami internetowymi a ich lokalnymi wersjami.

Jeśli Chrome znajdzie tę czcionkę na urządzeniu, renderuje to zdanie w usłudze Courier New.

Emuluj brakujące źródła local() w @font-face regułach:

1. Sprawdź to zdanie, otwórz Elementy > Obliczenia, przewiń w dół i w sekcji Wyświetlane czcionki sprawdź, czy Chrome znalazł czcionkę Courier New w plikach lokalnych.

   

2. Otwórz kartę Wyświetlanie, zaznacz Wyłącz czcionki lokalne i  odśwież stronę.

3. Zwróć uwagę na zdanie w Roboto znalezione w internecie.

   

Włączanie automatycznego trybu ciemnego

Zobacz, jak Twoja witryna może wyglądać w trybie ciemnym, nawet jeśli nie została przez Ciebie wdrożona.

W Chrome 96 wprowadziliśmy testowanie origin automatycznego ciemnego motywu na Androidzie. Dzięki tej funkcji przeglądarka stosuje automatycznie wygenerowany ciemny motyw na stronach z jasnym motywem, jeśli użytkownik włączył ciemny motyw w systemie operacyjnym.

Aby włączyć automatyczny tryb ciemny:

1. Na tej stronie otwórz kartę Wyświetlanie i zaznacz pole Włącz automatyczny tryb ciemny.
2. Obserwuj tę stronę w trybie ciemnym.

Ważne: gdy włączysz automatyczny ciemny motyw, opcja Naśladowanie funkcji multimediów w CSS prefers-color-scheme jest wyłączona i automatycznie ustawiona na prefers-color-scheme: dark.

Emulacja ślepoty barw

Każdy powinien mieć dostęp do internetu i móc z niego korzystać. Google dokłada wszelkich starań, aby te regulacje urzeczywistnić.

Za pomocą Narzędzi deweloperskich w Chrome możesz sprawdzić, jak Twoją witrynę widzą osoby z niepełnosprawnością wzroku, aby móc ją dla nich ulepszyć. Więcej informacji znajdziesz w artykule Symulacja zaburzeń rozpoznawania barw.

Aby emulować ślepotę barw:

1. Otwórz kartę Wyświetlanie.

2. W sekcji Emuluj wady wzroku wybierz z listy jedną z tych opcji:

   • Brak emulacji.
   • Niewyraźne widzenie.
   • Zmniejszony kontrast.
   • Protanopia (bez czerwonego). Słaba percepcja czerwieni; mylenie kolorów zielonego, czerwonego i żółtego.
   • Deuteranopia (bez zielonego). Słabe postrzeganie zieleni; dezorientacji zieleni, czerwieni i żółci.
   • Tritanopia (bez niebieskiego). Słaba percepcja koloru niebieskiego; mylenie kolorów zielonego i niebieskiego.
   • Achromatopsja (bez koloru) częściowa lub całkowita utrata widzenia barw.

Wyłączanie formatów obrazów AVIF i WebP

Dzięki emulacji deweloperzy mogą łatwiej testować różne scenariusze wczytywania obrazów bez konieczności przełączania przeglądarek.

Załóżmy, że masz kod HTML poniżej służący do wyświetlania obrazu w formatach AVIF i WebP w nowszych przeglądarkach oraz obrazu zapasowego PNG w starszych.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Aby wyłączyć wszystkie obrazy AVIF na stronie (lub podobnie, obrazy WebP):

1. Otwórz kartę Renderowanie i zaznacz Wyłącz format obrazu AVIF.
2. Odśwież stronę i najedź kursorem na img src Aktualne źródło obrazu (currentSrc) jest teraz obrazem WebP.

W podobny sposób możesz wyłączyć obrazy WebP.

Ważne: te opcje automatycznie wyłączają buforowanie obrazów.