Tworzenie aplikacji pod kątem urządzeń mobilnych powinno być równie łatwe, jak tworzenie aplikacji na komputery. Włożyliśmy wiele pracy w Narzędzia deweloperskie w Chrome, aby ułatwić Ci pracę. Nadszedł czas, by przedstawić nowe funkcje, które powinny znacznie ułatwić tworzenie stron mobilnych. Zaczniemy od zdalnego debugowania, a potem zaprezentujemy właściwą emulację telefonów komórkowych.
Prześlij ekran urządzenia na komputer
Do tej pory, podczas zdalnego debugowania, trzeba było przełączać wzrok między urządzeniem a narzędziami deweloperskimi. Teraz Screencast wyświetla ekran urządzenia obok narzędzi deweloperskich. Oglądanie materiałów jest przyjemne, ale interakcja z nimi jest jeszcze lepsza:
- Kliknięcia screencasta są przekształcane na kliknięcia, a odpowiednie zdarzenia dotyku są wywoływane przez urządzenie.
- Zbadaj element na urządzeniu za pomocą wskaźnika na pulpicie
- Pisanie na klawiaturze komputera – wszystkie naciśnięcia klawiszy są wysyłane do urządzenia. Ogromna oszczędność czasu podczas pisania kciukiem.
- Przewiń stronę, przesuwając ją wskaźnikiem lub po prostu przesuwając palcem po trackpadzie laptopa.
Pełna dokumentacja dotycząca screencastingu zawiera to i inne informacje, na przykład gest ściągnięcia palcami. Wymagana wersja Chrome na Androida w wersji beta (M32).
Łatwe zdalne debugowanie
18 miesięcy temu w Chrome wprowadziliśmy poprawne debugowanie zdalne w przeglądarkach WebKit, ale jeśli już je wykorzystano, trzeba było sięgać po pakiet Android SDK o rozmiarze 400 MB, dodać plik binarny adb do aplikacji $PATH i wprowadzić magiczne polecenia z 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. Wdrożyliśmy w Chrome protokół adb bezpośrednio przez USB. Dzięki temu możesz łatwo otworzyć stronę Menu > Tools > Inspect Devices i od razu rozpocząć sesję zdalnego debugowania.
To działa świetnie na wszystkich platformach, w tym w systemie operacyjnym Chrome, ale pamiętaj, że w systemie Windows musisz najpierw zainstalować odpowiednie sterowniki USB, aby komunikować się z urządzeniem. Jeśli korzystasz z tej funkcji po raz pierwszy, musisz włączyć na urządzeniu debugowanie USB i potwierdzić, że używasz Chrome dla Androida Beta. Przeczytaj pełną dokumentację
Przenoszenie do projektów lokalnych
Programujesz na serwerze localhost:8000, ale Twój telefon nie może uzyskać dostępu. W związku z tym dodaliśmy przekierowanie portów bezpośrednio do przepływu pracy debugowania zdalnego. Teraz możesz łatwo pracować nad pełnymi projektami bez konieczności hakowania tunelowania. Na urządzeniu about:inspect kliknij Przekierowanie portów, aby wybrać porty, które mają być dostępne. Gdy wszystko będzie gotowe, zaświeci się na zielono.
Emulacja mobilna
Nie zawsze masz urządzenia, które trzeba przetestować pod kątem zgodności, prawda? Zdalne debugowanie prawdziwych urządzeń daje najlepsze wrażenia z wydajności i dotyku. Teraz możesz realistycznie emulować wiele cech urządzeń na komputerach, oszczędzając czas i znacznie przyspieszając pętlę iteracji.
Emuluj rozmiar ekranu, devicePixelRatio i <meta viewport> za pomocą pełnej symulacji zdarzeń dotyku
Dotychczasowa funkcja Dane o urządzeniach jest teraz dostępna w dużym stopniu. Nasz zespół ciężko pracował nad tym, aby nowa emulacja urządzeń mobilnych pozwalała w niemal realistyczny sposób prezentować to, co można zobaczyć na prawdziwym urządzeniu. Na przykład przeglądarki WebKit utrzymują złożony algorytm automatycznego określania rozmiaru tekstu, a w rzeczywistości każde urządzenie ma własny „współczynnik” zwiększający automatycznie rozmiar tekstu, który pomaga utrzymać czytelność. W trybie emulacji możesz sprawdzić, czy takie działanie jest stosowane, i zobaczyć wyniki.
Współczynnik pikseli urządzenia
Do tej pory nie dało się zobaczyć, co można zobaczyć na urządzeniach o niskiej jakości obrazu o wysokiej rozdzielczości. Emulacja dPR w Narzędziach deweloperskich dostosuje widok, aby umożliwić Ci powiększenie ekranu w najbardziej szczegółowych ustawieniach DPI. Możliwe też, że to ustawienie będzie odzwierciedlać to ustawienie: window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) itp., dzięki czemu zobaczysz, jak aplikacja dostosowuje się, w tym wczytywane zasoby w poszczególnych rozdzielczościach dpi.
Emulacja urządzenia nie obejmuje wszystkich funkcji ani błędów przeglądarki. Podczas emulacji iOS WebGL będzie więc działać i nie będzie występował błąd powiększenia w orientacji iOS 5. Aby przekonać się o tej zmienności, skorzystaj z urządzenia.
Właściwa emulacja aplikacji <meta viewport> (i @viewport)
Testowanie działania aplikacji width=device-width i minimum-scale:1.0 do tej pory odbywało się tylko na urządzeniach. Możesz teraz szybko wypróbować różne widoczne obszary i obserwować, jak są renderowane.
Symulacja zdarzenia dotknięcia
Ustawienie emulacji ekranu dotykowego spowoduje, że kliknięcia będą interpretowane jako touchstart itd. Działają też zdarzenia syntetyczne, takie jak powiększenie, przewijanie i przesuwanie. Aby powiększyć treści przez ściągnięcie palców, wystarczy shift+przeciągnąć lub shift+przewinąć w celu powiększenia treści. Będziesz mieć wtedy wspaniały widok na zawartość powiększającą się poza widoczny obszar.
Funkcje gotowości, w tym informacje dotyczące podszywania się pod klienta użytkownika (zarówno na poziomie nagłówka żądania, jak i na poziomie window.navigator), geolokalizacji i emulacji orientacji, pozwolą Ci poznać wszystkie możliwości urządzenia.
Gotowe ustawienia urządzenia
Dzięki gotowym ustawieniom emulacji możesz wybrać telefon lub tablet i ustawić odpowiedni rozmiar ekranu (dPR, UA) oraz emulować zdarzenia dotyku i widocznego obszaru. Możesz wypróbować określone gotowe ustawienia lub z łatwością dostosowywać wszystkie parametry po kolei.
Wejdź na devtools.chrome.com, aby zobaczyć pełną dokumentację dotyczącą emulacji mobilnej z Narzędziami deweloperskimi
Pokaz
Aby zobaczyć pełną prezentację wszystkich tych funkcji w praktyce, obejrzyj moją 23-minutową prezentację z Chrome Dev Summit w Narzędziach deweloperskich na urządzenia mobilne: