Kto korzysta z DevTools?

Webdev

Testerzy

Python

?

?

* podzielcie się informacją ile faktycznie korzystacie z DevTools :-)

Dla kogo jest ta prezentacja?

Python

Testerzy

Webdev

Czyli same "użyteczne" oraz najczęściej wykorzystywane funkcje :)

Zakładka "Elements"

Co możemy za jej pomocą zrobić?

1. Manipulacja elementami HTML (dodawanie, usuwanie, przenoszenie, kopiowanie itd.)
    
2. Scrollowanie do danego elementu HTML jednym kliknięciem
    
3. Dodawanie breakpointów na zmianę DOM (zmiana elementów w danym poddrzewie, zmiana atrybutów elementu, usunięcie elementu)
    
4. Podgląd stylów CSS danego elementu, obsługuje również mapy z plików SCSS (pokazuje występowanie deklaracji z oryginalnego pliku)
    
5. Edycja stylów CSS, dodawanie własnych reguł CSS (tymczasowo)
    
6. Podgląd zbioru wszystkich właściwości CSS danego elementu, pokazywanie miejsca występowania danej deklaracji CSS (w jakim pliku, która linia itd.)
    
7. Properties DOM (zbiór obiektów) danego elementu
    
8. Aktywacja pseudoklas elementu (:hover, :active, :focus, :visited)
    
9. Graficzna prezentacja box-model (wymiary, marginesy itd.) elementu

Zakładka "Console"

Co możemy za jej pomocą zrobić?

1. Pokazywanie błędów oraz warningów JavaScript
    
2. console.log z kodu JS
    
3. Pokazywanie, że odbył się request XHR (XMLHttpRequest)
    
4. Pełne środowisko JavaScript + metody i funkcje przeglądarki
    
5. Możemy wykonywać w console dowolny kod JavaScript, definiować funkcje, zmienne itd.
    

Przydatne funkcje:

// pokazuje w konsoli dany Event po jego wykonaniu
monitorEvents(document.body, "click"); unmonitorEvents(document.body);

// pokazuje w konsoli czas wykonania skryptu
console.time();
var arr = new Array(10000);
for (var i = 0; i < arr.length; i++) {
  arr[i] = new Object();
}
console.timeEnd();

Zakładka "Sources"

Co możemy za jej pomocą zrobić?

1. Podgląd wszystkich plików, jakie musiała wczytać przeglądarka podczas przeglądania danej witryny (również z innych domen) czyli CSSy, JSy, obrazki itd.
    
2. Edycja tych plików lokalnie
    
3. Poprawny podgląd zminifikowanych plików, obsługa map plików JS
    
4. Zapisywanie obrazków jako data URI
    
5. Dodawanie plików do folderu Workspace (przeglądarka pobiera wtedy dane pliki z twojego lokalnego folderu, zastępując nimi pliki pobierane z serwera, we wszystkich referencjach)
    
6. Wyświetlanie plików z wtyczek Google Chrome
    
7. Dodawanie swoich snippetów JS (zapisywanie ich w przeglądarce i korzystanie na wielu stronach)
    
8. Narzędzia do kontroli wykonywania skryptów JS (breakpointy, eventy itd.)

Zakładka "Network"

Co możemy za jej pomocą zrobić?

1. Sprawdzić wszystkie requesty
2. Podejrzeć headery
3. Zobaczyć response
4. Blokować requesty
5. Replay XHR (ale bez edycji)
6. Kopiowanie requesta jako skrypt cURL
7. Timeline oraz czasy poszczególnych requestów
8. Zapisywanie requestów jako HAR
9. Network Throttling Profiles (parametry internetu, np. mobile)
10. Timeline ze screenshotami ładowania strony
11. Statystyki DOMContentLoaded, Load, Transfer, Disable Cache

WADY:

- brak możliwości ręcznej zmiany parametrów i ponownej wysyłki requesta (konieczność korzystania z dodatkowych pluginów, natywnie w Firefox)

Co to jest HAR?

pliki HAR:

• inaczej archiwum HTTP
• obiekt JSON z określonym układem pól
• wszystkie requesty są tam zapisywane ze szczegółami
• wyeksportowany HAR możemy wizualizować w innym narzędziu
• import HAR w przeglądarce pozwala na automatyczne wywołanie zapisanych requestów z takimi samymi parametrami
• czasami używany do testów automatycznych :-)

Zakładka "Application"

Co nas w niej interesuje?

1. Local Storage
2. Session Storage
3. Cookies

Local / Session Storage

• usuwanie kluczy
• zmiana nazw kluczy
• zmiana wartości
• dodawanie nowych kluczy

Toggle device toolbar
podgląd strony w "symulowanych" urządzeniach

Co możemy z tym zrobić?

1. Zobaczyć, jak wygląda nasza strona na urządzeniu mobilnym (telefon lub tablet)
    
2. Przeglądarka symuluje również User Agent (nagłówek specyficzny dla konkretnego urządzenia, jego wersji systemu, rodzaju oraz wersji przeglądarki) danego urządzenia
    
3. Podgląd Device Pixel Ratio specyficzne dla danego urządzenia
    
4. Widok wertykalny oraz horyzontalny
    
5. Symulowanie prędkości sieci komórkowej
    
6. Podgląd zastosowanych breakpointów w naszym projekcie
   (te kolorowe paski na górze)

Zakładka "Performance"

Co możemy za jej pomocą zrobić?

1. Mierzymy wydajność naszej strony/aplikacji internetowej
    
2. Timeline wraz ze screenshotami zużycia CPU, GPU, ilości FPS,
   requestów, zużycia pamięci (JS HEAP)
    
3. Network oraz CPU throttling (na przykład urządzenie mobile)
    
4. MNÓSTWO innych statystyk, część z nich:
   - podsumowanie czasów Loadingu, Scriptingu, Renderingu itp.
   - Event Log (wszystko co musi zrobić przeglądarka)
    
5. Możliwość zapisania w formacie JSON wykonanego profilu performance

Zakładka "Memory"
tylko informacyjnie, dotyczy JSa

Co możemy za jej pomocą zrobić?

1. Robienie snapshotów zużycia zasobów
    
2. Szczegółowe zestawienia zużycia pamięci przez JavaScript i jego obiekty

Zakładka "Audits"
tylko informacyjnie, jako ciekawostka

Co możemy za jej pomocą zrobić?

1. Uruchamiamy "audyt" naszej strony (zbiór różnych czynności, jakim poddawana jest nasza strona real-time)
    
2. Sprawdzane są:
   - założenia i zgodność z Progressive Web App
   - wydajność strony (zarówno czasy ładowania jak i "performance" podczas użytkowania
   - poziom dostępności dla niepełnosprawnych strony
   - "Dobre praktyki", cokolwiek to znaczy dla Google :-)
    
3. Raport możemy wygenerować i zapisać w postaci JSON

Zakładka "Security"
tylko informacyjnie, jako ciekawostka

Co możemy za jej pomocą zrobić?

1. Sprawdzenie czy źródła naszej strony są przesyłane drogą szyfrowaną
    
2. Wyświetlanie szczegółów certyfikatów SSL
    
3. Diagnozowanie problemów z szyfrowaniem, przegląd alertów

Command Menu

Co możemy z tym zrobić?

1. Szybki dostęp do wielu funkcji
    
2. Otwieramy ctrl + shift + P (na Windows)
    
3. Możemy np. szybko wyłączyć JavaScript na stronie
   (polecenie Disabled JavaScript)
    
4. Możemy również w łatwy sposób robić screeny strony
   (polecenie Capture Screenshot)

Inne zakładki, funkcje

1. Zakładka Rendering:

    - emulacja CSS Media (print, screen)

    - ekranik ze statystykami FPS i GPU memory

    - pokazywanie borderów wszystkich elementów na stronie

    - podświetlanie elementów, które wykonują re-render

2. Zakładka Remote devices:

    - przekierowanie portów i adresów z PC na urządzenie mobilne podpięte pod          USB

    - debugowanie strony na PC podczas korzystania na urządzeniu mobilnym

3. Zakładka Network conditions:

    - disabled cache

    - włączenie custom User Agent

4. Zakładka Sensors:
    - wymuszenie Touch zamiast Click
    - ustawienie orientacji urządzenia (w trzech płaszczyznach)
    - ustawienie konkretnej geolokalizacji urządzenia

5. Zakładka Animations:
    - pokazanie wykresu rodzaju i czasu trwania animacji na stronie