Chrome Devtools

Maciej Żukiewicz

maciek@harmony-systems.com

Najważniejsze narzędzie każdego WebDevelopera

Prawa autorskie do materiałów

Materiały szkoleniowe (w wersji elektronicznej i drukowanej) udostępnione przez firmę Vavatech w ramach niniejszego kursu, należą wyłącznie do firmy Harmony sp. z o.o. i podlegają ochronie na podstawie przepisów o prawie autorskim i prawach pokrewnych.

 

W związku z powyższym, każdy uczestnik szkolenia zobowiązuje się nie wykonywać

żadnych z niżej wymienionych działań:

•modyfikacja, adaptacja, zmiana, łączenie lub tłumaczenie materiałów oraz tworzenie prac pochodnych na ich podstawie;

•wypożyczanie, sprzedaż lub innego rodzaju przekazywanie materiałów szkoleniowych jakiejkolwiek stronie trzeciej;

•kopiowanie lub jakiekolwiek powielanie materiałów.

 

W ramach szkolenia uczestnik otrzymuje jedynie prawo własności otrzymanego

egzemplarza materiałów i uprawniony jest do jego używania wyłącznie w

ramach dozwolonego użytku określonego w przepisach i własności intelektualnej.

chrome devtools

• podgląd i czytelne formatowanie plików źródłowych strony: HTML, CSS, JavaScript, media
• analiza i modyfikacja HTML i CSS;
• uruchamianie, analiza i debuggowanie kodu JavaScript;
• dostęp i możliwość zarządzania plikami Cookies, LocalStorage, SessionStorage, IndexedDB, Web SQL;
• wyświetla informacje o błędach w kodzie strony;
• symulowanie zachowania strony na różnych urządzeniach (telefonach, tabletach, laptopach);
• symulowanie zachowania strony w przypadku korzystania z różnych połączeń (3G, LTE, Światłowód);
• wykonywanie zrzutów ekranu poszczególnych fragmentów strony jak i całej strony
• analiza wydajności działania strony;

 

• - ... i wiele, wiele innych ;)

Chrome Dev Tools umożliwia:

chrome devtools

dlaczego chrome dev tools? Czy nie ma alternatywy?

chrome devtools - TIPS

Rada #1: Miej zawsze otwarty dev tools podczas pracy

chrome devtools - TIPS

Rada #2: zablokuj cache przeglądarki przy włączonym dev tools

Dzięki temu przeglądarka nie po każdym przeładowaniu pobierze najnowszą wersję plików źródłowych.

chrome devtools - TIPS

Rada #3: dostosuj kolejność zakładek

Kolejność zakładek możesz zmienić przeciągając je między sobą. Dopasuj je tak, aby najczęściej używane zakładki były zawsze pod ręką.

chrome devtools - TIPS

Rada #4: Używaj command menu

Command Menu pozwala na szybki dostęp do większości funkcji DevTools (podobnie jak w Sublime Text)

macOS: CMD+SHIFT+P

Windows: CTRL+SHIFT+P

chrome devtools - TIPS

Rada #5: Używaj okna "Quick access"

Okienko to pozwala na: 1) szybkie otwarcie pliku (_); 2) przejście do konkretnej linii w pliku (:); 3) przejście do konkretnego symbolu w pliku (@); 4) uruchomienia snippetu (!); 5) uruchomienia komendy (>) (Command Menu)

macOS: CMD+P

Windows: CTRL+P

chrome devtools - TIPS

RADA #6/a: UŻYJ FUNKCJI "BEAUTIFY" W NIECZYTELNYCH PLIKACH CSS I JS

chrome devtools - TIPS

RADA #6/B: UŻYJ FUNKCJI "BEAUTIFY" W NIECZYTELNYCH PLIKACH CSS I JS

chrome devtools - TIPS

RADA #7: twórz i korzystaj ze snippetów

Snippety (podobnie jak w Sublime Text) pozwalają na stworzenie uniwersalnego kodu, który możesz uruchomić za pomocą skrótu (aliasu). Dzięki temu możesz automatyzować swoją pracę.

chrome devtools - TIPS

RADA #8: przewiń stronę do zadanego elementu

Jeżeli znalazłeś element HTML w zakładce "HTML" i chcesz zobaczyć jak on rzeczywiście wygląda kliknij PPM i wybierz "scroll into view", a przeglądarka przescrolluje do tego miejsca.

chrome devtools - TIPS

RADA #9: Użyj strzałeczek góra/dół w konsoli do poglądu lub uruchomienia ostatnio używanych komend

chrome devtools - TIPS

RADA #10: Użyj "Design Mode" aby na żywo edytować treść strony

chrome devtools - know-how

więcej na temat chrome devtools

Google - https://goo.gl/iRa49U

 

Kanał na YouTube - https://www.youtube.com/watch?v=LJq8vg8ktdQ&list=PLNYkxOF6rcIBDSojZWBv4QJNoT4GNYzQD

 

Chrome - zakładka "What's New"