Narzędzia Deweloperskie w Przeglądarce: Synchronizacja zmian

0:00Po konsoli przechodzimy do kolejnego panelu a jest to panel sources

0:04czyli źródła i teraz do tego panelu możemy być przekierowani z wielu miejsc

0:08na przykład jeżeli w panelu elements klikniemy sobie na style i chcemy zobaczyć gdzie

0:13takie style zostały przypisane zauważ że przenosi nas właśnie do panelu sources i

0:17generalnie tutaj jeżeli sobie klikniemy na page to możemy zobaczyć wszystkie

0:21pliki które są podłączone do tej strony czyli mam przykład 14

0:26jest tutaj css jest tutaj javascript wszystko sobie

0:30możemy podejrzeć i jeżeli mamy kod na przykład taki jak

0:34jquery tutaj widzisz jest on dobrze sformatowany

0:38ale jeżeli tutaj byśmy mieli na przykład zmienić zminifikowany kod to możemy kliknąć prettyprint

0:42i on wtedy zostanie ładnie sformatowany żebyśmy mogli sobie zerknąć o

0:47co w tym sadzie chodzi i tak dalej tutaj akurat mamy jquery w wersji niezminifikowanej

0:51ale warto wiedzieć że tutaj możemy sobie to prettyprint kliknąć czyli

0:55jest to właśnie ta ikonka tutaj są już nasze

0:59funkcje te które są przypięte w pliku utils.js a

1:03także mamy tutaj plik scripts.js czyli widzimy całą taką hierarchię plików

1:07które są podłączone do tej strony włącznie z plikiem css tutaj

1:12będziemy mogli stawiać pewne breakpointy i tak dalej i tym się zajmiemy w lekcji

1:16kolejnej natomiast tej lekcji chciałbym ci pokazać jedną ważną rzecz wspominałem

1:20że jeżeli cokolwiek zmienimy sobie tutaj to zmienia nam się to na stronie na przykład jeżeli

1:24bym zmienił coś w tym nagłówku mam taki oto nagłówek powiedzmy

1:29że zmienię mu padding-bottom zwiększe go ale

1:33jeżeli odświeżę stronę to te zmiany nie są zapisywane natomiast jeżeli mamy prostą

1:37stronę taką gdzie te style jak widzisz tutaj bezpośrednio są mapowane czyli jeżeli

1:41tutaj napiszemy sobie te style przejdźmy do przykładu 14

1:46dokładnie okej

1:52tutaj tych styli nie ma bo one są globalnie w tym miejscu ale chodzi

1:56mi o to że jeżeli są mapowane czyli nie są kompilowane w żaden sposób przez sass i tak

2:00dalej to możemy ustawić panel sources tak że

2:05jeżeli coś tutaj zmienimy to zapisze nam się to również w naszym pliku teraz jak

2:09to zrobić przejdźmy sobie tutaj i klikniemy na zakładkę file

2:13system i wybierzemy add folder to workspace jeżeli sobie to kliknę to

2:17możemy teraz przejść do naszego katalogu źródła do public

2:21i tutaj w zasadzie cały ten katalog moglibyśmy sobie dodać

2:26okej zróbmy to tak i teraz musimy jeszcze potwierdzić

2:30że pozwalamy na dostęp do tych zasobów i zauważ

2:34że teraz na page mamy to co jest wczytane a na filesystem widzimy wszystko i

2:38teraz co nam to daje otóż jeżeli sobie coś

2:42będziemy chcieli zmienić czyli na przykład ten padding-bottom tutaj zmienię w ten

2:46sposób to zauważ że po odświeżeniu strony on również jest zmieniony i

2:51mamy tutaj taką zieloną kropkę która pokazuje nam że jest to zsynchronizowane

2:55z tym plikiem który do którego ścieżkę właśnie tutaj widzimy czyli

2:59jeżeli zmienię sobie to na pięćdziesiąt przejdę teraz do page title span

3:03czyli sobie to tutaj wyszukamy w ten

3:08sposób zauważ że on padding-bottom

3:1350 i to pozwala ci szybko sobie tutaj prototypować

3:17czyli zmieniać pewne rzeczy i od razu zapisywać je również do plików w

3:21każdej chwili natomiast możesz przyjść tutaj do sources i taki folder

3:25stąd usunąć wybierając z nim remove folder from workspace i

3:30potwierdzimy że tak i możemy zobaczyć teraz że nie ma już tej

3:34zielonej kropeczki nie jest to już linkowane ale te zmiany ktore sobie zapisaliśmy

3:38są już odzwierciedlone na dysku