Devtools Chrome – anioł stróż webdevelopera

Loading Likes...

Dzisiaj coś niezwykle przydatnego w codzienności webdevelopera – narzędzie Devtools w przeglądarce Chrome. W innych przeglądarkach też się znajduje, ale nieco inaczej wygląda.

Devtools
Jak sama nazwa wskazuje, są to narzędzia, które ułatwiają życie developera. W chrome możemy otworzyć je za pomocą klawisza F12. Pojawi się okienko.

Legenda okienka Devtools:
1. Tutaj znajduje się nasz kod – ten sam, który mamy w naszym pliku html. Możemy zwijać i rozwijać dowolny element w naszym kodzie. Co więcej, możemy zmieniać ten kod dynamicznie. Kod ten nie jest zapisywany w naszym oryginalnym pliku, dlatego każde zmiany, które chcemy zachować, należy nanosić w oryginale. Możemy najechać kursorem na dany element w kodzie, wtedy automatycznie przeglądarka wskaże konkretny element na stronie kolorując go odpowiednimi kolorami.

2. Menu naszego okna Devtools.

3. Przydatna część naszego okna (jak zresztą większość rzeczy w tym oknie 🙂 ). W zaznaczonym miejscu widzimy całą gałąź naszych elementów. Od lewej rodzic i w prawą stronę potomkowie. Element po po prawej (np. body) jest dzieckiem elementu po lewej (w tym przykładzie dzieckiem html). W ten sposób schodzimy do coraz niższych poziomów w naszej stronie. W zależności od wielkości okna, w tym miejscu możemy zauważyć także Inherited elements – czyli zapis elementów, po których dziedziczy pewne style wybrany element.

4. Kolejny element można nazwać podmenu.
– styles – klasy i style przypisane do danego elementu. W łatwy sposób możemy zauważyć, które elementy nie określają elementu, ponieważ są przekreślone. W wyniku jakich sprzeczności, pomimo zadeklarowania w naszym pliku źródłowym, te właściwości nie działają poprawnie.
– Event Listeners – odnosi się to do JavaScript (każdy kto zna kojarzy co to, a kto nie kojarzy, po poznaniu tej technologii wszystko się rozjaśni)
– DOM breakpoints – podobnie jak wyżej
– Properties – ta zakładka jest ważna. Opisuje wszystkie dokładnie elementy na naszej stronie wraz z elementami przeglądarki. To zaawansowana zakładka, która rozświetli wam wszystko w dalszym etapie nauki.

5. Okienko wybranego w naszym podmenu. (Na obrazku akurat styles). Mechanika i działanie opisane w punkcie 4.

6. Obrazkowe dynamiczne odzwierciedlenie naszych marginesów(a), borderów(b), paddingów(c) i contentu(d) wybranego elementu.
Kolory nie są przypadkowe – po wybraniu elementu, ten zostaje podświetlony na dany kolor:
-czerwony – marginesy
-pomarańczowy – border (ramka)
-zielony – padding
-niebieski – content (zawartość)
Zauważmy, że są także podpisane, a z każdej strony widnieje wartość danej właściwości.

7. To kolejne okienko z naszymi stylami. Konkretnie uporządkowane, które możemy rozwijać w celu sprecyzowania. Czasami mamy skrócony zapis stylów, dlatego tutaj możemy przyjrzeć się temu dokładniej.

Chociaż wygląda to zabójczo i możesz być przytłoczony tą wiedzą, wiedz, że to narzędzie ułatwia niesamowicie pracę. Ja się z nim nie rozstaję, zresztą tak jak chyba każdy.
Sprawdź sam jak to działa, a zobaczysz, że nie taki diabeł straszny, jak go malują. Ba, zauważysz w tym dobrą stronę – anioła stróża, który pomaga w pracy. 😉

You May Also Like

About the Author: Sebastian Mieszczańczyk

Studia: Wyższa Szkoła Ekonomii i Informatyki w Krakowie Profil: "Informatyka i Ekonometria" Specjalizacja: "Programowanie urządzeń mobilnych i aplikacji sieciowych" Hobby:
  • Programowanie: Typowy front: HTML/JS/CSS Do tego: Vue/Vuex/Nuxt/Angular/
  • Rozwój osobisty
  • siatkówka (GeoVolley Team) na pozycji środkowego
  • Filmy - od dawna pasjonuję się nie tylko oglądaniem filmów, ale także analizowaniem ich pod kątem stworzenia ( Mój link do filmweba) - w liceum dzięki profilowi z modułem filmowym mogłem bardziej wejść w szczegóły kadrów, ujęć itd.
  • Psychologia - niestety wciąż mam zbyt mało czasu na zagłębianie się w tą wiedzę :(

1 Comment

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Facebook
Inline
Inline