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 Wyświetlanie.

Podświetlanie ramek reklamy

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

1. W tym demo otwórz kartę Renderowanie i zaznacz pole wyboru Wyróżnij klatki z reklamą.
2. Zwróć uwagę na ramkę reklamy zaznaczoną na czerwono.

Emulowanie zaznaczonej strony

Jeśli przełączysz fokus ze strony na Narzędzia deweloperskie, niektóre elementy nakładki zostaną automatycznie ukryte, jeśli są wywoływane przez fokus. 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, który chcesz debugować, na przykład witrynę YouTube z paskiem wyszukiwania.

2. Na stronie otwórz kartę Wyświetlanie, a potem zaznacz i usuń zaznaczenie obok opcji Naśladowanie strony w trybie skupionym.

   

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

Więcej sposobów na zamrożenie elementu znajdziesz w artykule Zatrzymywanie ekranu i sprawdzanie znikających elementów.

Wyłączanie czcionek lokalnych

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:

• 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
• poznasz różnice między czcionkami internetowymi a ich lokalnymi wersjami.

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

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 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 jeszcze zaimplementowana.

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.

Emulacja ślepoty barw

Każdy powinien mieć dostęp do internetu i móc z niego korzystać. Google jest zdecydowane, aby to osiągnąć.

Za pomocą narzędzi deweloperskich w Chrome możesz sprawdzić, jak Twoją witrynę widzą osoby z niepełnosprawnością wzrokową, aby móc ją dla nich ulepszyć. Więcej informacji znajdziesz w artykule Symulowanie niedoboru widzenia barw.

Aby emulować ślepotę barw:

1. Otwórz kartę Wyświetlanie.

2. W sekcji Naśladowanie wad wzroku wybierz jedną z tych opcji na liście:

   • 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łaba percepcja zieleni; mylenie 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 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ę Wyświetlanie i odznacz pole Wyłącz format obrazu AVIF.
2. refresh Załaduj ponownie stronę i najeżdżaj kursorem na img src. Aktualne źródło obrazu (currentSrc) jest teraz obrazem WebP.

Podobnie możesz wyłączyć obrazy WebP.