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

Skorzystaj z opcji karty Renderowanie, by odkryć przydatne efekty, które możesz zastosować na swojej stronie.

Podświetl ramki reklamy

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

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

Emuluj zaznaczoną stronę

Po przełączeniu zaznaczenia ze strony na Narzędzia deweloperskie niektóre elementy nakładek zostaną automatycznie ukryte, jeśli zostaną aktywowane po zaznaczeniu. Mogą to być na przykład listy, menu lub selektory daty. Opcja check_box Emuluj zaznaczoną stronę pozwala debugować taki element, jakby był on zaznaczony.

Aby emulować zaznaczoną stronę:

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

2. Na stronie otwórz kartę Renderowanie, a potem zaznacz i wyczyść pole Emuluj zaznaczoną stronę.

   

Tę samą opcję znajdziesz też po kliknięciu przycisku :hov na pasku działań w sekcji Elementy > Style.

Wyłącz czcionki lokalne

Sprawdź, czy lokalne alternatywne czcionki 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ą 2 różnych kopii tej samej czcionki podczas programowania:

• lokalną czcionkę na potrzeby narzędzi do projektowania,
• Czcionka kodu na stronie internetowej

Wyłączenie czcionek lokalnych ułatwia:

• Debuguj i mierz skuteczność czcionek internetowych podczas wczytywania wydajności i optymalizacji
• Sprawdź poprawność reguł CSS @font-face
• Poznaj różnice między czcionkami internetowymi a ich wersjami lokalnymi

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

1. Sprawdź powyższe zdanie, otwórz Elementy > Obliczone, przewiń na sam dół i w sekcji Rendered Fonts (Renderowane czcionki) Chrome znalazł wpis Courier New w plikach lokalnych.

   

2. Otwórz kartę Renderowanie, zaznacz opcję Wyłącz czcionki lokalne i refresh załaduj ponownie stronę.

3. Spójrz na zdanie w języku Roboto znalezione w internecie.

   

Włącz automatyczny tryb ciemny

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

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

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.

Emuluj wady wzroku

Każdy powinien mieć dostęp do internetu i możliwość korzystania z niego. Google dokłada wszelkich starań, aby tak było.

Dzięki Narzędziom deweloperskim w Chrome możesz sprawdzić, jak osoby z wadami wzroku widzą Twoją witrynę, i w ten sposób ulepszyć jej działanie. Więcej informacji znajdziesz w artykule na temat symulowania zaburzeń rozpoznawania barw.

Aby emulować problemy ze wzrokiem:

1. Otwórz kartę Renderowanie.

2. W sekcji Emuluj problemy ze wzrokiem wybierz z listy jedną z tych opcji:

   • Bez emulacji.
   • Niewyraźne widzenie.
   • Zmniejszony kontrast.
   • Protanopia (bez czerwonego). Niski poziom postrzegania koloru czerwonego; pomyłki barw zielonych, czerwonych i żółtych.
   • Deuteranopia (bez zielonego). Niski poziom postrzegania zieleni; pomyłki związane z kolorami zielonymi, czerwonymi i żółtymi.
   • Tritanopia (bez niebieskiego). Niski postrzeganie koloru niebieskiego; dezorientacja zieleni i bluesa.
   • Achromatopsja (bez koloru). Częściowy lub całkowity brak widzenia barw.

Wyłącz formaty obrazów AVIF i WebP

Te emulacje ułatwiają programistom testowanie różnych scenariuszy wczytywania obrazów bez konieczności zmiany przeglądarki.

Załóżmy, że używasz poniższego kodu HTML do wyświetlania obrazu w formatach AVIF i WebP na potrzeby nowszych przeglądarek z zastępczym obrazem PNG przeznaczonym dla 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, podobnie, obrazy WebP):

1. Otwórz kartę Renderowanie i zaznacz opcję Wyłącz format obrazu AVIF.
2. refresh Załaduj ponownie stronę i najedź kursorem na img src. Bieżące źródło obrazu (currentSrc) to teraz zastępczy obraz WebP.

Analogicznie możesz wyłączyć obrazy w formacie WebP.