Jak wyświetlić podgląd swojej witryny na różnych urządzeniach za pomocą Google Chrome

Tworząc witrynę, chcesz, aby była responsywna i dostosowywała się do różnych rozmiarów ekranu. Jednym ze sposobów sprawdzenia tego jest użycie wbudowanych narzędzi programistycznych Google Chrome.

DevTools w Chrome umożliwia debugowanie różnych aspektów Twojej witryny. Obejmuje to zmianę i podgląd kodu źródłowego HTML i CSS. Umożliwia także debugowanie kodu JavaScript po stronie klienta i przeglądanie ruchu sieciowego.

DevTools ma również opcję podglądu Twojej witryny na różnych urządzeniach. Obejmuje to różne typy urządzeń mobilnych, iPady, tablety i nie tylko.

Aby otworzyć pasek narzędzi urządzenia w przeglądarce Google Chrome, musisz otworzyć Okno Narzędzi dla programistów Chrome:

1. Otwórz stronę internetową.
2. Kliknij stronę prawym przyciskiem myszy i kliknij Sprawdzać.
3. Otworzy się okno Chrome DevTools. Może otwierać się z boku lub na dole przeglądarki albo jako nowe okno.
4. W lewym górnym rogu okna znajdują się dwie ikony. Kliknij ikonę, która pokazuje wiele urządzeń o różnych rozmiarach.
5. Ekran zmieni się, aby pokazać, jak witryna będzie wyglądać na urządzeniu mobilnym.

Jak przełączać się między różnymi urządzeniami

Użyj menu rozwijanego u góry paska narzędzi urządzenia, aby przełączać się między różnymi urządzeniami.

1. Na samej górze paska narzędzi wyświetli się typ urządzenia, na którym aktualnie przeglądasz swoją witrynę. Kliknij menu rozwijane, aby wybrać inne urządzenie z listy.
2. Zamiast wybierać istniejące urządzenie, możesz wybrać wyświetlanie witryny w trybie responsywnym. Kliknij menu rozwijane i wybierz Czuły opcja.
3. Obok menu możesz także wprowadzić niestandardową szerokość i wysokość urządzenia.
4. Zamiast wpisywać szerokość i wysokość, możesz także kliknąć i przeciągnąć rogi okna, aby dostosować rozmiar.

Jak dodać urządzenie niestandardowe

Jeśli chcesz zapisać niestandardową szerokość i wysokość, możesz dodać niestandardowe urządzenie. Na pasku narzędzi urządzenia zostanie wyświetlone nowe urządzenie w menu rozwijanym urządzeń.

1. Kliknij menu z listą wszystkich urządzeń.
2. Kliknij Edytować.
3. Upewnij się, że na pasku bocznym Ustawienia masz Urządzenia wybrana karta. Tutaj możesz również wyświetlić listę większej liczby urządzeń do wyboru.
4. Kliknij Dodaj niestandardowe urządzenie.
5. Wpisz nazwę, szerokość i wysokość urządzenia. Upewnij się również, że wybrałeś typ urządzenia, np. czy jest to urządzenie mobilne czy stacjonarne. Jeśli rozwiniesz Wskazówki dotyczące klienta użytkownika opcji, możesz dodać inne szczegóły, takie jak model urządzenia, marka lub wersja.
6. Kliknij Dodać.
7. Wróć do menu z listą wszystkich urządzeń. Zobaczysz swoje nowe niestandardowe urządzenie na liście.
8. Możesz później ponownie edytować te szczegóły, wracając do niestandardowej strony urządzenia. Kliknij na edytować obok nazwy urządzenia, aby rozpocząć edycję.

Możliwość podglądu witryny na różnych urządzeniach i rozmiarach ekranu jest bardzo przydatna z kilku powodów.

Po pierwsze, możesz przetestować wydajność swojej witryny na różnych urządzeniach. Niektóre telefony komórkowe mogą mieć większą prędkość sieci lub dławienie procesora niż inne.

Pasek narzędzi urządzenia umożliwia przełączanie między różnymi opcjami szybkości sieci. Dzięki temu możesz przetestować szybkość wszelkich połączeń z serwerem lub przetestować ładowanie i renderowanie danych w Twojej witrynie.

Dodatkowo możesz również zobaczyć, jak projekt wygląda na konkretnym urządzeniu, z punktu widzenia interfejsu użytkownika. Jeśli używasz Zapytania o media CSS, możesz użyć tego narzędzia, aby sprawdzić, czy działają zgodnie z oczekiwaniami.

Możesz użyć okna DevTools przeglądarki Google Chrome, aby przetestować, jak Twoja witryna dostosowuje się do różnych rozmiarów ekranu i upewnić się, że witryna jest responsywna. Możesz go również użyć do przetestowania wydajności swojej witryny i sprawdzenia, czy zapytania o media działają zgodnie z oczekiwaniami.

Możesz także użyć DevTools Google Chrome do innych celów. Możesz go użyć do debugowania wszelkich problemów CSS, zmieniając CSS na karcie Style w oknie Element. Pozwala to na natychmiastowe przeglądanie wszelkich zmian CSS, co może przyspieszyć proces kodowania.

Jak używać Google Chrome do debugowania CSS

Czytaj dalej