Symulowanie urządzeń mobilnych w trybie urządzenia

Sofia Emelianova
Sofia Emelianova

Tryb urządzenia pozwala oszacować wygląd i wydajność strony na urządzeniach mobilnych.

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

Ograniczenia

Tryb urządzenia to przybliżenie wyglądu i działania strony na urządzeniu mobilnym. W tym trybie nie uruchamiasz kodu na urządzeniu mobilnym. W ten sposób symulujesz działanie użytkownika na urządzeniu mobilnym, korzystając z laptopa lub komputera stacjonarnego.

Niektórych aspektów urządzeń mobilnych nie uda się symulować za pomocą Narzędzi deweloperskich. Na przykład architektura procesorów mobilnych znacznie odbiega od architektury komputerów stacjonarnych. W razie wątpliwości najlepiej jest uruchomić stronę na urządzeniu mobilnym. Zdalne debugowanie pozwala wyświetlać, zmieniać, debugować i profilować kod strony na laptopie lub komputerze stacjonarnym, gdy działa ona na urządzeniu mobilnym.

Symulowanie widocznego obszaru na urządzeniu mobilnym

Kliknij Urządzenia Przełącz pasek narzędzi urządzenia, aby otworzyć pasek narzędzi, który pozwala symulować widoczny obszar na urządzeniach mobilnych.

Pasek narzędzi urządzenia.

Domyślnie pasek narzędzi urządzenia otwiera się w widocznym obszarze z opcją Wymiary ustawioną na Elastyczny.

Tryb elastycznego widocznego obszaru

Przeciągnij uchwyty, aby zmienić rozmiar widocznego obszaru. 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.

Uchwyty do zmiany wymiarów widocznego obszaru w trybie elastycznego widocznego obszaru.

Możesz też użyć paska gotowych ustawień szerokości, by kliknąć jedną z tych opcji:

Pasek gotowych ustawień szerokości.

Telefon komórkowy (S) Telefon komórkowy M Telefon komórkowy L Tablet Laptop Laptop L 4K
320 piks. 375 piks. 425 piks. 768 piks. 1024 piks. 1440 piks. 2560 piks.

Pokaż zapytania o multimedia

Aby wyświetlić punkty przerwania zapytania o media powyżej widocznego obszaru, kliknij Więcej opcji. Więcej opcji > Pokaż zapytania o media.

Pokaż zapytania o multimedia.

W Narzędziach deweloperskich nad widocznym obszarem wyświetlają się teraz 2 dodatkowe paski:

  • Niebieski pasek z punktami przerwania (max-width).
  • pomarańczowy pasek z min-width punktami przerwania,

Klikaj między punktami przerwania, by zmienić szerokość widocznego obszaru i wywołać punkt przerwania.

Klikaj między punktami przerwania, by zmienić szerokość widocznego obszaru.

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

Pokaż w menu kodu źródłowego.

Ustaw współczynnik pikseli urządzenia

Współczynnik pikseli urządzenia (DPR) to stosunek między fizycznymi pikselami na ekranie sprzętowym a pikselami logicznymi (CSS). Inaczej mówiąc, DPR informuje Chrome, ile pikseli ekranu ma użyć do narysowania piksela CSS. Chrome używa wartości DPR podczas rysowania na wyświetlaczach HiDPI (High Dots Per Inch).

Aby ustawić wartość DPR:

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

    Dodaj współczynnik pikseli urządzenia.

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

    Ustawiam wartość DPR.

Ustawianie typu urządzenia

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

Lista Typ urządzenia.

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

W następnej tabeli opisano różnice między tymi opcjami. Metoda renderowania określa, czy Chrome renderuje stronę jako widoczny obszar dla urządzeń mobilnych czy komputerów. Ikona kursora określa rodzaj kursora widoczny po najechaniu kursorem na stronę. Uruchomione zdarzenia określają, czy podczas interakcji strona uruchamia zdarzenia touch czy click.

OptionMetoda renderowaniaIkona kursoraUruchomione zdarzenia
Urządzenia mobilneUrządzenia mobilneKołodotknij
Komórka (bezdotykowa)Urządzenia mobilneNormalniekliknij
KomputerKomputerNormalniekliknij
Komputer (dotyk)KomputerKołodotknij

Tryb urządzenia

Aby przeprowadzić symulację wymiarów konkretnego urządzenia mobilnego, wybierz je na liście Wymiary.

Lista Wymiary.

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

Obróć widoczny obszar do orientacji poziomej

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

Orientacja pozioma.

Przycisk Obróć Obrót. znika, jeśli pasek narzędzi urządzenia jest wąski.

Pasek narzędzi urządzenia.

Zobacz też Ustawianie orientacji.

Przełącz tryb dwóch ekranów

Niektóre urządzenia, na przykład Surface Duo, mają 2 ekrany i 2 sposoby korzystania z nich: z aktywnym jednym lub dwoma ekranami.

Aby przełączać się między podwójnym i pojedynczym ekranem, na pasku narzędzi kliknij devices_fold Toggle dual-screen (Przełącz tryb dwóch ekranów).

Tryb dwóch ekranów został włączony.

Ustaw stan urządzenia

Niektóre urządzenia, na przykład Asus Zenbook Fold, mają składane ekrany. Stan ekranu: ciągły lub złożony. Stan ciągły odnosi się do pozycji „płaskiej”, a złożenie tworzy kąt między sekcjami wyświetlacza.

Aby ustawić stan urządzenia, wybierz Ciągły lub Złożony z odpowiedniego menu na pasku narzędzi.

Stan pozycji jest złożony.

Pokaż ramkę urządzenia

Symulując wymiary konkretnego urządzenia mobilnego, np. Nest Hub, wybierz Więcej opcji Więcej opcji. > Pokaż ramkę urządzenia, aby wyświetlić klatkę urządzenia w widocznym obszarze.

Pokazuj ramkę urządzenia.

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

Ramka urządzenia Nest Hub.

Dodaj niestandardowe urządzenie mobilne

Aby dodać urządzenie niestandardowe:

  1. Kliknij listę Urządzenie i wybierz Edytuj.

    Edytuj.

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

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

    Tworzę urządzenie niestandardowe.

    Pola Współczynnik piksela urządzenia, Ciąg znaków klienta użytkownika i Typ urządzenia są opcjonalne. Pole typu urządzenia to lista, która ma domyślnie wartość Komórka.

  4. Wróć do widocznego obszaru i wybierz nowo dodane urządzenie z listy Wymiary.

Pokaż linijki

Kliknij Więcej opcji Więcej opcji. > Pokaż linijki. Jednostkami rozmiaru linijek są piksele.

Pokaż linijki.

Narzędzia deweloperskie pokazują linijki na górze i po lewej stronie widocznego obszaru.

Linijki powyżej i na lewo od widocznego obszaru.

Klikaj linijki przy określonych oznaczeniach, aby ustawić szerokość i wysokość widocznego obszaru.

Powiększanie widoku

Aby powiększyć lub pomniejszyć widok, skorzystaj z listy Powiększenie.

Powiększ.

Zrób zrzut ekranu

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

Opcja Zrób zrzut ekranu w menu Więcej opcji.

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

Ograniczanie działania sieci i procesora

Aby ograniczyć zarówno sieć, jak i procesor, wybierz Urządzenia mobilne klasy średniej lub Tanie urządzenia mobilne z listy Throttle.

Lista Throttle.

Urządzenia mobilne średniej klasy symuluje szybkie łącze 3G i ogranicza procesor do 4 razy wolniej niż zwykle. Tanie urządzenia mobilne symulują wolne połączenia 3G i sześciokrotnie wolniejsze niż zwykle. Pamiętaj, że regulacja przepustowości zależy od normalnej funkcjonalności laptopa lub komputera stacjonarnego.

Lista Ograniczanie będzie ukryta, jeśli pasek narzędzi urządzenia będzie wąski.

Ograniczanie wykorzystania procesora

Aby ograniczać tylko procesor, a nie sieć, przejdź do panelu Wydajność, kliknij Ustawienia przechwytywania Ustawienia przechwytywania., a potem z listy Procesor wybierz 4-krotne spowolnienie lub Spowolnienie 6x.

Lista procesorów.

Ograniczanie działania tylko sieci

Aby ograniczać tylko sieć, a nie procesor, w panelu Sieć wybierz Szybka 3G lub Wolne 3G z listy Throttle.

Lista Throttle.

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

Menu poleceń.

Ograniczanie przepustowości sieci możesz też ustawić w panelu Wydajność. Kliknij Ustawienia przechwytywania Ustawienia przechwytywania., a następnie z listy Sieć wybierz Fast 3G lub Slow 3G.

Ustawianie ograniczania wykorzystania sieci w panelu Wydajność.

Emuluj czujniki

Na karcie Czujniki możesz zastąpić geolokalizację, symulować orientację urządzenia, wymusić dotknięcie i emulować stan bezczynności.

W następnych sekcjach dowiesz się, jak zastąpić geolokalizację i ustawić orientację urządzenia. Pełną listę funkcji znajdziesz w artykule Emulowanie czujników urządzenia.

Zastąp geolokalizację

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

Czujniki

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

Pokaż czujniki

Wybierz jedno z gotowych ustawień na liście Lokalizacja lub kliknij Inna..., aby wpisać własne współrzędne, lub wybierz Lokalizacja niedostępna, aby sprawdzić, jak zachowuje się strona, gdy wystąpi błąd geolokalizacji.

Geolokalizacja

Ustaw orientację

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

Czujniki

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

Pokaż czujniki

Wybierz jedno z gotowych ustawień z listy Orientacja lub kliknij Orientacja niestandardowa, aby ustawić własne wartości alfa, beta i gamma.

Orientacja