Artykuł

sie 31 2011
0

Narzędzia dla programistów w Chrome

Wielokrotnie na łamach Alt Control Delete, pisałem na temat Firebuga, czyli świetnego rozszerzenia dla Firefoxa, które w znaczący sposób ułatwia pracę webdeveloperom. Od zawsze było to również moje ulubione rozszerzenie w Firefoksie. Od pewnego czasu, przesiadłem się jednak na przeglądarkę Chrome. W tym przypadku, w rozszerzeniach dostępny jest jedynie Firebug Lite, który pod względem funkcjonalności jest bardzo ubogi i do tego bywał niestabilny (przynajmniej u mnie).

Na szczęście, twórcy Chroma zaszaleli i wyposażyli swoją przeglądarkę w specjalny moduł narzędzia dla programistów, który funkcjonalnością, właściwie nie ustępuje Firebugowi i jest dostępny od razu w przeglądarce. Jedyną problematyczną kwestią, jest zmiana swoich przyzwyczajeń i chęć poznania nowego narzędzia:)

Dostęp do narzędzi dla programistów

Dostęp do narzędzi w Chromie, możemy uzyskać na trzy sposoby:

  • Poprzez kliknięcie w dowolnym miejscu na stronie prawym przyciskiem myszy i wybranie opcji Zbadaj element z menu kontekstowego
  • Wejście do menu przeglądarki i wybranie opcji Narzędzia dla programistów z menu Narzędzia
  • Zastosowanie skrótu klawiszowego Ctrl + Shift + I

Wybór pierwszej opcji, przeniesie nas automatycznie do węzła w obszarze, którego znajdował się nasz kursor.

Po uruchomieniu narzędzi, dostępnych będzie dla nas 8 różnych zakładek. Omówię je pokrótce w kolejnych akapitach.

Zakładka Elements (elementy)

Zakładka Elements, to prawdopodobnie miejsce, do którego będziemy zaglądać najczęściej. To właśnie tutaj, mamy podgląd drzewa DOM, jego elementów oraz ich właściwości.

Podobnie jak w Firebugu, również w tym przypadku, możemy modyfikować drzewo w locie oraz zmieniać właściwości i atrybuty elementów. W gruncie rzeczy, są to dokładnie te same funkcjonalności jak w rozszerzeniu dla przeglądarki od Mozilli, tylko że trochę inaczej rozłożone - co nie znaczy, że gorzej:)

Zakładka Resources (zasoby)

W zakładce Resources, znajdziemy podstawowe informacje na temat każdego zasobu, w który dowolny sposób pojawia się na naszej stronie. Obojętnie, czy jest to arkusz styli, obrazek, czy też kod JavaScript.

Możemy również przeglądać tzw. zasoby Local Storage (czyli mechanizm, który rozwija się równolegle z HTML5 i pozwala na lokalne składowanie danych, używanych przez aplikacje webowe), ciasteczka, dane sesji oraz szereg innych, użytecznych elementów.

Zakładka Network (sieć)

Zakładka Network, jest odpowiednikiem zakładki Sieć z Firebuga. Również w tym przypadku, będziemy mogli przejrzeć wszelakie żądania jakie przetwarzane są na naszej stronie. Przy czym należy tu zaznaczyć, że możemy podejrzeć zarówno elementy pobierane przy otwieraniu strony jak i żądania asynchroniczne XHR.

Każdy element możemy prześledzić na linii czasu oraz dowiedzieć się bardziej szczegółowych informacji, które zostały rozbite na następujące zakładki (dla każdego żądania):

  • Nagłówki
  • Podgląd
  • Odpowiedź
  • Ciasteczka
  • Czasy

Zakładka Scripts

Zakładka Scripts, jest już domeną JavaScriptu. W tym miejscu, możemy w najprostszym skrócie podejrzeć i zdebugować kod naszych skryptów.

Trzeba oddać autorom, że liczba opcji związanych z debugowaniem, jest co najmniej zadowalająca. Możemy m.in.:

  • Śledzić wybrane wyrażenie (Watch expressions)
  • Przeglądać stos (Call Stack)
  • Ustawiać pułapki (Breakpoints)
  • Przechodzić kod krok po kroku
  • I wiele, wiele więcej

Zakładka Timeline (linia czasu)

Na zakładce Timeline, możemy prześledzić wszystkie zdarzenia przeglądarki związane z wyświetlaniem strony osadzone na osi czasu. Będzie to jednak coś więcej, niż klasyczna analiza połączeń jaką mogliśmy znaleźć na zakładce Network. Z tej zakładki, dowiemy się m.in.

  • Kiedy okno zostało odmalowane (w programowaniu metoda Paint/Repaint, wykorzystywana do odświeżania zawartości okna)
  • Kiedy został wyzwolony Timer (licznik)
  • Kiedy przeliczono style

Z punktu widzenia webmastera, zakładka jest jednak raczej mało przydatna, aczkolwiek dostarcza raczej niecodziennych informacji:)

Zakładka Profiles

Na zakładce Profiles, poznamy m.in. zużycie procesora. Zużycie, będzie mierzone jednak tylko od momentu rozpoczęcia nagrywania (ikona czarnego kwadratu widoczna w pasku stanu), aż do jego zakończenia.

Po zakończeniu pomiaru, na ekranie pojawi się lista wykonywanych operacji (w moim przypadku widać w głównej mierze zadania wykonywane na JavaScripcie) wraz z rozbiciem na procenty. Oczywiście poszczególne procenty sumują się do 100, co nie oznacza jednak, że Chrome zużywa dokładnie tyle procesora. Zakładka ta ma na celu ukazać, bardziej proporcje zużycia procesora wewnątrz przeglądarki.

Zakładka Audits

Zakładka Audits, pozwala na przeprowadzenie audytu na badanej aktualnie stronie. W głównej mierze, polega to na tym, że Chrome szuka uchybień przez nas popełnionych. Mechanizm ten, działa właściwie w taki sposób jak dodatek PageSpeed, który już kiedyś opisywałem przy okazji wpisu Optymalizacja wydajności stron internetowych pod kątem porad Google. O tym jak sobie poradzić z problemami znalezionymi przez audyt, dowiecie się właśnie w tamtym wpisie.

Zakładka Console

Zakładka Console, to odpowiednik Konsoli błędów z Firefoksa. To właśnie tutaj, znajdziemy informacje o błędach w JavaScripcie, CSS i innych nieoczekiwanych przez nas zdarzeniach. Dodatkowo, zawartość konsoli możemy przeglądać w pod zakładkach:

  • Błędy
  • Ostrzeżenia
  • Logi

Jeśli, Wasza strona działa w nie do końca oczekiwany sposób, być może warto zajrzeć właśnie tutaj, by odnaleźć rozwiązanie swoich problemów:)

Dodatek PageSpeed

Widoczny na ostatniej zakładce PageSpeed, to specjalne rozszerzenie dla Narzędzi programistów, które pozwala na mierzenie prędkości wczytywania strony oraz wyświetlanie porad, które mogą przyspieszyć ładowanie się naszej strony (o PageSpeed wspomniałem już wyżej). Wcześniej dodatek PageSpeed, dostępny był również jako dodatek do Firebuga.

Data ostatniej modyfikacji: 28.11.2011, 18:35.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus