Nowy tryb urządzenia dla pokolenia, które stawia na urządzenia mobilne
Mniej więcej rok temu wprowadziliśmy tryb urządzenia, czyli sposób na emulowanie urządzeń i działanie z elastycznymi projektami. Teraz nadszedł czas na pierwszą dużą aktualizację, która rozpocznie się w Chrome 49. Co nowego?
W Narzędziach deweloperskich w Chrome punktem wyjścia staje się mobilność. W przeszłości oferowaliśmy sposoby emulacji urządzeń mobilnych, ale domyślnie używano komputerów. Emulacja urządzeń mobilnych musiała być zawsze włączona. Teraz, gdy korzystanie z witryn mobilnych w wielu miejscach wyprzedziło korzystanie z witryn na komputery, zmieniamy też naszą pozycję w Narzędziach dla programistów.
Co nowego?
Przede wszystkim interfejs został uproszczony i zajmuje znacznie mniej miejsca. Spodziewamy się, że nowy tryb urządzenia stanie się głównym trybem programowania dla większości użytkowników, dlatego wymagaliśmy czystego i prostego projektu, który rozszerza główny pasek nawigacyjny DevTools.
Nowa linijka szybkiego przewijania urządzenia nad zapytaniami dotyczącymi multimediów.
Ponadto wyśrodkowaliśmy widok w oknie przeglądarki i dodaliśmy nową linijkę z szybkim przełączaniem się między urządzeniami u góry. Jest to przydatne podczas projektowania stron responsywnych, ponieważ daje ona wyobrażenie o najczęstszych rozmiarach urządzeń.
I wreszcie, w miarę możliwości wiele opcji zostało połączonych lub ukrytych za pomocą przełącznika. Te nowe opcje kompozytowe znacznie ułatwiają przełączanie się między trybami. Aby włączyć lub wyłączyć określone elementy sterujące lub dostosować pasek narzędzi, kliknij ikonę menu z 3 kropkami.
Domyślnie responsywne
Główny pasek narzędzi DevTools jest teraz dostępny po lewej stronie okna przeglądarki i zawiera najważniejsze narzędzia do emulowania różnych urządzeń mobilnych i komputerów. Do wyboru masz 2 tryby tworzenia:
- Elastyczne
- Konkretne urządzenie
W obu trybach widok jest umieszczony w oknie, którego rozmiar można zmieniać w Chrome. Ta funkcja ma tę istotną zaletę, że możesz zmaksymalizować okno przeglądarki i DevTools w sposób, który Ci odpowiada, i nie musisz ich przenosić, gdy testujesz różne rozmiary strony i przeskakujesz między nimi.
Tryb responsywny to tryb, który warto włączyć podczas aktywnej iteracji, aby mieć pewność, że witryna działa na różnego rodzaju urządzeniach, a nie tylko na kilku konkretnych. W tym trybie uchwyty obok widocznego obszaru można dowolnie zmieniać.
Konkretne urządzenie oznacza, że wybierasz konkretne urządzenie i blokujesz widoczny obszar na jego rozmiar. Jest to przydatne, gdy chcesz wprowadzić ostatnie poprawki i poprawki dotyczące kilku popularnych urządzeń tuż przed premierą. Dlatego w menu nie wyświetlamy ogromnej listy wszystkich rodzajów urządzeń, ale tylko te, które są obecnie najpopularniejsze. Jeśli wybierzesz jedną z nich, dołożymy wszelkich starań, aby była jak najbardziej zbliżona do prawdziwej: emulujemy zdarzenia dotykowe, klienta użytkownika, widok, ramkę urządzenia i interfejs użytkownika (jeśli jest dostępny).
Zintegrowane debugowanie zdalne
Nawet najlepsze emulacje mają swoje ograniczenia. Są pewne rzeczy, których emulacje nie mogą obecnie wykonać, na przykład:
- Sprawdź, czy przycisk jest wystarczająco duży dla Twojego kciuka.
- Sprawdź wydajność witryny na wolniejszym telefonie.
- Debugowanie losowych problemów i ograniczeń niektórych urządzeń.
Aby odpowiednio przetestować wszystkie te scenariusze, musisz przetestować, pracować i debugować za pomocą rzeczywistych urządzeń fizycznych.
Od jakiegoś czasu możesz otworzyć stronę chrome://inspect, połączyć urządzenie przez USB i otworzyć sesję zdalnego debugowania za pomocą Narzędzi deweloperskich. Poszliśmy jednak o krok dalej i zrefaktoryzowaliśmy wygląd i działanie debugowania zdalnego, umieszczając je w rdzeniu DevTools. Zamiast przechodzić na inną stronę, możesz teraz otworzyć okno Sprawdzanie urządzeń bezpośrednio w nowym menu głównym. Dzięki temu znacznie łatwiej jest włączyć debugowanie fizyczne do przepływu pracy – wystarczy podłączyć telefon, nie trzeba zamykać DevTools.
Nowe miejsce dla pozostałych opcji emulacji
Ponieważ w całej przeglądarce DevTools domyślnie wyświetlana jest wersja mobilna, funkcje takie jak ograniczanie przepustowości sieci zostały przeniesione do odpowiednich miejsc, w tym przypadku do panelu sieci.
Niektóre funkcje, takie jak emulacja czujników czy ustawienia renderowania, np. emulacja mediów drukowanych, zostały przeniesione do spójnego miejsca w Szufladzie. Wszystkie dodatkowe funkcje znajdziesz w nowym menu głównym w sekcji „Więcej narzędzi”.
Wiemy, że jest to znacząca zmiana, do której wszyscy musimy się przyzwyczaić. Pełny opis wszystkich funkcji znajdziesz w niedawno zaktualizowanych dokumentach na temat trybu urządzenia. Chętnie poznamy Twoją opinię na Twitterze. Jeśli potrzebujesz więcej niż 140 znaków, skorzystaj z naszego śledzika błędów (tak, nawet w przypadku próśb o dodanie funkcji).