Czujniki: emuluj czujniki urządzenia

Kayce Basques

Sofia Emelianova

Użyj panelu Czujniki, aby emulować dane wejściowe czujnika na dowolnym urządzeniu.

Przegląd

Panel Czujniki umożliwia:

• Zastąp geolokalizację.
• Symuluj orientację.
• Force Touch.
• Emuluj stan nieaktywnego detektora.

Otwórz panel Sensory

1. Aby otworzyć menu poleceń, w zależności od systemu operacyjnego naciśnij:

   • w systemie macOS: Command + Shift + P.
   • W systemie Windows, Linux lub ChromeOS: Control + Shift + P.

   

2. Wpisz sensors, wybierz Pokaż czujniki i naciśnij Enter. U dołu okna Narzędzia deweloperskie otworzy się panel Czujniki.

Zastępowanie geolokalizacji

Wiele witryn korzysta z lokalizacji użytkownika, aby zapewnić mu lepsze wrażenia. Na przykład strona pogodowa może wyświetlać prognozę lokalną dla obszaru użytkownika, gdy ten zezwoli witrynie na dostęp do swojej lokalizacji.

Jeśli tworzysz interfejs, który zmienia się w zależności od lokalizacji użytkownika, prawdopodobnie chcesz się upewnić, że witryna działa prawidłowo w różnych miejscach na świecie.

Aby zastąpić geolokalizację, otwórz panel Czujniki i na liście Geolokalizacja wybierz jedną z tych opcji:

• Jedno z wstępnie ustawionych miast, np. Tokio.
• Niestandardowa lokalizacja, aby wpisać niestandardowe współrzędne długości i szerokości geograficznej.
• Wybierz Lokalizacja niedostępna, aby sprawdzić, jak działa Twoja witryna, gdy lokalizacja użytkownika jest niedostępna.

Symulowanie orientacji urządzenia

Aby symulować różne orientacje urządzenia, otwórz panel Czujniki i na liście Orientacja wybierz jedną z tych opcji:

• Jeden z gotowych kierunków, np. Pionowo – do góry nogami.
• Orientacja niestandardowa – możesz podać własną orientację.

Po wybraniu opcji Orientacja niestandardowa pola alfa, beta i gamma są włączone. Aby dowiedzieć się, jak działają te osie, zapoznaj się z artykułami Alpha, Beta i Gamma.

Możesz też ustawić niestandardową orientację, przeciągając Model orientacji. Aby obrócić obiekt wzdłuż osi alpha, przed przeciągnięciem przytrzymaj klawisz Shift.

Wymuś dotknięcie

Aby przetestować zdarzenia dotykowe na stronie internetowej, możesz wymusić dotyk zamiast kliknięcia, nawet jeśli testujesz na urządzeniu bez ekranu dotykowego.

Aby wywołać zdarzenia dotykowe za pomocą wskaźnika:

1. Otwórz panel Czujniki.
2. Na liście Dotknij wybierz Dotknij mocno.
3. W prośbie u góry kliknij Odśwież Narzędzia deweloperskie.

Emulowanie stanu nieaktywnego detektora

Interfejs API wykrywania nieaktywności umożliwia wykrywanie nieaktywnych użytkowników i reagowanie na zmiany stanu nieaktywności. Za pomocą DevTools możesz emulować zmiany stanu nieaktywności zarówno stanu użytkownika, jak i stanu ekranu, zamiast czekać na zmianę rzeczywistego stanu nieaktywności.

Aby emulować stany bezczynności:

1. Otwórz panel Czujniki. Na potrzeby tego samouczka możesz wypróbować tę funkcję na stronie demonstracyjnej.

2. Zaznacz pole wyboru obok opcji Ephemeral i w wyświetlonym promptzie przyznaj stronie demonstracyjnej uprawnienie do wykrywania bezczynności. Następnie odśwież stronę.

   

3. W menu Emuluj stan nieaktywnego detektora wybierz jedną z tych opcji:

   • Brak emulacji nieaktywności
   • Użytkownik aktywny, ekran odblokowany
   • Użytkownik aktywny, ekran zablokowany
   • Użytkownik bezczynny, ekran odblokowany
   • Użytkownik bezczynny, ekran zablokowany

W tym przykładzie DevTools emuluje stan użytkownika w stanie bezczynności, z zablokowanym ekranem. W tym przypadku strona demonstracyjna rozpoczyna 10-sekundowe odliczanie, aby wyczyścić płótno.

Emulowanie równoczesności sprzętu

Aby emulować działanie witryny na urządzeniach z różną liczbą rdzeni procesora, możesz zastąpić wartość zwróconą przez właściwość navigator.hardwareConcurrency. Niektóre aplikacje używają tej właściwości do kontrolowania stopnia równoległości aplikacji, na przykład do kontrolowania rozmiaru puli Emscriptenpthread.

Aby emulować równoczesność sprzętową:

1. Otwórz panel Czujniki.
2. U dołu panelu znajdź i włącz check_box Zgodność z sprzętem.
3. W polu z liczbą wpisz liczbę rdzeni, które chcesz emulować.

Aby przywrócić wartość domyślną, kliknij przycisk Cofnij Resetuj.

Emulacja obciążenia procesora

Ciśnienie procesora lub obciążenie obliczeniowe to zestaw zgłaszanych stanów, które dają Ci wyobrażenie o tym, jak duży jest strumień danych, który jest przetwarzany przez system, oraz czy zbliża się on do limitu. Te informacje umożliwiają dostosowanie aplikacji działającej w czasie rzeczywistym, np. do wideokonferencji lub gry wideo, tak aby wykorzystać całą dostępną moc obliczeniową, a jednocześnie zachować responsywność systemu przez dostosowanie obciążenia w czasie rzeczywistym.

Panel Czujniki umożliwia emulowanie stanów, które mogą być zgłaszane przez interfejs Compute Pressure API.

Aby emulować obciążenie procesora w witrynie:

1. Otwórz panel Czujniki.
2. U dołu panelu odszukaj sekcję Ciśnienie na procesor i wybierz jeden z czytelnych dla człowieka stanów ciśnienia: Brak zastąpienia, Nominalne, Dobre, Poważne lub Krytyczne.
3. W prośbie u góry Narzędzi deweloperskich kliknij Odśwież Narzędzia deweloperskie.