Narzędzia Deweloperskie w Przeglądarce: Przegląd narzędzi deweloperskich

0:00W tej lekcji chciałbym krótko opowiedzieć o historii narzędzi deweloperskich

0:04a także pokazać ci jakie narzędzia są dostępne w różnych przeglądarkach internetowych i

0:09nie bez powodu jesteśmy na stronie firebuga to jedno z pierwszych

0:13narzędzi deweloperskich oferowane jako dodatek do przeglądarki firefox

0:17z którego mogliśmy korzystać i chciałem króciutko o nim wspomnieć natomiast

0:22zanim pojawiły się narzędzia deweloperskie w jaki sposób mogliśmy pracować

0:26ze stronami internetowymi często wtedy tworząc strony internetowe nie

0:30tworzyliśmy ich od zera ale korzystaliśmy co zresztą dzisiaj też część

0:34osób robi to w zależności od projektu z różnych gotowych szablonów czy przerabialiśmy

0:39jakieś gotowe rozwiązania i wtedy narzędzia deweloperskie które znamy dzisiaj

0:43byłyby dla nas zbawieniem dlaczego otóż na przykład dlatego że na

0:47takiej stronie mamy jakiś przycisk i chcieliśmy jego wygląd dostosować

0:51do naszych potrzeb i teraz jedyne co mogliśmy zrobić to podejrzeć wtedy źródło

0:55strony co również możemy zrobić dzisiaj i to jest kod html

0:59w którym można powiedzieć że z serwera przyleciał do naszej przeglądarki i na jego

1:03podstawie przeglądarka wyrenderowała całą stronę teraz jak widzisz bardzo

1:08trudno byłoby na takiej stronie która w tym przypadku jest bardzo prosta znaleźć o

1:12jaki dokładnie przycisk chodzi widzimy że jest to jakiś przycisk mam

1:17klasę button i być może to jest ten przycisk być może nie teraz musielibyśmy

1:21w pliku css znaleźć gdzie jest taka klasa button spróbować zmienić

1:25jej style i zobaczyć czy na stronie co się zmieniło więc tak musieliśmy

1:29przed erą tych narzędzi deweloperskich szukać a jak coś zmienić

1:33na stronie to było bardzo bardzo żmudne i trudne natomiast później pojawił

1:37się firebug który stał się jakby podstawą dzisiejszych współczesnych

1:41narzędzi deweloperskich i tutaj jest taka strona która tak naprawdę dziękuję

1:45firebugowi za te wszystkie lata i za to jak przyczynił

1:49się do tego że mamy dzisiaj nowoczesne narzędzia deweloperskie tak że

1:54strona istnieje cały czas ale firebug jako projekt już został zaniechany

1:58tu możemy zobaczyć jego historię otóż w 2006 roku pojawiła się

2:02taka pierwsza używanla wersja później jak widzisz na przestrzeni

2:06lat ten firebug był rozwijany aż wreszcie w pewnym momencie tutaj

2:11widzimy w 2016 roku został on jakby wchłonięty czy

2:15wdrożony do firefoxa do narzędzi deweloperskiej firefoxa

2:19które za moment ci pokaże tak że warto pamiętać że mieliśmy coś takiego jak firebug

2:23i był to dodatek który doinstalowaliśmy do przeglądarki internetowej natomiast

2:27teraz we wszystkich przeglądarkach internetowych mamy wbudowane narzędzia deweloperskie o

2:32których wiele osób nie wie dlatego że na świecie mamy setki milionów użytkowników internetu

2:37którzy z tych przeglądarek korzystają a nawet nie wiedzą co mają pod spodem natomiast

2:41my web deweloperzy o tym wiemy i możemy te narzędzia wykorzystywać

2:46założę się że już te narzędzia widziałeś natomiast w tym kursie jestem przekonany

2:50że pokażę ci sporo rzeczy o których nie wiesz natomiast jeżeli jesteś osobą całkowicie początkują

2:55to zobacz jestem w przeglądarce google chrome wystarczy że na dowolnej stronie internetowej

2:59klikniesz gdziekolwiek prawym przyciskiem i wybierzesz inspect

3:03lub w wersji polskiej będzie to zbadaj element albo po prostu zbadaj i

3:07otworzy nam się taki oto panel i to właśnie są te wspomniane narzędzia deweloperskie

3:12które pozwalają nam robić masę rzeczy tak naprawdę te

3:16panele które tutaj widzimy jest to skomplikowana aplikacja która pozwoli

3:20nam całkowicie modyfikować naszą stronę czy znaleźć problemy na naszej stronie

3:25pozwoli nam prototypować czyli na przykład zmieniać kolory patrzeć jak

3:29to się zmienia i tak dalej i tym się zajmiemy w tym kursie skrótem który

3:33pozwala otworzyć również te narzędzia jest na windowsie f12 natomiast

3:37na macu jeżeli bym to zamknął mogę nacisnąć alt command j i to

3:41również otworzy nam takie narzędzia od razu w zakładce console ale

3:45co bez console'a to do tego przyjdziemy jeszcze później chciałbym ci jeszcze tylko pokazać że

3:49w innych przeglądarkach tutaj mam firefoxa również mamy takie narzędzia

3:53i jeżeli tutaj przejdziemy do inspect element z kolei podobny panel

3:57nam się otwiera i w zasadzie te narzędzia pozwalają robić praktycznie te same

4:01rzeczy tutaj mamy jeszcze przeglądarkę safari też możemy kliknąć inspect

4:06element i jeszcze troszkę inny jednak podobny panel zostanie dla

4:10nas otwarty więc skoro te narzędzia pozwalają robić podobne rzeczy to pytanie

4:15z którego z nich skorzystać ja na co dzień korzystam z narzędzia chrome

4:19devtools czyli właśnie z tego narzędzia w przeglądarce chrome a wynika

4:23to z tego że twojej strony i aplikacje tworze testując w przeglądarce google

4:27chrome natomiast kiedy aplikacja już działa to testuję również w innych przeglądarkach

4:32internetowych i to właśnie wtedy jeżeli widzę że na przykład w firefoxie mam

4:36jakiś problem że jakiś elementy nie są równo ułożone może coś nie działa tak samo jak

4:40w przeglądarce chrome to wtedy korzystając z tych narzędzi w firefoksie staram

4:44się ten problem rozwiązać jeżeli natomiast chodzi o przeglądarkę safari która jest specyficzna

4:49dla systemu mac to w tej przeglądarce testuje najczęściej strony

4:53które wyświetlam na iphonie czy ipadzie i jak to zrobić również pokażę ci

4:57w jednej z lekcji tego kursu jak zatem widzisz mamy praktycznie w każdej

5:02przeglądarce internetowej jakieś narzędzia my jednak w tym kursie skupimy się

5:06na narzędziu chrome devtools czyli tym które widzisz właśnie teraz na ekranie

5:10kiedy jednak zrozumiesz jak działa to narzędzie bez problemu odnajdziesz się również

5:14w narzędziach deweloperskich innych przeglądarek okej zatem tyle tytułem

5:18wstępu i takiej krótkiej historii aby tutaj również złożyć pewnego rodzaju

5:22hołd dla firebuga dla tych osób które o nim pamiętają lub

5:26dla tych które dzisiaj dowiedziałeś się o nim po raz pierwszy a już kolejnych lekcjach

5:30przejdziemy do poznawania poszczególnych zakładek które znajdują się w narzędziu

5:34chrome devtools