Narzędzia Deweloperskie w Przeglądarce: Praca z drzewem DOM

0:00W tej lekcji pokażę ci najważniejsze możliwości dostępne

0:04w panelu elements natomiast zanim to zrobię chciałbym ci pokazać jeszcze dwa

0:08triki i swoją drogą w niektórych lekcjach będą się takie triki przewijać

0:13nie będę im dedykował osobnych lekcji pierwszy jest taki że możemy z

0:17pomocą command i plus minus lub na windowsie control plus minus

0:21zauważ powiększać cały ten interfejs więc możemy to zrobić w ten

0:25sposób natomiast jeżeli chciałbyś przywrócić domyślną wielkość to naciskamy

0:29command 0 lub control 0 więc na moim monitorze tak by

0:33wyglądała domyślna wielkość stąd ja sobie to troszeczkę powiekkszę druga rzecz

0:37którą chciałem ci pokazać jest taka że kiedy tutaj mamy aktywny ten panel

0:41chrome devtools to mamy taki skrót klawiaturowy jak command shift p na

0:46macu lub control shift p na windowsie czyli taki które możesz znać z edytora

0:50na przykład vs code czy z sublime text jeżeli sobie coś takiego wciśniemy

0:55to zauważ że mamy taki command palette gdzie możemy za pomocą komend

0:59wykonywać bardzo wiele akcji lub przeskakiwać do różnych paneli więc

1:03warto o tym pamiętać że tutaj możemy szybciej wykonać pewne akcje jedną

1:08z akcji którą chciałem ci pokazać i jest zmiana domyślnego szablonu być może zauważyłeś

1:12w lekcji poprzedniej że miałem ciemny szablon teraz mam jasny możemy

1:16tutaj wpisać team w ten sposób i wybrać switch to dark team i

1:20w ten sposób chrome devtools będzie wyglądać i tak sobie to pozostawimy w tym kursie

1:25przejdź już zatem do panelu elements gdzie będę chciał ci pokazać

1:29najważniejsze rzeczy z nim związane pierwsza rzecz jest taka że

1:33to całe drzewo dom o którym mówiłem że jest ono aktywną czy żywą

1:37reprezentacją tego co widzi przeglądarka to drzewo można modyfikować

1:41i teraz co to oznacza oznacza to tylko tyle że jak

1:45przyjdziemy sobie do jakiegoś przykładu może tutaj

1:49nawet i będziemy chcieli edytować na przykład tekst żeby zobaczyć jak

1:54on będzie wyglądał to możemy jak widzisz kliknąć taki element wybrać inspect

1:58jest to element span tutaj go sobie rozwinę pokazuje nam w css takie

2:02pseudoelementy jak before i after tutaj również możemy je modyfikować natomiast

2:07ważna uwaga jeżeli usuniesz właściwość content tutaj przez przypadek to

2:11wtedy te elementy całkowicie znikną i będziesz musiał odświeżyć

2:15stronę natomiast sam tekst jeżeli kliknę dwukrotnie to zauważ że mogę

2:19go modyfikować i

2:23cokolwiek sobie tutaj dopisać teraz żeby z tego wyjść wystarczy że odkliknąć gdzieś na ten

2:27element i na stronie na żywo zostało to zmienione oczywiście jak

2:31odświeżę stronę to te zmiany już nie będą tutaj widoczne bo to jest tylko

2:35tutaj u nas lokalnie na chwilę zmienione ale to pozwala

2:40nam szybko zmienić jakiś tekst i zobaczyć jak zachowa się dany element na przykład tekst

2:44na przycisku możemy zmienić i wtedy zobaczymy jak ten przycisk się rozciągnie jak będzie

2:48wyglądał czy nie zaburzy to naszego layoutu i tak dalej przeszedłem

2:53sobie teraz do przykładu 54 bo chciałbym ci pokazać jak możemy modyfikować

2:57atrybuty i tutaj będzie to dobrze widoczne mamy tutaj takie oto przyciski

3:01możemy sprawdzić jak one wyglądają zauważ że są to elementy li tutaj swoją

3:05drogą możemy sobie te panele przesuwać i zmniejszać zwiększać

3:10są to przyciski za pomocą elementów li zrobione i zauważ

3:14że ten który jest aktywny ma klasę active i teraz co ciekawe jeżeli chciałbyś dodać

3:18taką klasę do jakiegoś innego elementu wystarczy żetutaj gdzieś są jego atrybuty

3:22klikniesz dwukrotnie i możesz dopisać klasę active wciskam

3:26enter i zauważ że ten przycisk teraz też ma klasę active natomiast jeżeli chciałbyś

3:31dostać nowy atrybut który tutaj nie istnieje to klikamy sobie w tym miejscu i możemy

3:35za pomocą tab przeskakiwać po wszystkich atrybutach i jak przeskoczymy do końca zauważ

3:39że tutaj się nam takie wolne pole pojawiło mogę kliknąć nacisnąć strzałeczkę

3:43i tutaj sobie coś wpisać więc dowolny atrybut który chciałbyś tutaj napisać na

3:47przykład title również możesz dodać

3:52wciskam enter i taki atrybut został tutaj dodany jeżeli chciałbyś

3:56tylko dodawać klasy to możemy to zrobić również w inny sposób kliknijmy sobie na ten przycisk

4:01i teraz tutaj w tym panelu mamy coś takiego jak cls jeżeli

4:05kliknę to od razu widzimy jakie klasy już ten element ma możemy je wyłączać

4:09i włączać jak widzisz teraz ten przycisk już nie wygląda tak

4:13jak powinien dlatego że pozbyliśmy się jego głównej klasy natomiast również

4:17możemy tutaj dodać kasę i mamy tutaj auto completion to jest bardzo ważne że

4:22chrome devtools pokazuje nam wszystkie klasy jakie są w naszych plikach css dostępne

4:26wciskam teraz enter i zauważ że taka klasa również została tutaj

4:30dodana no i oczywiście również będzie to odzwierciedlone

4:34w tym miejscu czyli widzimy na żywo w drzewie dom że faktycznie taka klasa

4:38na tym elemencie się znajduje kolejną rzeczą którą możemy robić

4:43tutaj w panelu element w drzewie dom jest zmiana kolejności elementów

4:47może ja tą stronę odświeżę żebyśmy mieli to tak jak było

4:51na początku i zauważ jedną fajną rzecz mogę kliknąć dowolny element i przeciągnąć

4:55go w inne miejsce i nie jestem pewny czy teraz to

4:59zadziałało zobaczymy pierwszy był web design okej

5:04teraz na pewno zadziałało mamy mobile design i tak dalej więc możesz

5:08również taki element spróbować wyciągnąć dać go gdzieś indziej na przykład tą h2 gdybyśmy

5:12chcieli zobaczyć jak to będzie wyglądać jeżeli ona by była w drzewie dom w innym

5:17miejscu na przykład tutaj zobacz to

5:21tak się zmienia to na naszej stronie czyli nie muszę tego w kodzie źródłowym zmieniać mogę na szybko tutaj zobaczyć

5:26i jakie da to efekty kolejną rzeczą jest modyfikacja

5:30kodu html wcześniej pokazałem ci że możemy zmodyfikować na przykład tekst ale

5:35jeżeli sobie kliknę na dowolny element prawym przyciskiem i wybiorę edit as html

5:39to mogę zmodyfikować cały ten kod oczywiście mogę dodawać klasy atrybuty cokolwiek

5:44natomiast mogę również dodać jakieś nowe elementy i

5:48później wystarczy odkliknąć czyli wyjść z tego elementu i zostanie do zaaplikowane

5:52i teraz do czego może się to przydać oczywiście do bardzo wielu rzeczy ale

5:56ja często wykorzystuje to po to aby na przykład powielić jakieś elementy tutaj mam

6:006 takich kafelków w tej galerii ale wyobraź sobie że tworzysz stronę

6:04na przykład z użyciem jakiegoś CMS-a typu wordpress i dodałeś sobie jeden wpis na

6:09stronie ten jeden wpis ci się wyświetla on może być w formie takiej galerii to zależy jaki

6:13masz layout może to wyglądać inaczej i teraz chciałbyś zobaczyć jak twoja strona na

6:17przykład taki grid zachowa się jak będziesz miał cztery pięć dziesięć takich elementów no

6:22i naturalnie musiałbyś w tym systemie powielić taki wpis na przykład 10

6:26razy odświeżyć stronę i dopiero wtedy zobaczyć efekty natomiast można to

6:30zrobić tutaj dynamicznie czyli jeżeli mam taki element li to

6:34mogę tutaj kliknąć jego rodzica wybrać edit ashtml

6:38i zauważ że skopiujemy sobie taki element li i po prostu wkleję

6:42go gdzieś poniżej odkliknę na ten element i jeden dodatkowy element pojawił mi

6:47się na stronie więc gdybym miał tylko jeden skopiował bym sobie to na przykład sześciokrotnie

6:51i dzięki temu mógłbyś sprawdzić w jaki sposób zachowa się nasza strona następną

6:56przydatną rzeczą tutaj może odświeżę którą chciałbym ci pokazać polecenie

7:00scroll into view jak masz jakąś długą stronę i tutaj w drzewie dom znajdziesz

7:05jakiś element który cię interesuje ale nie wiesz gdzie on dokładnie jest na

7:09przykład tutaj u nas akurat prawie wszystko widać ale powiedzmy że nie widać

7:13footera to możesz kliknąć na taki element i wybrać tutaj scroll

7:17into view i zauważ że widok został przescrollowany tak żeby

7:21ten element był widoczny następnym fajnym trikiem który chciałbym ci tutaj pokazać

7:26jest ukrywanie elementów klikniemy sobie na ten element i teraz możliwości

7:30są dwie mogę ten element usunąć naciskając przycisk delete i

7:34ten element nam zniknął całkowicie z drzewa dom został usunięty co ważne

7:38możemy zrobić command z lub control z żeby taką zmianę wycofać ten element

7:42się pojawi z powrotem ale czasami chcemy go tylko na chwilę ukryć bo nam przeszkadza

7:46coś nam zakrywa i tak dalej to wystarczy że nacisnę kiedy tam będzie zaznaczony

7:51przycisk H na klawiaturze zauważ że on został ukryty ale

7:55nadal okupuje swoje miejsce i stało się tak dlatego że została do niego

7:59dodana taka klasa jak web inspector hide shortcut i możemy

8:03w panelu styles zobaczyć że ona dodała visibility hidden i tutaj flaga

8:07important czyli ten element tak naprawdę został tylko ukryty z użyciem

8:11visibility hidden jeszcze raz mogę nacisnąć H zanim to zrobię zauważ że tutaj

8:16mamy taką kropkę która nam pokazuje że coś tutaj się dzieje i że

8:20jeszcze raz nacisnę H to ten element pojawił się na nowo przedostatnią

8:24sztuczką którą ci pokażę jest kopiowanie kodu jakiegoś elementu wyobraź sobie że

8:28jesteś na swojej lub na przykład cudzej stronie i chciałby skopiować fragment kodu

8:32który ktoś zastosował możesz zaznaczyć taki element wybrać prawy przycisk i

8:37następnie copy i mamy coś takiego jak copy outer

8:41html outer html jeżeli korzystałeś z javascript

8:46z obiektowego modelu dokumentu to kopiuje po prostu cały ten element i jego kod html

8:50kiedy inner html skopiowałby tylko to co jest wewnątrz i teraz

8:54jeżeli byśmy gdziekolwiek sobie chcieli wkleić coś takiego jeżeli tutaj bym

8:58sobie zrobię nowy plik zauważ że dokładnie kod html

9:02tego elementu został skopiowany i na koniec jeszcze jeden trik w panelu

9:06elements w tym drzewie dom otóż jeżeli wciśniemy sobie tutaj command f albo control

9:10f na windowsie to mamy wyszukiwarkę która pozwala nam przeszukiwać to drzewo

9:15dom i możemy szukać na przykład po zwykłym stringu czyli tekście wpiszę

9:19wszystkie i zauważ że znalazło nam przycisk który

9:23ma taki tekst ale również możemy skorzystać z selektora czyli mogę wpisać

9:27na przykład klasę projects powiedzmy sort i

9:31zauważ że znalazło mi ten element który ma taką klasę więc tutaj możesz z normalnych

9:35selektorów css również korzystać to za tym tyle jeżeli chodzi

9:39o drzewo dom pokazałem ci w zasadzie wszystkie najważniejsze rzeczy jak

9:43możemy z nim pracować pod prawym przyciskiem możesz jeszcze znaleźć kilka innych opcji polecam

9:48ci abyś sobie z nimi poeksperymentował natomiast w następnej lekcji skupimy się na panelu

9:53css który znajduje się poniżej