Bycie programistą internetowym w dzisiejszym świecie oznacza wspieranie zestawu urządzeń i platform, co może czasem okazać się zniechęcającym zadaniem. Nawet z najlepiej zaprojektowanym kodem zgodnym z najnowszymi standardami internetowymi nadal możesz zauważyć, że niektóre części Twojej witryny mogą nie wyglądać lub działać tak, jak chcesz, na niektórych urządzeniach lub rozdzielczościach. W obliczu wyzwania związanego z obsługą tak szerokiej gamy scenariuszy posiadanie odpowiednich narzędzi do symulacji może być nieocenione.
Jeśli jesteś jednym z wielu programistów używających komputera Mac, narzędzie programistyczne Safari zawsze się przydaje. Wraz z wydaniem Safari 9 zakres tej funkcjonalności znacznie się rozszerzył, głównie dzięki trybowi Responsive Design, który umożliwia podgląd sposobu renderowania witryny na różnych rozdzielczościach ekranu, a także na różnych kompilacjach iPadów, iPhone'ów i iPodów touch.
W tym samouczku opisano sposób aktywowania trybu projektowania responsywnego, a także sposobu jego wykorzystania do potrzeb związanych z rozwojem.
Preferencje przeglądarki Safari
Najpierw otwórz przeglądarkę Safari.
Kliknij Safari w menu przeglądarki, znajdującym się u góry ekranu. Po wyświetleniu menu rozwijanego wybierz opcję Preferencje opcja zaznaczona kółkiem w pokazanym przykładzie.
Uwaga: Zamiast wyżej wymienionego elementu menu można użyć następującego skrótu klawiaturowego: COMMAND + COMMA (,)
02 z 05Pokaż menu programowania
Okno preferencji Safari powinno być teraz wyświetlane, nakładając się na okno przeglądarki. Najpierw kliknij zaawansowane ikona reprezentowana przez bieg i znajduje się w prawym górnym rogu okna.
Preferencje zaawansowane przeglądarki powinny być teraz widoczne. U dołu znajduje się opcja z dołączonym polem wyboru, oznaczonym etykietą Pokaż menu rozwijane na pasku menu i zakreślone w powyższym przykładzie. Kliknij pole wyboru, aby aktywować to menu.
03 z 05Wejdź w tryb projektowania responsywnego
Nowa opcja powinna być teraz dostępna w menu Safari, umieszczonym u góry ekranu, oznaczonym etykietą Rozwijać się. Kliknij tę opcję.
Po wyświetleniu menu rozwijanego wybierz Wejdź w tryb projektowania responsywnegokrąży w pokazanym przykładzie.
Uwaga: Zamiast wyżej wymienionego elementu menu można użyć następującego skrótu klawiaturowego:OPCJA + POLECENIE + R
04 z 05Responsywny tryb projektowania
Aktywna strona internetowa powinna teraz być wyświetlana w trybie projektowania responsywnego, jak pokazano w powyższym przykładzie. Wybierając jedno z wymienionych urządzeń z systemem iOS, takich jak iPhone 6 lub jedną z dostępnych rozdzielczości ekranu, takich jak 800 x 600, można natychmiast wyświetlić sposób renderowania strony na tym urządzeniu lub w tej rozdzielczości wyświetlania.
Oprócz pokazanych urządzeń i rozdzielczości, możesz także poinstruować Safari, aby zasymulował innego agenta użytkownika - na przykład z innej przeglądarki - klikając menu rozwijane pokazane bezpośrednio nad ikonami rozdzielczości.
05 z 05Opracuj menu: Inne opcje
Oprócz trybu Responsive Design, menu Develop w Safari 9 oferuje wiele innych użytecznych opcji, z których niektóre są wymienione poniżej.
- Otwórz stronę z: Pozwala otworzyć aktywną stronę internetową w dowolnej innej przeglądarce aktualnie zainstalowanej na komputerze Mac.
- Agent użytkownika: Zmiana agenta użytkownika powoduje, że serwery internetowe identyfikują twoją przeglądarkę jako coś innego niż Safari 9.
- Połącz z Web Inspector: Przeglądarka Safari 9 wyświetla wszystkie zasoby strony internetowej, zapewniając możliwość przeglądania informacji CSS, danych DOM i struktury, a także jej natywnego kodu źródłowego.
- Pokaż konsolę błędów: Jest to jedna z najczęściej używanych opcji w menu rozwijanym. Ta konsola wyświetla błędy i ostrzeżenia JavaScript, HTML i XML.
- Pokaż źródło strony: Umożliwia przeglądanie i wyszukiwanie kodu źródłowego aktywnej strony sieci Web.
- Pokaż zasoby strony: Wybranie tej opcji powoduje wyświetlenie dokumentów, skryptów, CSS i innych zasobów z bieżącej strony.
- Pokaż Edytor snippetów: Zapewnia możliwość edytowania i wykonywania fragmentów kodu, w przeciwieństwie do całej strony. Ta funkcja jest bardzo przydatna z perspektywy testowania.
- Pokaż narzędzie do tworzenia rozszerzeń: Pozwala budować własne rozszerzenia Safari, odpowiednio pakując kod i dołączając metadane.
- Rozpocznij nagrywanie na osi czasu: Rejestruje wiele elementów, w tym żądania sieciowe, wykonywanie skryptów JavaScript, renderowanie stron i inne zdarzenia z okresu zdefiniowanego przez użytkownika, które można wyświetlić w inspektorze WebKit.
- Puste pamięci podręczne: Kliknięcie tej opcji powoduje usunięcie całej przechowywanej pamięci podręcznej w Safari, a nie tylko standardowych plików pamięci podręcznej witryny.
- Wyłącz pamięć podręczną: Gdy buforowanie jest wyłączone, zasoby są pobierane ze strony internetowej za każdym razem, gdy wykonywane jest żądanie dostępu w przeciwieństwie do korzystania z lokalnej pamięci podręcznej.
- Zezwalaj na JavaScript z pola wyszukiwania inteligentnego: Domyślnie wyłączone ze względów bezpieczeństwa, ta funkcja umożliwia wprowadzanie adresów URL zawierających JavaScript w pasku adresu Safari.
- Traktuj certyfikaty SHA-1 jako niepewne: Skrót od algorytmu Secure Hash Algorytm SHA-1 okazał się mniej bezpieczny niż pierwotnie sądzono, stąd dodanie tej opcji w Safari 9.
