Użyj trybu urządzenia, aby określić w przybliżeniu wygląd i wydajność swojej strony na urządzeniu mobilnym.
Omówienie
Tryb urządzenia to nazwa kolekcji funkcji w Narzędziach deweloperskich w Chrome, które pomagają Ci symulują 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 jak oszacowanie pierwszego rzędu wyglądu i sposobu działania strony na urządzenia mobilnego. W trybie urządzenia nie uruchamiasz kodu na urządzeniu mobilnym. Symulujesz jak i wrażenia użytkownika z laptopa lub komputera stacjonarnego.
Narzędzia deweloperskie nigdy nie dają symulacji niektórych elementów urządzeń mobilnych. 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. Użyj Pilota zdalnego debugowanie – pozwala wyświetlać, zmieniać, debugować i profilować kod strony na laptopie lub komputerze stacjonarnym podczas jej przeglądania; działa na urządzeniach mobilnych.
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. Atrybut metoda renderowania dotyczy:
czy Chrome renderuje stronę jako widoczny obszar na komórki czy komputery. Ikona kursora wskazuje typ
widoczny po najechaniu kursorem na stronę. Uruchomione zdarzenia określają, czy strona się uruchamia.
touch lub click.
| Opcja | Metoda renderowania | Ikona kursora | Uruchomione zdarzenia |
|---|---|---|---|
| Urządzenia mobilne | Urządzenia mobilne | Okrąg | dotknij |
| Urządzenia mobilne (bez dotyku) | Urządzenia mobilne | Normalnie | click |
| Komputer | Komputer | Normalnie | click |
| Komputer (dotykowy) | Komputer | Okrąg | 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. Ciągły stan określa się jako „płaski”. 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, wybierz Więcej opcji 
> Pokaż ramkę urządzenia, aby pokazać 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.
W sekcji Ustawienia ustawienia > Urządzenia, wybierz urządzenie z listy obsługiwanych 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
Kliknij Więcej opcji 
> Pokaż linijki, aby je zobaczyć. 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, by 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 tego, co 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.
Aby podczas robienia zrzutu ekranu w trybie dla danego urządzenia uwzględnić ramkę urządzenia, najpierw Pokaż ramkę urządzenia, a potem kliknij Zrób zrzut ekranu zgodnie z poprzednią instrukcją.
Inne sposoby robienia zrzutów ekranu za pomocą Narzędzi deweloperskich znajdziesz w artykule o 4 sposobach robienia zrzutów ekranu za pomocą narzędzi deweloperskich.
Ogranicz sieć i procesor
Aby ograniczyć wykorzystanie zarówno sieci, jak i procesora, wybierz Komórka średniej klasy lub Szeroka gama urządzeń mobilnych w listę Ograniczanie.
Telefon komórkowy średniej klasy symuluje szybką sieć 3G i spowalnia pracę procesora, tak aby była 4 razy wolniejsza niż w normie. Niskie modele mobilne symulują powolne połączenie 3G i sześciokrotnie spowalniają procesor. Google Keep 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 ograniczyć wykorzystanie samego procesora, a nie sieci, otwórz panel Wydajność i kliknij Przechwyć
Ustawienia 
,
wybierz Spowolnienie 4x, Spowolnienie 6x lub 20-krotne spowolnienie z listy CPU.
Ograniczaj tylko sieć
Aby ograniczyć wykorzystanie tylko sieci, a nie procesora, otwórz panel Sieć i wybierz Fast 3G lub Wolne 3G z listy Throttle.
Aby otworzyć to polecenie, możesz też nacisnąć Command + Shift + P (Mac) lub Control + Shift + P (Windows, Linux, ChromeOS).
Menu, wpisz 3G i wybierz Włącz ograniczanie przy szybkim połączeniu 3G lub Włącz ograniczanie przy wolnym połączeniu 3G.
Ograniczanie wykorzystania sieci możesz też ustawić w panelu Wydajność. Kliknij Capture Settings (Ustawienia przechwytywania).
, a następnie wybierz
Szybka sieć 3G lub Wolne 3G z listy Sieć.
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 i kontroluj Narzędzia deweloperskie.
i wybierz Więcej narzędzi > Czujniki.
Aby otworzyć to polecenie, możesz też nacisnąć Command + Shift + P (Mac) lub Control + Shift + P (Windows, Linux, ChromeOS).
Menu, wpisz Sensors, a następnie wybierz 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, by sprawdzić, jak zachowuje się strona geolokalizacja jest w stanie błędu.
Ustaw orientację
Aby otworzyć interfejs orientacji, kliknij Dostosuj i kontroluj Narzędzia deweloperskie.
i wybierz Więcej narzędzi > Czujniki.
Aby otworzyć to polecenie, możesz też nacisnąć Command + Shift + P (Mac) lub Control + Shift + P (Windows, Linux, ChromeOS).
Menu, wpisz Sensors, a następnie wybierz Pokaż czujniki.
Wybierz jedno z gotowych ustawień z listy Orientacja lub kliknij Orientacja niestandardowa, aby określić własnych wartości alfa, beta i gamma.
