Ta lekcja jest w bazie eduweb

Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.

Wykup dostęp do bazyZaloguj się kontem Easy

Lekcja 12/ 24Debugowanie kodu

0:00 / 0:00
Full-stack i ProgramowanieWydajne Tworzenie Stron WWW

Narzędzia Deweloperskie w Przeglądarce: Debugowanie kodu

2 godz. 2 min wideo24 lekcje8 modułów

Piotr PalarzWeb Developer
Wszystkie kursy autora

Czego się nauczysz

  • Praca z HTML i CSS
  • Narzędzia do pracy z RWD
  • Konsola JavaScript i debugowanie
  • Inspekcja ruchu sieciowego
  • Mierzenie wydajności aplikacji
  • Mnóstwo tricków i porad

Narzędzia Deweloperskie w Przeglądarce - Wydajne Tworzenie Stron WWW

W dzisiejszych czasach, gdy aplikacje internetowe stają się coraz bardziej rozbudowane, znajomość nowoczesnych narzędzi do pracy z nimi to konieczność. Jednym z takich narzędzi jest Chrome DevTools, wbudowane w każdą instalację przeglądarki Chrome na świecie. I choć miliony użytkowników nie wiedzą nawet o jego istnieniu, pozostaje ono zaledwie dwa kliknięcia od nich. Przekonaj się jak to narzędzie uzupełni proces Twojej pracy nad stronami internetowymi!

Praca z HTML i CSS

Niezależnie od tego jak skomplikowana jest dana strona czy aplikacja internetowa, zawsze składa się ona z przynajmniej dwóch komponentów - struktury opisanej w HTML i wyglądu nadanego w CSS. Praca z tymi językami może czasami przyprawić o ból głowy, szczególnie wtedy, gdy tracimy czas na szukanie powodu "rozjeżdżającego się" layoutu lub złej wielkości fontu i miejsca, w którym został on nadpisany. W takich sytuacjach Chrome DevTools to nieoceniona pomoc. Dzięki temu narzędziu w mgnieniu oka znajdziesz zbyt szeroki element, zmienisz jego style "na żywo" i upewnisz się, że problem został rozwiązany. W kursie poznasz wszystkie techniki pracy z HTML i CSS, których wykorzystanie znacznie przyspieszy i uprości Twoją pracę.

Responsive Web Design

Przygotowywanie stron na urządzenia mobilne nie należy do najłatwiejszych zadań. Składa się na to przede wszystkim fakt, iż do czynienia mamy z bardzo wieloma rozdzielczościami telefonów czy tabletów. W kursie zobaczysz, w jaki sposób skalować swoją stronę odwzorowując różne urządzenia, wyświetlać Media Queries czy emulować sensory ruchu. Dowiesz się również jak symulować wolniejsze połączenie internetowe, z którym mamy często do czynienia w mobilnych sieciach, a także jak spowolnić procesor, aby odwzorować słabszy sprzęt, jakim bez wątpienia są urządzenia mobilne.

Konsola i debugowanie

Współczesne strony internetowe to nie tylko HTML i CSS. To także JavaScript - a nawet... sporo JavaScriptu. Z tego powodu narzędzia deweloperskie przeglądarek oferują i na tym polu wiele możliwości. Jedną z nich jest konsola, która pozwala wykonywać kod JavaScript w obrębie aktualnie otwartej strony. To właśnie tam możemy eksperymentować, podglądać logi czy błędy. Kiedy jednak stajemy przed rozwiązaniem trudniejszego problemu, często niezbędne jest skorzystanie z tzw. debuggera. Z kursu dowiesz się jak debugować swoje aplikacje, aby proces ich tworzenia był jak najprzyjemniejszy. Poznasz sposoby wykonywnania kodu linijka po linijce, gdzie na każdym etapie uzyskasz wgląd we wszystkie dane niezbędne do znalezienia problemu lub przetestowania tworzonego rozwiązania.

Sieć i lokalne dane

Nim dowolna strona internetowa zostanie wyświetlona, musi najpierw zostać do przeglądarki przesłana z serwera w formie kodu. Początkowo to tylko kod HTML, chwilę później CSS, JavaScript, fonty, obrazki, multimedia. Wszystkie te zasoby mają wpływ na szybkość ładowania się strony, a także jej renderowania. Tworząc serwis, bardzo łatwo "przesadzić" i stracić kontrolę nad wydajnością tego procesu.Tutaj z pomocą przychodzi panel Network, który omówimy w kursie. To tam znajdziemy wszystkie zapytania wysłane do serwera, dokładne dane na temat czasu pobierania każdego zasobu, statusy odpowiedzi ciasteczka i wiele więcej.

Wydajność aplikacji WWW

Choć zarówno komputery osobiste jak i urządzenia mobilne z roku na rok stają się coraz wydajniejsze, to i technologie tworzenia aplikacji internetowych idą do przodu. Oznacza to tylko tyle, że coraz bardziej zaawansowane aplikacje, wymagają do płynnego działania, coraz mocniejszych urządzeń. Trend ten można jednak w pewnym stopniu zatrzymać, skupiając się na tym, czy aby na pewno tworzone przez nas rozwiązania są dobrze przemyślane i wolne od błędów, które mogą powodować nadmierne zużycie pamięci czy czasu procesora. W kursie zobaczysz jak badać wydajność naszego kodu w kontekście CPU i pamięci RAM oraz na jakie pułapki zwracać szczególną uwagę.

Dla kogo jest ten kurs?

Kurs ten jest dla wszystkich osób tworzących strony i aplikacje internetowe. Nieważne czy dopiero rozpoczynasz swoją przygodę z Web Developmentem czy jesteś już weteranem w tej branży. Materiał ten pokaże Ci nowoczesne techniki pracy, które przyspieszą i uproszczą proces tworzenia i testowania stron WWW. Kurs został podzielony w taki sposób, aby zarówno osoby znające wyłącznie HTML i CSS, jak i te korzystające już z języka JavaScript, znalazły porady odnośnie tych tematów.

Kurs Narzędzia Deweloperskie w Przeglądarce

8 rozdziałów24 lekcje2h 2min

Wprowadzenie

9min
  • Wstęp1min(zablokowana)
  • Jak korzystać z plików źródłowych2min(zablokowana)
  • Przegląd narzędzi deweloperskich6min(zablokowana)

Praca z HTML i CSS

30min
  • Drzewo DOM5min(zablokowana)
  • Praca z drzewem DOM10min(zablokowana)
  • Praca z CSS11min(zablokowana)
  • Praca z kolorami4min(zablokowana)

Praca z mobilnymi stronami

7min
  • Panel Responsive5min(zablokowana)
  • Debugowanie na iOS3min(zablokowana)

Konsola i debugowanie

28min
  • Praca z konsolą12min(zablokowana)
  • Synchronizacja zmian4min(zablokowana)
  • Debugowanie kodu8min(zablokowana)
  • DOM Breakpoints5min(zablokowana)

Sieć i lokalne pliki

19min
  • Przegląd panelu Network7min(zablokowana)
  • Przydatne funkcje panelu8min(zablokowana)
  • Ciasteczka i pliki lokalne3min(zablokowana)

Mierzenie wydajności

24min
  • Pomiary szybkości akcji3min(zablokowana)
  • Wydajność kodu8min(zablokowana)
  • Pomiary pamięci9min(zablokowana)
  • Audyt strony4min(zablokowana)

Inne

12min
  • Informacje o bezpieczeństwie2min(zablokowana)
  • Zapisywanie screenshotów2min(zablokowana)
  • Ustawienia eksperymentalne8min(zablokowana)

Zakończenie

1min
  • Podsumowanie1min(zablokowana)

Ten kurs jest w bazie eduweb

Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.

Wykup dostęp do bazy

Autor kursu

Piotr Palarz
Średnia ocen autora: 4,8

Bio

Web Developer. Na co dzień tworzy strony i aplikacje internetowe. Pasjonat technologii webowych, miłośnik JavaScriptu oraz grafik hobbysta. W wolnych chwilach stale poszerza swoją wiedzę, czyta, publikuje w Internecie, a także stara się aktywnie spędzać czas z dala od ekranu monitora.

Inne kursy tego autora

Pokaż więcej kursów