Użyj panelu Czujniki, aby emulować dane wejściowe czujnika na dowolnym urządzeniu.
Omówienie
W panelu Czujniki możesz:
Otwórz panel Sensory
Aby otworzyć menu poleceń, w zależności od systemu operacyjnego naciśnij:
- W systemie macOS: Command + Shift + P.
- W systemach Windows, Linux i ChromeOS: Control + Shift + P.
Wpisz
sensors, wybierz Pokaż czujniki i naciśnij Enter. U dołu okna Narzędzia dla programistów 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 gotowych miast, np. Tokio;
- Niestandardowa lokalizacja – możesz w niej 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:
- Jedna z wstępnie ustawionych orientacji, np. Pionowo – do góry nogami.
- Orientacja niestandardowa – możesz podać własną orientację.
Po wybraniu opcji Orientacja niestandardowa pola alpha, 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.
Dotyk 3D
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:
- Otwórz panel Czujniki.
- Na liście Dotknij wybierz Dotknij mocno.
- 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:
Otwórz panel Czujniki. Na potrzeby tego samouczka możesz wypróbować tę funkcję na stronie demonstracyjnej.
Zaznacz pole wyboru obok opcji Ephemeral i w wyświetlonym promptzie przyznaj stronie demonstracyjnej uprawnienie do wykrywania bezczynności. Następnie odśwież stronę.
W menu Stan emulacji 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 ekranem zablokowanym. 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ą:
- Otwórz panel Czujniki.
- U dołu panelu znajdź i włącz Spójność sprzętowa.
- W polu z liczbą wpisz liczbę rdzeni, które chcesz emulować.
Aby przywrócić wartość domyślną, kliknij przycisk Resetuj.