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, korzystając z opcji na karcie Renderowanie.

Wyróżnianie ramek reklamy

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

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

Emulowanie zaznaczonej strony

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

Aby emulować zaznaczoną stronę:

1. Otwórz stronę z elementem do debugowania, np. stronę YouTube z paskiem wyszukiwania.

2. Na stronie otwórz kartę Renderowanie, a potem zaznacz i usuń zaznaczenie obok opcji Naśladuj stronę w fokusie.

   

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

Aby poznać więcej sposobów blokowania elementu, przeczytaj artykuł Blokowanie ekranu i sprawdzanie znikających elementów.

Wyłączanie czcionek lokalnych

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

Programiści i projektanci często używają na etapie programowania dwóch różnych kopii tej samej czcionki:

• lokalny czcionka dla narzędzi do projektowania;
• czcionka internetowa do kodu;

Wyłączenie czcionek lokalnych ułatwia:

• Debugowanie i pomiar wydajności oraz optymalizacji ładowania czcionek internetowych
• Sprawdzanie poprawności reguł usługi porównywania cen @font-face
• Jakie różnice między czcionkami internetowymi a ich wersjami lokalnymi

Emulowanie brakujących źródeł local() w regułach @font-face:

1. Sprawdź powyższe zdanie, otwórz Elementy > Computed (Wynik), przewiń do końca i w sekcji Rendered Fonts (Czcionki renderowane) znajdź w Chrome znalezione w plikach lokalnych plików Courier New.

   

2. Otwórz kartę Wyświetlanie, zaznacz Wyłącz czcionki lokalne i refresh 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 ona zaimplementowana.

W Chrome 96 wprowadziliśmy wersję próbną origin automatycznego ciemnego motywu na Androida. Dzięki tej funkcji przeglądarka stosuje automatycznie wygenerowany ciemny motyw do witryn o jasnej tematyce, jeśli użytkownik włączył w systemie operacyjnym ciemny motyw.

Aby włączyć automatyczny tryb ciemny:

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

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ć wady wzroku:

1. Otwórz kartę Renderowanie.

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

   • Bez 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ęściowy lub całkowity brak 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 ten kod HTML, który służy do wyświetlania obrazu w formatach AVIF i WebP w przypadku nowszych przeglądarek oraz obrazu PNG w przypadku starszych przeglądarek.

<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 obrazy WebP):

1. Otwórz kartę Renderowanie i zaznacz Wyłącz format obrazu AVIF.
2. refresh 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.