Chrome Developer Tools – Moje narzędzie pracy

W przeciągu ostatnich kilkunastu lat nastąpiła rewolucja. Nie chodzi mi w tym momencie o „rewolucje”, o których słyszymy co jakiś czas w wiadomościach. Mówię teraz o rewolucji w kwestii rozwiązań webowych. Można by teraz zapytać: „O czym Ty właściwie mówisz? Przecież strony internetowe jak były, tak i są?”. W sumie tak. Ale to, co mieliście jeszcze na koniec lat 90-tych, a to co mamy teraz, to są dwie zupełnie różne bajki. I właśnie do tej drugiej bajki potrzebne nam są takie narzędzia jak Chrome Developer Tools. No, ale zacznijmy od początku.

Na początku była strona. Była ona prosta i wtedy było to dobre. Tak, jak już powiedziałem we wstępie. Gdy pod koniec lat 90-tych zaczynałem korzystać z internetu, strony były zupełnie inne niż są teraz. O żadnym standardzie Web 2.0 nikt nawet jeszcze wtedy nie marzył. Ówczesne strony zwykle nie powalały graficznie, mówiąc bardzo delikatnie. Do tego ilość skryptów, z których korzystały, była też niewielka. Strony były zwyczajnie prostsze. Zobaczmy w tym momencie przykładową stroną z tamtego okresu. Będzie to adres http://www.kli.org/. Jest to portal związany z językiem klingońskim.

Rysunek 1. Strona z lat 90-tych, poświęcona językowi klingońskiemu.

Pomimo brzydkiego wyglądu, prezentowana strona ma jeden wielki plus. Jest prosta. Co za tym idzie, nie ma zbyt wielu miejsc, w których mógłby wystąpić problem.

Obecnie sytuacja wygląda zupełnie inaczej. Nowoczesne strony składają się z całego zestawu elementów, obecnie uważanych za konieczne, bez których po prostu nie wyobrażamy sobie teraz nowoczesnego portalu. Wymieniając tak na szybko elementy, które przychodzą mi do głowy. Na pierwszym miejscu na pewno należy wymienić jQuery, kolejnym będzie Modernizr. Mamy oczywiście cały zestaw elementów bazujących na wymienionym już jQuery. Dodatkowo mamy oczywiście integrację z innymi elementami. Jak na przykłada Api FB czy Twittera. Jest jeszcze oczywiście Bootstrap. Tyle z elementów, które w tym momencie przyszły mi do głowy. Na pewno jest jeszcze cała masa tych, które nie zostały w tym momencie wymienione.

Rozwiązanie korzystające z tylu zewnętrznych elementów będzie niemal zawsze charakteryzować się dwoma cechami. Po pierwsze będzie ono oferowało wiele funkcjonalności. Jest to oczywiście plus. Niestety w tym momencie pojawia się pewien dość znaczący minus. W aplikacjach tak złożonych zawsze będą pojawiać nam się jakieś błędy. Szukanie ich bez żadnej pomocy byłoby zadaniem chyba niewykonalnym. Dlatego właśnie narzędzia, takie jak prezentowane w tym materiale, zyskują coraz większą popularność. Ja ze swojej strony, do pracy nad większością stron, używam właśnie Web Dev Tools. Postaram się pokrótce opisać teraz jego najważniejsze elementy.

Wszystkie nasze przykłady będą przedstawiane na podstawie witryny http://www.pwn.pl/. Zanim przejdziemy do właściwych przykładów, to warto wspomnieć że, aby uruchomić narzędzie developerskie, wystarczy wcisnąć klawisz F12.

Pierwszą zakładką jest Elements. Pozwala ona na podejrzenie, z jakich elementów zbudowana jest strona. Możemy przeprowadzać tutaj ich edycję, jak również pracować na stylach, które są do nich przypisane.

Rysunek 2. Widok zakładki Elements.

Następnie widzimy zakładkę Resources. Jak łatwo można zgadnąć, znajdują się tutaj wszystkie zasoby, z których korzysta nasza strona. Jest to bardzo wygodne, ponieważ w jednym miejscu mamy zebrane wszystkie tego typu elementy. Warto zauważyć, że mamy tu pełne wsparcie elementów, które otrzymaliście w wielkiej paczce zwanej HTML5. Przykładem tego może być np. Local Storage.

Rysunek 3. Widok zakładki Resources.

Kolejna zakładka odpowiada za monitorowanie ruchu sieciowego na stronie. Spełnia ona dwie główne funkcje. Po pierwsze pokazuje jak wygląda kwestia plików pobieranych przez stronę. Jest to świetne miejsce, jeżeli chcemy sprawdzić, czy wszystkie elementy załadowały się prawidłowo. Drugą, równie ważną, funkcję tej zakładki, jest możliwość monitorowania statusu wykonywanych przez nas asynchronicznych odwołań. Jest to naprawdę niesamowicie przydatna funkcja, jeżeli chodzi o nowoczesne programowanie aplikacji internetowych.

Rysunek 4. Widok zakładki Network.

Kolejną, chyba najczęściej używaną przeze mnie zakładką, jest Sources. Jest to miejsce, w którym możemy przeprowadzanie faktyczne debugowanie aplikacji. Opcje związane z tym są naprawdę bardzo bogate. Pozwalają zarówno na szukanie błędów w skrypcie klienckim, jak i w drzewie DOM. Opcji jest oczywiście o wiele więcej, jak będzie można zobaczyć zaraz na rysunku. Z tym, że nie jest to miejsce na opisywanie kolejno ich wszystkich.

Rysunek 5. Widok zakładki Sources.

Ostatnią zakładką, na jaką chciałbym zwrócić uwagę, jest PageSpeed. Używamy jej, gdy chcemy sprawdzić czy prędkość działania naszej strony może być poprawiona. Sprawdzimy to oczywiście na przykładzie strony PWN-u.

Rysunek 6. Widok zakładki PageSpeed.

Jak widzimy, aplikacja przygotowała kilkanaście uwag, co do strony. Narzędzie działa na tyle fajnie, że oprócz uwagi mamy też informację, dlaczego należy ją poprawić. Jest to naprawdę fajne narzędzie pozwalające na swego rodzaju audyt strony.

Podsumowanie

W przedstawionym powyżej materiale starałem się pokazać, dlaczego w przypadku nowoczesnych aplikacji internetowych potrzebne są nam dodatkowe narzędzia, które pozwolą na szukanie występujących błędów. Zobaczyliśmy również, że posiada ono szereg innych funkcji. Ja ze swojej strony naprawdę bardzo mocno zachęcam do poznania któregoś z narzędzi tego typu. Ponieważ w przypadku tworzenia nowoczesnych rozwiązań internetowych, korzystanie z tego typu narzędzi jest koniecznością.

Ja ze swojej strony bardzo dziękuję za czas poświęcony na przeczytanie powyższego materiału. Mam nadzieję, że nie był to czas stracony. W przypadku jakichkolwiek pytań proszę o kontakt na karol.rogowski@gmail.com lub @KarolRogowski.