Użyj trybu urządzenia, aby określić w przybliżeniu wygląd i wydajność swojej strony 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ądzeniach mobilnych
- Ograniczanie wykorzystania procesora
- Ograniczanie przepustowości sieci
- Dodatkowo w panelu Czujniki:
Ograniczenia
Potraktuj tryb urządzenia jako orientację na pierwszym miejscu, która pokazuje, jak Twoja strona wygląda i działa na urządzeniu mobilnym. W trybie urządzenia nie uruchamiasz kodu na urządzeniu mobilnym. Symulujesz wrażenia użytkowników urządzeń mobilnych, korzystając z laptopa lub komputera stacjonarnego.
Narzędzia deweloperskie nigdy nie dają symulacji niektórych elementów urządzeń mobilnych. Na przykład architektura procesorów mobilnych bardzo różni się od architektury laptopów lub komputerów stacjonarnych. W razie wątpliwości najlepiej jest otworzyć 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.
Otwórz pasek narzędzi urządzenia
Aby otworzyć pasek narzędzi urządzenia, wykonaj te czynności:
- Otwórz Narzędzia deweloperskie.
- Kliknij urządzenia Przełącz pasek narzędzi urządzenia na pasku działań u góry.
Symuluj widoczny obszar na urządzeniach mobilnych
Domyślnie pasek narzędzi urządzenia otwiera się w widocznym obszarze z opcją Wymiary ustawioną na Elastyczne. W menu Wymiary możesz symulować wymiary określonego urządzenia mobilnego.
Tryb elastycznego widocznego obszaru
Przeciągaj uchwyty, aby zmienić rozmiar widocznego obszaru i dostosować potrzebne wymiary. 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ść – 415.
Możesz też użyć paska gotowych ustawień szerokości, aby jednym kliknięciem ustawić szerokość:
| Komórka S | Komórka M | Telefon komórkowy L | Tablet | Laptop | Laptop L | 4K |
|---|---|---|---|---|---|---|
| 320 piks. | 375 piks. | 425 piks. | 768 piks. | 1024 piks. | 1440 piks. | 2560 pikseli |
Pokaż zapytania o multimedia
Aby wyświetlić punkty przerwania zapytania o multimedia nad widocznym obszarem, kliknij 
Więcej opcji > Pokaż zapytania o multimedia.
Narzędzia deweloperskie wyświetlają teraz 2 dodatkowe paski powyżej widocznego obszaru:
- Niebieski pasek z punktami przerwania:
max-width. - Pomarańczowy pasek z punktami przerwania:
min-width.
Klikaj punkty przerwania, by zmienić szerokość widocznego obszaru i aktywować ten punkt.
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 w Edytorze.
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 użyć do narysowania piksela CSS. Chrome używa wartości DPR podczas rysowania na wyświetlaczach HiDPI (High kropki na cal).
Aby ustawić wartość DPR:
Kliknij Więcej opcji
> Dodaj współczynnik pikseli urządzenia.
Na pasku działań u góry widocznego obszaru wybierz wartość DPR z nowego menu DPR.
Ustawianie typu urządzenia
Skorzystaj z 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 następnej tabeli opisano różnice między tymi opcjami. Metoda renderowania określa, czy Chrome renderuje stronę jako widoczny obszar na urządzeniu mobilnym czy na komputerze. Ikona kursora wskazuje, jaki typ kursora zobaczysz po najechaniu kursorem na stronę. Wywoływane zdarzenia wskazują, czy strona uruchamia zdarzenia touch czy click, gdy z niej korzystasz.
| Opcja | Metoda renderowania | Ikona kursora | Uruchomione zdarzenia |
|---|---|---|---|
| Urządzenia mobilne | Urządzenia mobilne | Koło | dotknij |
| Urządzenia mobilne (bez dotyku) | Urządzenia mobilne | Normalnie | click |
| Komputer | Komputer | Normalnie | click |
| Komputer (dotykowy) | Komputer | Koło | dotknij |
Tryb specyficzny dla urządzenia
Aby symulować wymiary konkretnego urządzenia mobilnego, wybierz je z listy 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.
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 korzystania z nich: jeden lub oba.
Aby przełączyć się między trybem podwójnym a pojedynczym, kliknij devices_fold Przełącz tryb podwójny na pasku narzędzi.
Ustaw stan urządzenia
Niektóre urządzenia, na przykład Asus Zenbook Fold, mają składane ekrany. Takie ekrany mają stan: ciągły lub złożony. Stan ciągły odnosi się do pozycji „płaskiej” i po złożeniu tworzy kąt między sekcjami wyświetlacza.
Aby ustawić stan urządzenia, w odpowiednim menu na pasku narzędzi wybierz Ciągły lub Składany.
Pokaż ramkę urządzenia
Podczas symulowania wymiarów określonego urządzenia mobilnego, takiego jak Nest Hub, kliknij Więcej opcji 
> Pokaż ramkę urządzenia, aby wyświetlić ramkę urządzenia w widocznym obszarze.
W tym przykładzie Narzędzia deweloperskie pokazują ramkę urządzenia Nest Hub.
Dodawanie niestandardowego urządzenia mobilnego
Aby dodać urządzenie niestandardowe:
Kliknij listę Urządzenia i wybierz Edytuj.
Na karcie Ustawienia ustawień > Urządzenia wybierz urządzenie z listy obsługiwanych urządzeń lub kliknij Dodaj urządzenie niestandardowe, aby dodać własne.
Jeśli dodajesz własne elementy, wpisz nazwę, szerokość i wysokość urządzenia, a następnie kliknij Dodaj.
Pola współczynnika piksela urządzenia, ciąg znaków klienta użytkownika i typ urządzenia są opcjonalne. Pole typu urządzenia to lista, na której domyślnie jest wybrana wartość Urządzenia mobilne.
Wróć do widocznego obszaru i z listy Wymiary wybierz nowo dodane urządzenie.
Pokaż linijki
Aby wyświetlić linijki, kliknij Więcej opcji 
> Pokaż linijki. Jednostkami rozmiaru linijek są piksele.
Narzędzia deweloperskie wyświetlają linijki u góry i po lewej stronie widocznego obszaru.
Klikaj linijki w określonych znacznikach, aby ustawić szerokość i wysokość widocznego obszaru.
Powiększ widoczny obszar
Aby powiększyć lub pomniejszyć widok, użyj listy Powiększ.
Zrób zrzut ekranu
Aby zrobić zrzut ekranu, który widać w widocznym obszarze, kliknij 
Więcej opcji > Zrób zrzut ekranu.
Aby zrobić zrzut ekranu całej strony wraz z zawartością niewidoczną w widocznym obszarze, w tym samym menu wybierz Zrób zrzut ekranu w pełnym rozmiarze.
Ogranicz sieć i procesor
Aby ograniczyć zarówno sieć, jak i procesor, na liście Throttle wybierz Środek mobilny lub Szeroka gama urządzeń mobilnych.
Telefon komórkowy średniej klasy symuluje szybką sieć 3G i spowalnia działanie procesora tak, że jest 4 razy wolniejsze niż zwykle. Niskie modele mobilne symulują powolne połączenie 3G i sześciokrotnie spowalniają procesor. Pamiętaj, że ograniczanie przepustowości zależy od normalnych możliwości laptopa lub komputera stacjonarnego.
Pamiętaj, że jeśli pasek narzędzi urządzenia jest wąski, lista Ograniczanie jest ukryta.
Ogranicz tylko procesor
Aby ograniczać tylko procesor, a nie sieć, otwórz panel Wydajność, kliknij Ustawienia przechwytywania 
, a następnie z listy CPU wybierz 4-krotne spowolnienie, spowolnienie 6-krotne lub 20-krotne spowolnienie.
Ograniczaj tylko sieć
Aby ograniczać tylko sieć, a nie procesor, otwórz panel Sieć i wybierz Szybkie 3G lub Wolne 3G z listy Przepustowość.
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 szybkiego połączenia 3G lub Włącz ograniczanie powolnego 3G.
Ograniczanie wykorzystania sieci możesz też ustawić w panelu Wydajność. Kliknij Capture Settings
, a następnie z listy Network (Sieć) wybierz Fast 3G (Szybkie 3G) lub Wolne 3G.
Emuluj czujniki
W panelu Czujniki możesz zastąpić geolokalizację, symulować orientację urządzenia, wymuszać dotyk i emulować stan bezczynności.
W następnych sekcjach znajdziesz 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ąp geolokalizację
Aby otworzyć interfejs zastępowania geolokalizacji, kliknij Dostosuj Narzędzia deweloperskie
i 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 i wybrać Pokaż czujniki.
Wybierz jedno z gotowych ustawień na liście Lokalizacja lub kliknij Inne..., by wpisać własne współrzędne, albo wybierz Lokalizacja niedostępna, by sprawdzić, jak zachowuje się strona, gdy geolokalizacja ma stan błędu.
Ustaw orientację
Aby otworzyć interfejs orientacji, kliknij Dostosuj i kontroluj Narzędzia deweloperskie
, a potem kliknij 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 i wybrać Pokaż czujniki.
Wybierz jedno z gotowych ustawień z listy Orientacja lub kliknij Orientacja niestandardowa, aby ustawić własne wartości alfa, beta i gamma.
