użyj trybu urządzenia, aby przybliżać wygląd i działanie strony na urządzeniu mobilnym.
Device Mode to nazwa luźnej kolekcji funkcji w Chrome DevTools, które umożliwiają symulację urządzeń mobilnych., Funkcje te obejmują:
- symulowanie mobilnego viewportu
- Dławienie sieci
- Dławienie procesora
- symulowanie geolokalizacji
- Ustawianie orientacji
ograniczenia
tryb urządzenia jest przybliżeniem pierwszego rzędu tego, jak Strona wygląda i czuje się na urządzeniu mobilnym. W trybie urządzenia w rzeczywistości nie uruchamiasz koduw urządzeniu mobilnym. Symulujesz wrażenia użytkownika mobilnego z laptopa lub komputera stacjonarnego.
istnieją pewne aspekty urządzeń mobilnych, których DevTools nigdy nie będzie w stanie symulować., Na przykład Architektura procesorów mobilnych jest bardzo inna niż Architektura procesorów stacjonarnych laptopor. W razie wątpliwości najlepiej jest uruchomić stronę na urządzeniu mobilnym. Zdalne debugowanie umożliwia wyświetlanie, zmienianie,debugowanie i profilowanie kodu strony z laptopa lub komputera stacjonarnego, gdy działa on na urządzeniu mobilnym.
Symuluj mobilny viewport
kliknij Toggle Device Toolbar
aby otworzyć interfejs, który umożliwia symulację mobilnego viewportu.
domyślnie pasek narzędzi urządzenia otwiera się w trybie Responsive Viewport.
tryb responsywnego widoku
przeciągnij uchwyty, aby zmienić rozmiar widoku do dowolnych wymiarów. Lub wprowadź określone wartości w polach Szerokość i wysokość. Na rysunku 2 szerokość jest ustawiona na 628, a wysokość na 662.
Show media queries
aby wyświetlić punkty przerwania zapytań o media nad viewport, kliknij Więcej opcji, a następnie wybierz Show mediaqueries.
kliknij punkt przerwania, aby zmienić szerokość widoku, tak aby punkt przerwania został uruchomiony.
Ustaw typ urządzenia
Użyj listy Typ urządzenia do symulacji urządzenia mobilnego lub urządzenia stacjonarnego.
poniższa tabela opisuje różnice między opcjami. Metoda renderowania określa, czy Chrome renderuje stronę jako mobilny lub stacjonarny viewport. Ikona kursora wyświetla typ kursora po najechaniu kursorem na stronę., Wywołane zdarzenia odnoszą się do tego, czy strona zostanie wywołana touch lub click podczas interakcji ze stroną.,id=”b8e8c2fed7″>
Mobile Device Viewport Mode
To simulate the dimensions of a specific mobile device, select the device from the Device list.,
Rotate the viewport to landscape orientation
Click Rotate 
to rotate the viewport to landscape orientation.
Note that the Rotate button disappears if your Device Toolbar is narrow.
patrz również Ustaw orientację.
Pokaż ramkę urządzenia
podczas symulacji wymiarów konkretnego urządzenia mobilnego, takiego jak iPhone 6, Otwórz Więcej opcji, a następnie wybierz opcję Pokaż ramkę urządzenia, aby wyświetlić ramkę urządzenia fizycznego wokół widoku.
Dodaj niestandardowe urządzenie mobilne
aby dodać niestandardowe urządzenie:
-
kliknij listę urządzeń, a następnie wybierz Edytuj.
Rysunek 11. Wybierz opcję Edytuj -
kliknij Dodaj własne urządzenie.
-
wprowadź nazwę, szerokość i Wysokość urządzenia. Pola Thedevice pixel ratio, user agent string i device type są opcjonalne. Pole Typ urządzenia jest listą domyślnie ustawioną na Mobile.,
Figure 12. Creating a custom device
Show rulers
Click More options and then select Show rulers to see rulers above and to the leftof your viewport. The sizing unit of the rulers is pixels.
Powiększ widok
Użyj listy powiększeń, aby powiększyć lub pomniejszyć.
Dławienie sieci i procesora
aby Dławić Sieć i procesor, wybierz z listy Dławienie urządzenia mobilnego średniego poziomu lub mobilnego niskiego poziomu.
Mid-tier mobile symuluje szybkie 3G i dławi procesor tak, że jest 4 razy szybszy niż normalnie. Low-end mobile symuluje powolne 3G i dławi procesor 6 razy wolniej niż normalnie.Należy pamiętać, że Dławienie jest w stosunku do normalnej możliwości laptopa lub komputera stacjonarnego.
pamiętaj, że lista przepustnicy będzie ukryta, jeśli pasek narzędzi urządzenia jest wąski.
Dławić tylko CPU
aby Dławić tylko CPU, a nie sieć, przejdź do panelu Wydajność, kliknij Ustawienia capture 
, a następnie wybierz 4X spowolnienie lub 6x spowolnienie z listy procesora.
Dławić tylko sieć
aby Dławić tylko sieć, a nie CPU, przejdź do panelu Sieć i wybierz szybkie 3G lub wolne 3G z listy Dławić.,
lub naciśnij Command+Shift+P (Mac) lub Control+Shift+P (Windows, Linux, Chrome OS), aby otworzyć Menu polecenia, wpisz3G i wybierz Włącz szybkie Dławienie 3G lub powolne Dławienie 3G.
można również ustawić Dławienie sieci z panelu wydajność., Kliknij Ustawienia mapy I następnie Wybierz Szybkie 3G lub wolne 3G z listy sieci.
nadpisanie geolokalizacji
aby otworzyć nadpisanie geolokalizacji kliknij przycisk Dostosuj i kontroluj narzędzia DevTools
a następnie wybierz Więcej narzędzi > Czujniki.
wybierz jedno z ustawień z listy geolokalizacji lub wybierz lokalizację Niestandardowąaby wprowadzić własne współrzędne lub wybierz lokalizację niedostępną, aby sprawdzić, jak zachowuje się Twoja strona, gdy geolokalizacja jest w stanie błędu.
Set orientation
To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.
wybierz jedno z ustawień wstępnych z listy orientacja lub wybierz niestandardową orientację, aby ustawić własne wartości alfa, beta i gamma.
Feedback
Zobacz Dołącz do społeczności DevTools, aby uzyskać inne informacje zwrotne.