Nowy tryb urządzeń dla urządzeń mobilnych
Nieco ponad rok temu wprowadziliśmy Tryb urządzenia, czyli sposób emulowania urządzeń i elastycznego projektowania stron. Czas na pierwszą dużą aktualizację – począwszy od Chrome 49. Co nowego?
Komórki to podstawa w Narzędziach deweloperskich w Chrome. W przeszłości oferowaliśmy sposoby emulacji urządzeń mobilnych, ale domyślnym rozwiązaniem były komputery. zawsze trzeba było włączyć emulację urządzeń mobilnych. Teraz, gdy w wielu miejscach witryny mobilne przegoniły strony na komputery, zmieniamy swoją pozycję także w Narzędziach deweloperskich.
Co nowego?
Przede wszystkim interfejs jest prosty i zajmuje znacznie mniej miejsca. Spodziewamy się, że w większości przypadków nowy tryb urządzenia stanie się głównym trybem deweloperskim. Dlatego zadbaliśmy o przejrzysty i prosty układ interfejsu z obsługą głównego paska nawigacyjnego Narzędzi deweloperskich.
Nowa linijka do szybkich przeskoków nad zapytaniami o multimedia.
Wyśrodkowaliśmy widoczny obszar i umieściliśmy u góry nową linijkę, która ułatwia elastyczne projektowanie stron i pozwala zorientować się w rozmiarach najczęściej używanych urządzeń.
W miarę możliwości wiele opcji zostało połączonych lub ukrytych za pomocą przełącznika. Te nowe opcje zespolone znacznie ułatwiają przełączanie się między trybami. Aby przełączać elementy sterujące i dostosować działanie paska narzędzi, naciśnij ikonę menu z 3 kropkami.
Domyślna elastyczna
Główny pasek narzędzi Narzędzi deweloperskich rozwija się teraz do lewej strony okna przeglądarki i zawiera najważniejsze narzędzia do emulacji różnych urządzeń mobilnych i komputerów. Do wyboru masz 2 tryby programistyczne:
- Elastyczne
- Określone urządzenie
W obu trybach widoczny obszar znajduje się w Chrome jako osobne okno z możliwością zmiany rozmiaru. Ma to dużą zaletę, ponieważ pozwala maksymalnie wykorzystać okno przeglądarki i Narzędzia deweloperskie w sposób odpowiadający Twoim preferencjom, a także uniknąć przeskakiwania między nimi podczas testowania wielu rozmiarów strony i przełączania się między nimi.
Elastyczna to tryb, w którym najlepiej włączyć się podczas aktywnej iteracji, by mieć pewność, że witryna będzie działać na różnych urządzeniach, a nie tylko na kilku. W tym trybie uchwyty obok widocznego obszaru można dowolnie zmieniać.
Ustawienie Konkretne urządzenie odnosi się do sytuacji, w której wybierasz konkretne urządzenie i blokujesz widoczny obszar do rozmiaru. Przydaje się to, gdy chcesz wprowadzić ostatnie poprawki i aktualizacje dla kilku popularnych urządzeń w okresie przedpremierowym. Dlatego prezentujemy nie tylko ogromną listę różnych urządzeń, ale także te najpopularniejsze. Jeśli je wybierzesz, staramy się, by działała tak samo jak w rzeczywistości. Emulowane są zdarzenia kliknięcia, klienta użytkownika, widoczny obszar i interfejs urządzenia, a także interfejs użytkownika (jeśli jest dostępny).
Zintegrowane debugowanie zdalne
Emulacje, nawet najlepsze z dostępnych, są dostępne tylko do tej pory. Emulacje nie potrafią obecnie robić pewnych rzeczy, na przykład:
- Sprawdź, czy przycisk jest na tyle duży, by zmieścić się w kciuku.
- Przetestuj wydajność strony na wolniejszym telefonie.
- Debuguj losowe osobliwości i ograniczenia dotyczące określonych urządzeń.
Aby przetestować wszystkie te scenariusze, musisz przeprowadzić testy, pracować i debugować się na konkretnych urządzeniach fizycznych.
Przez jakiś czas możesz wejść na stronę chrome://inspect, podłączyć urządzenie przez USB i rozpocząć zdalną sesję debugowania w Narzędziach deweloperskich. Teraz pójdziemy o krok dalej i ponownie przyjrzymy się temu, jak wygląda i działa zdalne debugowanie, umieszczając je w podstawowym interfejsie Narzędzi deweloperskich. Zamiast przechodzić do innej strony, możesz teraz skorzystać z okna Zbadaj urządzenia bezpośrednio w nowym menu głównym. Bardzo ułatwia to włączanie debugowania fizycznego do przepływu pracy – wystarczy podłączyć telefon, bez wychodzenia z Narzędzi deweloperskich.
Nowe domy dla pozostałych ustawień emulacji
Ponieważ urządzenia mobilne są teraz domyślnym ustawieniem w Narzędziach deweloperskich, funkcje takie jak ograniczanie przepustowości sieci zostały przeniesione do odpowiednich ustawień głównych, w tym przypadku do panelu Network (Sieć).
Niektóre funkcje, takie jak emulacja czujników czy ustawienia renderowania (np. emulacja multimediów do drukowania), zostały przeniesione w jednolite miejsce w panelu. Wszystkie dodatkowe funkcje znajdziesz w nowym menu głównym, w sekcji „Więcej narzędzi”.
Wiemy, że to znacząca zmiana, do której wszyscy musimy się przyzwyczaić. Wszystkie materiały na ten temat znajdziesz w zaktualizowanych dokumentach dotyczących trybu urządzenia. Chętnie poznamy Twoją opinię na Twitterze. Jeśli potrzebujesz więcej niż 140 znaków, skorzystaj z naszego narzędzia do śledzenia błędów (tak, nawet w przypadku próśb o dodanie funkcji).