Tworzenie aplikacji na urządzenia mobilne powinno być równie łatwe jak tworzenie aplikacji na komputery. Dołożyliśmy wszelkich starań, aby ułatwić Ci korzystanie z Narzędzi deweloperskich w Chrome. Teraz przedstawiamy nowe funkcje, które znacznie usprawnią tworzenie stron internetowych w wersji mobilnej. Najpierw debuguj zdalne debugowanie, a potem przedstawimy prawidłową emulację urządzenia mobilnego.
Przesyłaj ekran urządzenia na pulpit
Do tej pory podczas zdalnego debugowania trzeba było przełączać się między urządzeniem a narzędziami deweloperskimi. Teraz Screencast wyświetla ekran urządzeń obok narzędzi deweloperskich. To jest dobre samopoczucie, ale interakcja z nim jest jeszcze lepsza:
- Kliknięcia screencasta są tłumaczone na kliknięcia, a odpowiednie zdarzenia dotknięcia są wywoływane na urządzeniu.
- Zbadaj element na urządzeniu za pomocą wskaźnika na pulpicie
- Pisz na klawiaturze komputera – wszystkie naciśnięcia klawiszy są wysyłane do urządzenia. Ogromna oszczędność czasu podczas pisania kciukami.
- Możesz przewinąć stronę, przesuwając palcem po ekranie lub przesuwając palcem po trackpadzie laptopa.
Pełna dokumentacja dotycząca screencastu zawiera te i inne informacje, na przykład wysyłanie gestu powiększenia przez ściągnięcie palców. Wymagany Chrome na Androidzie Beta (m32).
Łatwe debugowanie zdalne
18 miesięcy temu w Chrome wprowadziliśmy odpowiednie debugowanie zdalne dla przeglądarek WebKit. Jednak jeśli wcześniej było to rozwiązanie, trzeba było pobrać pakiet Android SDK o wielkości 400 MB i dodać plik binarny adb do pliku $PATH oraz kilka magicznych zaklęć wiersza poleceń.
Z przyjemnością informujemy, że możesz o tym zapomnieć. Chrome może teraz natywnie wykrywać urządzenia podłączone przez USB i rozmawiać z nimi. Protokół adb zaimplementowaliśmy bezpośrednio przez USB w Chrome. Możesz więc łatwo przejść na stronę Menu > Tools > Inspect Devices i od razu rozpocząć sesję zdalnego debugowania.
Działa to świetnie na wszystkich platformach, w tym w Chrome OS, ale w systemie Windows najpierw musisz zainstalować odpowiednie sterowniki USB, aby komunikować się z urządzeniem. Jeśli używasz go po raz pierwszy, musisz też włączyć debugowanie USB na urządzeniu i potwierdzić, że używasz Chrome na Androida (beta). Przeczytaj pełną dokumentację.
Przenoszenie do przodu w przypadku projektów lokalnych
Tworzysz na serwerze localhost:8000, ale Twój telefon nie może się z nim połączyć. Dodaliśmy więc przekierowanie portów bezpośrednio do procesu debugowania zdalnego. Teraz można łatwo pracować nad pełnymi projektami bez konieczności łączenia się z tunelami. Na urządzeniu about:inspect kliknij Przekierowanie portów, aby określić, które porty mają być dostępne. Podłączą się one na zielono, jeśli będą gotowe.
Emulacja mobilna
Nie zawsze masz urządzenia, które trzeba sprawdzić pod kątem zgodności? Zdalne debugowanie prawdziwych urządzeń zapewni Ci lepsze wrażenia w zakresie wydajności i dotyku. Teraz możesz w realistyczny sposób emulować wiele cech urządzenia na komputerze, oszczędzając w ten sposób czas i przyspieszając pętlę iteracyjną.
Emuluj rozmiar ekranu, PixelRatio i <meta viewport> za pomocą pełnej symulacji zdarzeń dotyku
Jeśli korzystałeś z funkcji Dane o urządzeniu, obecnie masz do czynienia z dużą aktualizacją. Nasz zespół pracował nad stworzeniem nowej emulacji urządzeń mobilnych, która umożliwia niemal realistyczne odzwierciedlenie tego, co można zobaczyć na prawdziwym urządzeniu. Na przykład przeglądarki WebKit obsługują skomplikowany algorytm autoskalowania tekstu, a każde urządzenie ma określony „współczynnik dopasowania tekstu”, który zmienia się w celu zapewnienia czytelności tekstu. W trybie emulacji możesz potwierdzić, że takie zachowanie jest stosowane, i zobaczyć wyniki.
Współczynnik pikseli urządzenia
Do tej pory wyświetlenie tego, co widać na urządzeniu o niskiej rozdzielczości DPI, było niemal niemożliwe. Teraz emulacja dPR w Narzędziach deweloperskich dostosuje widok, aby umożliwić powiększenie scenariuszy z głęboką wartością DPI. Ustawienia window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) itd. będą odzwierciedlać Twoje ustawienia, ponieważ pozwoli Ci to zobaczyć, jak aplikacja się dostosowuje, w tym wczytywać różne zasoby związane z rozdzielczością dpi.
Emulacja urządzenia nie obejmuje wszystkich błędów i funkcji przeglądarki. W przypadku emulacji iOS technologia WebGL będzie nadal działać, ale nie dotyczy błędu w zakresie powiększenia orientacji w iOS 5. Aby przekonać się, jaka jest zmienność, przejdź do urządzenia.
Prawidłowa emulacja funkcji <meta viewport> (i @viewport)
Testowanie działania aplikacji width=device-width i minimum-scale:1.0 było wcześniej dostępne tylko na urządzeniu. Teraz możesz szybko wypróbować różne widoczne obszary i zobaczyć, jak są renderowane.
Symulacja zdarzenia dotknięcia
Ustawienie emulacji ekranu dotykowego sprawi, że kliknięcia będą interpretowane jako touchstart itd. Dodatkowo będą działać zdarzenia syntetyczne, takie jak powiększenie, przewijanie i przesunięcie. Aby powiększyć lub pomniejszyć widok, shift+przeciągnij lub shift+przewiń, aby powiększyć treść. Zyskujesz świetny widok skalowanej zawartości poza widoczny obszar.
Sprawdzone metody podszywania się pod klienta (zarówno na poziomie nagłówka żądania, jak i na poziomie window.navigator), geolokalizacji i emulacji orientacji pozwalają poznać wszystkie funkcje urządzenia.
Gotowe ustawienia urządzenia
Dzięki gotowym ustawieniom emulacji możesz wybrać telefon lub tablet i uzyskać właściwy rozmiar ekranu (dPR, UA) dla tego urządzenia wraz z emulacją pełnych zdarzeń dotknięcia i widocznego obszaru. Możesz wypróbować konkretne gotowe ustawienia lub w łatwy sposób zmieniać te cechy pojedynczo.
Wejdź na devtools.chrome.com, aby zapoznać się z pełnymi dokumentami dotyczącymi emulacji mobilnych za pomocą Narzędzi deweloperskich.
Pokaz
Aby zobaczyć pełną prezentację wszystkich tych funkcji w praktyce, obejrzyj moją 23-minutową prezentację z Chrome Dev Summit na temat Narzędzi deweloperskich na komórki: