Tworzenie aplikacji na urządzenia mobilne powinno być równie proste jak tworzenie aplikacji na komputery. Pracowaliśmy nad narzędziami deweloperskimi Chrome, aby ułatwić Ci pracę. Nadszedł czas na przedstawienie nowych funkcji, które znacznie ułatwią Ci tworzenie stron internetowych na urządzenia mobilne. Najpierw debugowanie zdalne, a potem zaprezentujemy prawidłową emulację urządzeń mobilnych.
Przesyłanie obrazu z ekranu urządzenia na pulpit
Do tej pory podczas debugowania zdalnego trzeba było przełączać wzrok między urządzeniem a devtools. Teraz Screencast wyświetla ekran urządzenia obok narzędzi deweloperskich. Widzieć to dobrze, ale wchodzić w interakcję jeszcze lepiej:
- Kliknięcia na nagraniu ekranu są przekształcane w kliknięcia palcem, a odpowiednie zdarzenia dotyku są wywoływane na urządzeniu.
- Sprawdzanie elementu na urządzeniu za pomocą wskaźnika na komputerze
- Pisanie na klawiaturze komputera – wszystkie naciśnięcia klawiszy są wysyłane na urządzenie. To ogromna oszczędność czasu w porównaniu z pisaniem za pomocą kciuków.
- Przewijaj stronę, przesuwając kursor lub przesuwając palcem po trackpadzie laptopa.
Pełna dokumentacja dotycząca nagrywania ekranu zawiera te i inne informacje, np. o gescie powiększania przez zbliżanie i oddalanie. Wymaga Chrome na Androida w wersji beta (m32).
Łatwe debugowanie zdalne
18 miesięcy temu Chrome wprowadziło prawidłowe debugowanie zdalne w przeglądarkach WebKit, ale jeśli próbowałeś/próbowałaś to zrobić w tamtym czasie, musiałeś/musiłaś pobrać pakiet SDK Androida o rozmiary 400 MB, dodać plik binarny adb do pliku $PATH i wykonać kilka magicznych zaklęć na linii poleceń.
Z przyjemnością informujemy, że możesz o tym zapomnieć. Chrome może teraz wykrywać urządzenia podłączone przez USB i wymieniać z nimi dane. W Chrome wdrożyliśmy protokół adb bezpośrednio przez USB, dzięki czemu możesz łatwo przejść do Menu > Tools > Inspect Devices i od razu rozpocząć sesję debugowania zdalnego.
Ta funkcja działa świetnie na wszystkich platformach, w tym w systemie operacyjnym Chrome OS, ale w systemie Windows musisz najpierw zainstalować odpowiednie sterowniki USB, aby komunikować się z urządzeniem. Jeśli nigdy wcześniej nie próbowałeś/próbowałaś tego zrobić, musisz też włączyć debugowanie USB na urządzeniu i potwierdzić, że używasz Chrome na Androida w wersji beta. Przeczytaj pełną dokumentację.
Przekierowanie portów w przypadku projektów lokalnych
Programujesz na localhost:8000, ale Twój telefon nie może się połączyć z tą usługą. Dlatego dodaliśmy przekierowanie portów bezpośrednio do procesu debugowania zdalnego. Teraz możesz łatwo pracować nad pełnymi projektami bez konieczności stosowania sztuczek związanych z tunelami. Na stronie about:inspect kliknij Przekierowywanie portów, aby ustawić, które porty mają być dostępne. Jeśli wszystko będzie w porządku, porty zaświecą się na zielono.
Emulacja urządzeń mobilnych
Nie zawsze masz urządzenia, których potrzebujesz do przetestowania zgodności. Chociaż zdalne debugowanie na prawdziwych urządzeniach zapewnia najlepszą wydajność i odczucie dotykowe, możesz teraz realistycznie emulować wiele właściwości urządzeń na komputerze, co pozwoli Ci zaoszczędzić czas i przyspieszyć iteracje.
Emulowanie rozmiaru ekranu, devicePixelRatio i <meta viewport> przy pełnej symulacji zdarzeń dotykowych
Jeśli korzystasz z poprzedniej funkcji danych o urządzeniach, wiesz, że ta nowa jest znacznie lepsza. Nasz zespół dołożył wszelkich starań, aby nowa emulacja urządzeń mobilnych była jak najbardziej zbliżona do tego, co widzisz na prawdziwych urządzeniach. Na przykład przeglądarki WebKit utrzymują złożony algorytm automatycznego dostosowywania tekstu. W zasadzie każde urządzenie ma określony „współczynnik” automatycznego dostosowywania tekstu, który zmienia się, aby tekst był czytelny. W trybie emulacji możesz sprawdzić, czy to zachowanie zostało zastosowane, i zobaczyć wyniki.
Współczynnik pikseli urządzenia
Do tej pory było prawie niemożliwe, aby zobaczyć, co wyświetla urządzenie o wysokiej rozdzielczości na urządzeniu o niskiej rozdzielczości. Teraz emulacja dPR w DevTools dostosuje widok, aby umożliwić powiększenie w sytuacji wysokiej rozdzielczości. Dodatkowo możesz oczekiwać, że window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) itd. będą odzwierciedlać Twoje ustawienia, co pozwoli Ci zobaczyć, jak aplikacja się dostosowuje, m.in. wczytując różne zasoby dla różnych wartości dpi.
Emulacja urządzenia nie obejmuje wszystkich funkcji ani błędów przeglądarki. Podczas emulacji iOS WebGL będzie nadal działać i nie wystąpi problem z powiększeniem orientacji w iOS 5. Aby zobaczyć tę zmienność, przejdź do urządzenia.
Prawidłowa emulacja <meta viewport> (i @viewport)
Testowanie zachowania width=device-width i minimum-scale:1.0 w przypadku gry, która wcześniej była grą tylko na urządzeniu. Teraz możesz szybko wypróbować różne widoki i obserwować, jak są renderowane.
Symulacja zdarzeń dotyku
Ustawienie naśladowania ekranu dotykowego sprawi, że kliknięcia będą interpretowane jako touchstart itd. Dostępne będą też zdarzenia syntetyczne, takie jak powiększanie, przewijanie i przesuwanie. Aby powiększyć obraz, wystarczy shift+przeciągnąć lub shift+przewinąć, aby powiększyć treść. Dzięki temu możesz dokładnie zobaczyć, jak treści są skalowane poza widocznym obszarem.
W końcu możesz skorzystać z podwójnego spoofingu user-agenta (zarówno na poziomie nagłówka żądania, jak i window.navigator), geolokalizacji oraz emulacji orientacji, aby zapoznać się z pełną funkcjonalnością urządzenia.
Wstępnie ustawione urządzenia
Gotowe ustawienia emulacji umożliwiają wybranie telefonu lub tabletu i uzyskanie prawidłowego rozmiaru ekranu, dPR i UA zastosowanych na tym urządzeniu, a także emulację pełnych zdarzeń dotykowych i widowiska. Możesz wypróbować określone ustawienia wstępne lub łatwo dostosować te cechy pojedynczo.
Wejdź na stronę devtools.chrome.com, aby przeczytać pełne informacje o emulacji urządzeń mobilnych za pomocą Narzędzi deweloperskich.
Prezentacja
Aby zobaczyć pełne demonstracje wszystkich tych funkcji, obejrzyj 23-minutowy wykład z Chrome Dev Summit na temat Narzędzi deweloperskich w wersji mobilnej: