Agencja marketingowa

Ocean pomysłów?

Wiemy jak przekuć
je na sukces w Internecie!

 

Sprawdź nas

Zjedź na dół
niedziela, 19 maja 2019 07:00
Chrome DevTools - najlepszy przyjaciel programisty aplikacji webowych

Chrome DevTools - najlepszy przyjaciel programisty aplikacji webowych.

Chrome Devtools to zestaw narzędzi dla programistów aplikacji webowych, który jest wbudowany bezpośrednio w przeglądarkę Google Chrome. Narzędzie to służy zarówno do edycji stron internetowych, jak i szybkiej diagnozie problemów. Bez wątpienia to narzędzie jest przyjacielem każdego programisty aplikacji webowych.

1 Jak uruchomić DevTools?

Istnieje wiele sposobów otwierania Devtools:

  • jeżeli chcemy pracować z DOM lub CSS należy kliknąć PPM (prawy przycisk myszy) na dowolny element mieszczący się na stronie i wybrać opcję ZBADAJ.

Otworzenie okna DevTools

Można również przejść za pomocą skrótu klawiszy:

  • dla MAC comand + option + C
  • dla Windows, Lunux, Chrome OS: Control + Shift + I
  • lub Control + Shift + C, wtedy możemy wybrać bezpośrednio element, który chcemy zbadać.

Szybki podgląd

2 Najważniejsze elementy Devtools

W tym artykule skupię się na opisaniu najważniejszych elementów Devtools:

  • Elements
  • Console
  • Network
  • Performance, Memory
  • Sources

2.1 Elements

Zakładka Elements służy do łatwej edycji poglądowej strony. Mamy tutaj strukturę HTML oraz CSS aplikacji. Do elementów można dostać się poprzez kliknięcie w strukturze HTML. W tym momencie po prawej stronie pokazują nam się style CSS przypisane do tego elementu.

Widok okna devtools

Computed — pokazuje aktualne ustawienia elementów oraz pełną listę właściwości przypisanych do tego elementu HTML, klikając w strzałeczkę przy parametrze, przechodzimy do ustawień, gdzie jest ustawiony atrybut CSS.

Widok computed

:hov - służy do wymuszania stanów danego elementu, dzięki temu mamy możliwość podglądu stylu dla szukanego stanu. Mamy do wybrania następujące stany:

  • active — spełnia zasadę pseudoklasy :active od momentu przytrzymania LPM (lewego przycisku myszy) nad wybranym obszarem do momentu puszczenia.
  • hover — spełnia zasadę pseudoklasy :hover, gdy w danym momencie nad obszarem elementu znajduje się kursor myszy
  • focus — spełnia zasadę pseudoklasy :focus, gdy w danym momencie użytkownik skupił się na danym elemencie (np. za pomocą klawisza TAB)
  • visited — spełnia zasadę pseudoklasy :visited, gdy w danym momencie element jest odwiedzonym linkiem przez użytkownika.

2.2 Console

Służy do pisania kodu lub podglądu zarejestrowanych komunikatów, aby upewnić się, że kod działa zgodnie z oczekiwaniami.

Zakładka Console w Google Devtools

Konsola posiada różnego typu opcje wyświetlania komunikatów:

  • console.info — różni sie od console log tym, że jest ikona i przy listowaniu
  • console.group — pozwala na grupowaniu komunikatów, rozpoczyna się console.group(‘info’), a kończy console.groupEnd(‘info’)
  • console.groupCollapsed — pozwala zgrupowane komunikaty, jednocześnie jest przedstawiony za pomocą zwiniętych informacji
  • console.table — widok listowania logu jest przedstawiony za pomocą tabeli
  • console.time(‘start’) - pozwala na mierzeniu czasu dla wykonywanego kodu, rozpoczyna się console.time(‘test’), a kończy console.timeEnd(‘test’)

W konsoli możemy odwoływać się do elementów za pomocą $0 (element zaznaczony), $1, $2.. (elementy podrzędne) — są to obiekty, gdzie możemy dostać się bezpośrednio do ich pól, metod.

Debugowanie elementu

break-on -> subtree modifications — przerwanie przy debugowaniu, w momencie, gdy wybrany element zostanie zmodyfikowany, kod zostanie przerwany, dzięki temu łatwo znaleźć miejsce wystąpienia błędu.

2.3 Network

Network wykorzystujemy głównie do weryfikacji, czy zasoby pobierane oraz przesyłane są zgodne z oczekiwaniami. Najczęściej korzystamy z niej, gdy:

  • upewniamy się, czy requesty są pobierane i wysyłane
  • sprawdzamy właściwości pojedynczego zapytania — nagłówki, zawartość, wynik zapytania.
  • sprawdzamy czas wczytywania zasobów (możemy zobaczyć czas ładowania rozbity na poszczególne typy dziedziny czasu — zapytanie, TTFB — wartością podawaną w mikrosekundach mierzoną od momentu wysłania zapytania, do chwili otrzymania przez użytkownika pierwszego bajtu danych wysłanych przez serwer)

Networki w łatwy sposób możemy filtrować, należy wybrać filtruj — zaznaczony lejek poniżej. Umożliwia nam to filtrowanie rodzaju zapytań (XHR, JS, CSS, Img itd…). Posiada również opcji symulowania prędkości łącza — zaznaczono na poniżej.

Sprawdzanie requestów na stronie

2.4 Performance, Memory

Przy tworzeniu aplikacji istotne jest tworzenie optymalnego kodu, żeby aplikacja nie była przeciążona. Do tego wykorzystuj symulację oraz badaj pamięć, aby zapobiec obniżeniu wydajności aplikacji oraz zapobiec wyciekom pamięci.

Szczegółowe zasady analizy pod kątem zużycia CPU oraz pamięci opisuje Google.

Symulacja obciążenia

2.5 Sources

Znajdziemy tutaj pełnoprawny edytor, w którym możemy wykonywać edycję czy debugowanie. Możemy tutaj dodać projekt lokalny poprzez wybranie Filesystem -> Add folder to workspace, teraz należy wybrać folder projektu oraz zezwolić na dostęp.

Wszystkie pliki w tym momencie są dostępne z poziomu DevTools. Przyśpiesza nam to pracę przy debugowaniu. W przypadku, gdy mamy tablicę obiektów składającą się z 1000 elementów niewygodne jest przechodzenie krok po kroku, aż do spełnienia warunku. W tym momencie możemy napisać:

if(user.name==”rekin”) debugger;

Debugger zostanie wywołana w momencie, gdy warunek zostanie spełniony.

2.6 Testowanie responsywności

Responsywność aplikacji możemy badać w 2 sposoby:

Do badania poprzez telefon potrzebujemy telefonu podłączonego do komputera oraz odpowiedniej przeglądarki. Dla telefonu z systemem android będzie to oczywiście Google Chrome, dla iphonów Safari.

Debugowanie za pomocą telefonu źródło: https://developers.google.com/web/tools/chrome-devtools/remote-debugging//

 

Należy wybrać Customize and control DevTools -> More tools -> Remote devices.

Remote Device

Jeżeli mamy podłączony telefon należy ustawić port i adres serwera, następnie otworzyć stronę. Szczegółową instrukcję znajdziecie w dokumentacji Google. Warto tutaj zaznaczyć, że taki sposób badania aplikacji pozwala nam uniknąć błędów symulatora Google Chrome, ponieważ korzystamy z urządzenia.

3 Najważniejsze skróty

  • Control + Shift + I — otworzenie okna DevTools,
  • Control + Shift + C — otworzenie okna DevTools z wybranym bezpośrednio, elementem, który chcemy zbadać,
  • Control + Shift + M — przełączenie widoku do badania responsywności,
  • Control + Shift + J — włączenie widoku konsoli,
  • Control + K — czyszczenie konsoli,
  • Control + F — otworzenie wyszukiwania,
  • Control + [ lub Control + ] — przechodzenie po oknach Dev Tools (elements,console, network itd…)
  • Control + Shift + P — skrót ten umożliwia szybki dostęp do opcji DevTools znany w takich edytorach jak Atom czy VS Code.
  • Control + Shift + R — Twardy reset

4 Podsumowanie

Podsumowując dzisiejszy artykuł, pragnę podkreślić, że nie wyobrażam sobie pracy bez narzędzia takiego jak DevTools. Daje nam on szereg możliwości badania aplikacji, czy strony pod wieloma względami, począwszy od sprawdzenia właściwości stylowych poprzez badanie i symulację aplikacji w różnych warunkach. W wielu przypadkach musiałem korzystać z inspekcji poprzez telefon, ponieważ symulator nie wykazywał błędów. Dzięki temu narzędziu tworzona przez nas strona lub aplikacja staje się wydajniejsza oraz bardziej dostosowana do wymagań użytkowników.

Paweł Tyrpuła
Paweł Tyrpuła

image

Poczuj się jak Rekin w wodzie!

Efektywność to najważniejszy parametr cechujący skuteczne działania w Internecie. Agencja marketingowa RekinySukcesu.pl wie jak osiągnąć wysoką efektywność w błękitnym i czerwonym oceanie marketingu.

Ponad 100 zadowolonych Klientów, ponad 300 przeszkolonych osób, a nam ciągle mało. Już więcej niż 9 lat spędzili użytkownicy na wykonanych przez agencję interaktywną Wrocław stronach internetowych. Dzięki temu o Twoim Kliencie wiemy wszystko, a nawet i więcej. Nie uznajemy kompromisów. Dlatego warto kliknąć w jeden z przycisków poniżej.

 

Konfigurator Kontakt

Rekiny Mobile Menu