Symulowanie urządzeń mobilnych w trybie urządzenia

Użyj trybu urządzenia, aby sprawdzić, jak strona wygląda i działa na urządzeniu mobilnym.

Przegląd

Tryb urządzenia to nazwa zbioru funkcji w Narzędziach deweloperskich w Chrome, które pomagają symulować urządzenia mobilne. Do tych funkcji należą:

• Symulowanie widocznego obszaru na urządzeniu mobilnym
• Ograniczanie wykorzystania procesora
• Ograniczanie wykorzystania sieci
• Dodatkowo w panelu Czujniki:
  • symulować geolokalizację,
  • ustawiać orientację.

Ograniczenia

Tryb urządzenia to przybliżona symulacja wyglądu i działania strony na urządzeniu mobilnym. W trybie urządzenia kod nie jest uruchamiany na urządzeniu mobilnym. Symulujesz korzystanie z urządzenia mobilnego na laptopie lub komputerze.

Narzędzia deweloperskie nigdy nie będą w stanie symulować niektórych aspektów urządzeń mobilnych. Na przykład architektura procesorów urządzeń mobilnych bardzo różni się od architektury procesorów laptopów i komputerów. W razie wątpliwości najlepiej uruchomić stronę na urządzeniu mobilnym. Użyj zdalnego debugowania, aby wyświetlać, zmieniać, debugować i profilować kod strony na laptopie lub komputerze, gdy jest on uruchomiony na urządzeniu mobilnym.

Otwieranie paska narzędzi urządzenia

Aby otworzyć pasek narzędzi urządzenia:

1. Otwórz Narzędzia deweloperskie.
2. Na pasku działań u góry kliknij devices Przełącz pasek narzędzi urządzenia.

Symulowanie widocznego obszaru na urządzeniu mobilnym

Domyślnie pasek narzędzi urządzenia otwiera się w widocznym obszarze z ustawionymi Wymiarami na Elastyczny. Za pomocą menu Wymiary możesz symulować wymiary konkretnego urządzenia mobilnego.

Tryb elastycznego widocznego obszaru

Przeciągnij uchwyty, aby zmienić rozmiar widocznego obszaru do dowolnych wymiarów. Możesz też wpisać konkretne wartości w polach szerokości i wysokości. W tym przykładzie szerokość jest ustawiona na 480, a wysokość na 415.

Możesz też użyć paska ustawień wstępnych szerokości, aby ustawić szerokość jednym kliknięciem na jedną z tych opcji:

Urządzenie mobilne S	Urządzenie mobilne M	Urządzenie mobilne L	Tablet	Laptop	Laptop L	4K
320 pikseli	375 pikseli	425 pikseli	768 pikseli	1024 piksele	1440 pikseli	2560 pikseli

Pokaż zapytania o media

Aby wyświetlić punkty przerwania zapytań o media nad widocznym obszarem, kliknij Więcej opcji > Pokaż zapytania o media.

Narzędzia deweloperskie wyświetlają teraz 2 dodatkowe paski nad widocznym obszarem:

• Niebieski pasek z punktami przerwania.max-width
• Pomarańczowy pasek z punktami przerwania min-width.

Kliknij między punktami przerwania, aby zmienić szerokość widocznego obszaru, tak aby punkt przerwania został wywołany.

Aby znaleźć odpowiednią deklarację @media, kliknij prawym przyciskiem myszy między punktami przerwania i wybierz Pokaż w kodzie źródłowym. Narzędzia deweloperskie otworzą panel Źródła w odpowiedniej linii w Edytorze.

Ustawianie współczynnika pikseli urządzenia

Współczynnik pikseli urządzenia (DPR) to stosunek pikseli fizycznych na ekranie sprzętowym do pikseli logicznych (CSS). Innymi słowy, DPR informuje Chrome, ile pikseli ekranu ma użyć do narysowania piksela CSS. Chrome używa wartości DPR podczas rysowania na ekranach HiDPI (High Dots Per Inch).

Aby ustawić wartość DPR:

1. Kliknij Więcej opcji > Dodaj współczynnik pikseli urządzenia.

   

2. Na pasku działań u góry widocznego obszaru wybierz wartość DPR z nowego menu DPR.

   

Ustawianie typu urządzenia

Użyj listy Typ urządzenia, aby symulować urządzenie mobilne lub komputer.

Jeśli nie widzisz listy na pasku działań u góry, kliknij Więcej opcji > Dodaj typ urządzenia.

W tabeli poniżej opisujemy różnice między opcjami. Metoda renderowania określa, czy Chrome renderuje stronę jako widoczny obszar na urządzeniu mobilnym czy komputerze. Ikona kursora określa, jaki typ kursora widzisz, gdy najedziesz kursorem na stronę. Wywoływane zdarzenia określają, czy strona wywołuje zdarzenia touch czy click, gdy wchodzisz z nią w interakcję.

Opcja	Metoda renderowania	Ikona kursora	Wywoływane zdarzenia
Urządzenia mobilne	Urządzenia mobilne	Okrąg	dotknij
Urządzenia mobilne (bez dotyku)	Urządzenia mobilne	Normalna	click
Komputer	Komputer	Normalna	click
Komputer (dotyk)	Komputer	Okrąg	dotknij

Tryb urządzenia

Aby symulować wymiary konkretnego urządzenia mobilnego, wybierz urządzenie z listy Wymiary.

Więcej informacji znajdziesz w artykule Dodawanie niestandardowego urządzenia mobilnego.

Obracanie widocznego obszaru do orientacji poziomej

Kliknij screen_rotation Obróć , aby obrócić widoczny obszar do orientacji poziomej.

* Pamiętaj, że przycisk Obróć znika, jeśli pasek narzędzi urządzenia jest wąski.

Zobacz też Ustawianie orientacji.

Przełącz tryb dwóch ekranów

Niektóre urządzenia, np. Surface Duo, mają 2 ekrany i 2 sposoby ich używania: z jednym lub oboma ekranami.

Aby przełączać się między trybem dwóch ekranów a trybem jednego ekranu, kliknij devices_fold Przełącz tryb dwóch ekranów na pasku narzędzi.

Ustawianie pozycji urządzenia

Niektóre urządzenia, np. Asus Zenbook Fold, mają składane ekrany. Takie ekrany mają pozycję: ciągłą lub złożoną. Pozycja ciągła odnosi się do pozycji „płaskiej”, a złożona tworzy kąt między sekcjami wyświetlacza.

Aby ustawić pozycję urządzenia, w odpowiednim menu na pasku narzędzi wybierz Ciągła lub Złożona.

Pokaż ramkę urządzenia

Podczas symulowania wymiarów konkretnego urządzenia mobilnego, np. Nest Hub, kliknij Więcej opcji > Pokaż ramkę urządzenia , aby wyświetlić ramkę urządzenia fizycznego wokół widocznego obszaru.

W tym przykładzie Narzędzia deweloperskie pokazują ramkę Nest Hub.

Dodawanie niestandardowego urządzenia mobilnego

Aby dodać urządzenie niestandardowe:

1. Kliknij listę Urządzenie , a następnie Edytuj.

   

2. Na karcie Ustawienia settings > Urządzenia wybierz urządzenie z listy obsługiwanych urządzeń lub kliknij Dodaj urządzenie niestandardowe, aby dodać własne.

3. Jeśli dodajesz własne urządzenie, wpisz jego nazwę, szerokość i wysokość, a następnie kliknij Dodaj.

   

   Pola współczynnika pikseli urządzenia, ciągu User-Agent i typu urządzenia są opcjonalne. Pole typu urządzenia to lista, która domyślnie jest ustawiona na Urządzenia mobilne.

4. W widocznym obszarze wybierz nowo dodane urządzenie z listy Wymiary.

Pokaż linijki

Kliknij Więcej opcji > Pokaż linijki , aby wyświetlić linijki. Jednostką miary linijek są piksele.

Narzędzia deweloperskie wyświetlają linijki u góry i po lewej stronie widocznego obszaru.

Kliknij linijki w określonych miejscach, aby ustawić szerokość i wysokość widocznego obszaru.

Powiększanie widocznego obszaru

Użyj listy Powiększenie , aby powiększyć lub pomniejszyć widok.

Zrób zrzut ekranu

Aby zrobić zrzut ekranu tego, co widzisz w widocznym obszarze, kliknij Więcej opcji > Zrób zrzut ekranu.

Aby zrobić zrzut ekranu całej strony, w tym treści niewidocznych w widocznym obszarze, w tym samym menu kliknij Zrób zrzut ekranu w pełnym rozmiarze.

Aby dołączyć ramkę urządzenia podczas robienia zrzutu ekranu w trybie urządzenia, najpierw Pokaż ramkę urządzenia, a potem kliknij Zrób zrzut ekranu zgodnie z wcześniejszymi instrukcjami.

Aby dowiedzieć się, jak robić zrzuty ekranu za pomocą Narzędzi deweloperskich, przeczytaj artykuł 4 sposoby robienia zrzutów ekranu za pomocą Narzędzi deweloperskich.

Ograniczanie wykorzystania sieci i procesora

Aby ograniczyć wykorzystanie sieci i procesora, na liście Ogranicz wybierz Urządzenie mobilne średniej klasy lub Urządzenie mobilne niskiej klasy.

Urządzenie mobilne średniej klasy symuluje szybką sieć 3G i ogranicza wykorzystanie procesora, tak aby był 4 razy wolniejszy niż zwykle. Urządzenie mobilne niskiej klasy symuluje wolną sieć 3G i ogranicza wykorzystanie procesora, tak aby był 6 razy wolniejszy niż zwykle. Pamiętaj, że ograniczenie jest proporcjonalne do normalnych możliwości laptopa lub komputera.

Pamiętaj, że lista Ogranicz będzie ukryta, jeśli pasek narzędzi urządzenia jest wąski.

Ograniczanie wykorzystania tylko procesora

Aby ograniczyć wykorzystanie tylko procesora, a nie sieci, otwórz panel Wydajność, kliknij Ustawienia przechwytywania , a następnie na liście Procesor wybierz 4-krotne spowolnienie, 6-krotne spowolnienie lub 20-krotne spowolnienie.

Ograniczanie wykorzystania tylko sieci

Aby ograniczyć wykorzystanie tylko sieci, a nie procesora, otwórz panel Sieć i na liście Ogranicz wybierz Szybka sieć 3G lub Wolna sieć 3G.

Możesz też nacisnąć Command+Shift+P (Mac) lub Control+Shift+P (Windows, Linux, ChromeOS), aby otworzyć menu poleceń, wpisać 3G i wybrać Włącz ograniczanie szybkiej sieci 3G lub Włącz ograniczanie wolnej sieci 3G.

Ograniczanie wykorzystania sieci możesz też ustawić w panelu Wydajność. Kliknij Ustawienia przechwytywania , a następnie na liście Sieć wybierz Szybka sieć 3G lub Wolna sieć 3G.

Emulowanie czujników

Użyj panelu Czujniki, aby zastąpić geolokalizację, symulować orientację urządzenia, wymusić dotyk i emulować stan bezczynności.

W kolejnych sekcjach znajdziesz krótkie informacje o tym, jak zastąpić geolokalizację i ustawić orientację urządzenia. Pełną listę funkcji znajdziesz w artykule Emulowanie czujników urządzenia.

Zastępowanie geolokalizacji

Aby otworzyć interfejs zastępowania geolokalizacji, kliknij Dostosuj i kontroluj Narzędzia deweloperskie , a następnie wybierz Więcej narzędzi > Czujniki.

Możesz też nacisnąć Command+Shift+P (Mac) lub Control+Shift+P (Windows, Linux, ChromeOS), aby otworzyć menu poleceń, wpisać Sensors, a następnie wybrać Pokaż czujniki.

Wybierz jedną z ustawień wstępnych z listy Lokalizacja lub kliknij Inne... , aby wpisać własne współrzędne, albo kliknij Lokalizacja niedostępna , aby sprawdzić, jak strona zachowuje się, gdy geolokalizacja jest w stanie błędu.

Ustawianie orientacji

Aby otworzyć interfejs orientacji, kliknij Dostosuj i kontroluj Narzędzia deweloperskie , a następnie wybierz Więcej narzędzi > Czujniki.

Możesz też nacisnąć Command+Shift+P (Mac) lub Control+Shift+P (Windows, Linux, ChromeOS), aby otworzyć menu poleceń, wpisać Sensors, a następnie wybrać Pokaż czujniki.

Wybierz jedną z ustawień wstępnych z listy Orientacja lub kliknij Orientacja niestandardowa, aby ustawić własne wartości alfa, beta i gamma.