„Sekret” DevTools dla programistów Mobile Web

.

Adil Aliyev

Follow

Nov 29, 2018 – 3 min read

Specjalny wpis gościnny od członka zespołu Samsung Internet Engineering Group, Adila!

Narzędzia deweloperskie dostarczane przez przeglądarki są stałym towarzyszem wielu twórców stron internetowych. Możemy ich używać do sprawdzania naszego kodu, informowania nas o błędach i przeprowadzania różnych audytów. Narzędzia deweloperskie w Chrome umożliwiają także dostosowanie rozmiaru ekranu do urządzenia mobilnego. Ta funkcja jest często używana przez wielu programistów. Jedną z pomocnych cech tej funkcji jest to, że możesz wybrać jedno z popularnych urządzeń mobilnych, a DevTools dostosuje rozmiar ekranu dokładnie do tego samego urządzenia. W ten sposób możemy testować i debugować strony internetowe z uwzględnieniem rozmiaru urządzenia mobilnego.

Chrome DevTools w trybie urządzenia mobilnego

Chrome DevTools nie służy tylko do sprawdzania elementów DOM i atrybutów CSS. Możemy go wykorzystać również do badania żądań sieciowych i parametrów związanych z pamięcią masową. Co więcej, można bezpośrednio uruchomić kod JavaScript i zobaczyć komunikaty z konsoli. Czyż nie jest to niesamowite?

Załóżmy teraz, że masz w ręku telefon komórkowy i zdarzają się specyficzne problemy, szczególnie na tym urządzeniu, a Ty nie jesteś w stanie odtworzyć problemu używając DevTools i metody zilustrowanej powyżej. Albo wyobraź sobie sytuację, w której Twoja mobilna przeglądarka posiada specyficzne API, a Ty chcesz je debugować. W tym przypadku, trzeba DevTools na telefonie komórkowym.

Co może nie zdajesz sobie sprawy, że można użyć DevTools pulpitu do debugowania Blink oparte przeglądarki (takie jak Samsung Internet) na urządzeniach z systemem Android, jak również.

Aby to zrobić, najpierw włącz „Debugowanie USB” na swoim urządzeniu z Androidem i podłącz je do komputera.

Teraz ekscytująca część. Wejdź na adres URL „chrome://inspect”, a następnie kliknij na „Urządzenia”. Hurra! Zobaczysz listę aktywnych sesji przeglądarki z Twojego urządzenia mobilnego.

Kliknij na „Inspect,” a zobaczysz widok przeglądarki na swoim komputerze. Teraz możesz wykonywać dowolne operacje za pomocą narzędzi DevTools.

Dostęp do listy urządzeń mobilnych możesz uzyskać również za pomocą opcji Urządzenia zdalne z menu DevTools.

Mam nadzieję, że z przyjemnością skorzystasz z tej techniki, aby ułatwić sobie debugowanie na urządzeniach mobilnych!