Wprowadzenie
Google Chrome to bogata i zaawansowana przeglądarka internetowa, która wyznacza nowe standardy w przypadku aplikacji internetowych. Google dokłada wszelkich starań, aby zapewnić użytkownikom bardzo szybkie, stabilne i bogate w funkcje przeglądanie. Google zadbało też o to, aby programiści tacy jak Ty mogli korzystać z Chrome w sposób wygodny i bezproblemowy. Narzędzia dla programistów, dostępne w pakiecie w Chrome i Safari, zapewniają deweloperom i programistom internetowym dostęp do kodu przeglądarki i aplikacji internetowej.
Narzędzia dla programistów są częścią projektu Webkit na licencji open source. Większość informacji w tym artykule dotyczy zarówno przeglądarki Google Chrome, jak i Safari. Zrzuty ekranu zostały jednak wykonane w Google Chrome 6, więc w Twojej przeglądarce mogą się nieznacznie różnić.
W tym artykule omówimy przegląd Narzędzi dla deweloperów oraz przedstawimy ich najpopularniejsze i najbardziej przydatne funkcje. Nasz odbiorca docelowy to programiści stron internetowych, którzy nie znali lub nie badali jeszcze narzędzi dla deweloperów. Jesteśmy jednak pewni, że nawet jeśli jesteś doświadczonym web developerem, znajdziesz tu kilka przydatnych wskazówek.
Jeśli Twoja instancja Narzędzi dla programistów nie wygląda tak samo jak zrzuty ekranu w tym artykule, zalecamy uaktualnienie do wersji 5, aby móc korzystać ze wszystkich opisanych tu funkcji.
Omówienie
W Narzędziach dla deweloperów dostępnych w Chrome jest 8 głównych grup narzędzi, których możliwości są rozszerzane wraz z każdą nową wersją. Chrome 5 zawiera teraz elementy, zasoby, skrypty, osi czasu, profile, pamięć, audyt i konsolę.
Elementy
Narzędzie Elementy pozwala zobaczyć stronę internetową tak, jak widzi ją przeglądarka. Oznacza to, że za pomocą narzędzia Elementy możesz wyświetlać surowy kod HTML, surowe style CSS i model obiektu dokumentu oraz manipulować nimi w czasie rzeczywistym.
Zasoby
Za pomocą narzędzia Zasoby możesz sprawdzić, jakich komponentów strona internetowa lub aplikacja wymaga od serwerów WWW, jak długo trwają te żądania i ile potrzeba przepustowości. Możesz też wyświetlić nagłówki żądania i odpowiedzi HTTP dotyczące poszczególnych zasobów. Narzędzie Zasoby doskonale przyspiesza wczytywanie stron.
Skrypty
Aby przyjrzeć się kodowi JavaScript na stronie, użyj narzędzia Skrypty. Znajdziesz tu listę skryptów wymaganych przez stronę oraz pełny debuger skryptów. Możesz nawet zmienić kod JavaScript w locie.
Oś czasu
Jeśli chcesz przeprowadzić zaawansowaną analizę czasu i szybkości, skorzystaj z narzędzia Czasopogląd, które zapewnia szczegółowy wgląd w różne działania wykonywane przez Chrome w tle. Możesz się dowiedzieć, ile czasu zajmuje przeglądarce obsługa zdarzeń DOM, renderowanie układów stron i wyświetlanie okna.
Profile
Narzędzie Profile pomaga rejestrować i analizować wydajność skryptów JavaScript. Możesz na przykład dowiedzieć się, które funkcje zajmują najwięcej czasu na wykonanie, i dokładnie określić, gdzie należy wprowadzić optymalizację.
Miejsce na dane
Nowoczesne aplikacje internetowe wymagają trwałości wykraczającej poza pliki cookie. Narzędzie Storage pomaga śledzić, wyszukiwać i debugować lokalną pamięć przeglądarki. To narzędzie może wyświetlać dane zapisane w lokalnych bazach danych, pamięci lokalnej, pamięci sesji i plikach cookie oraz wysyłać zapytania dotyczące tych danych.
Kontrola
Narzędzie Audyt to tak, jakby przy Tobie siedział konsultant ds. optymalizacji witryny. Narzędzie to analizuje wczytywaną stronę, po czym wyświetla sugestie i metody optymalizacji, które umożliwiają skrócenie czasu wczytywania strony oraz zwiększenie postrzeganej (i rzeczywistej) szybkości działania.
Konsola
Na koniec warto wspomnieć, że Narzędzia dla deweloperów to konsola z pełną funkcjonalnością. W konsoli możesz wpisywać dowolny kod JavaScriptu i za pomocą kodu wpływać na działanie strony.
Uruchamianie
W Chrome możesz łatwo uruchomić Narzędzia deweloperskie.
W dowolnym systemie operacyjnym możesz po prostu kliknąć prawym przyciskiem myszy dowolny element na stronie i w menu kontekstowym wybrać opcję „Zbadaj element”. Spowoduje to otwarcie Narzędzi dla deweloperów i przejście do klikniętego elementu.
Aby zobaczyć, jak to działa, otwórz stronę http://www.google.com w przeglądarce Chrome. Kliknij prawym przyciskiem myszy logo Google, aby wyświetlić te opcje:
Po kliknięciu „Sprawdź element” otworzy się panel Narzędzia dla programistów, który powinien wyglądać tak:
Zwróć uwagę, że narzędzia dla deweloperów otworzyły się na karcie Elementy i automatycznie zlokalizowały oraz wyróżniły tag <img> logo Google. Jest to bardzo przydatne, gdy chcesz się dowiedzieć, który kod HTML wygenerował dany element strony.
Możesz też otworzyć Narzędzia dla programistów za pomocą prostego skrótu klawiszowego. W zależności od systemu operacyjnego wykonaj jedną z tych czynności:
- W systemach Windows i Linux wybierz klawisze
Control-Shift-J. - Na Macu wybierz klawisze
Command-Option-J.
Możesz też otworzyć narzędzia w menu głównym przeglądarki.
Na Macu na głównym pasku menu aplikacji wybierz Widok, Deweloper, Narzędzia deweloperskie.
Na komputerze z systemem Windows w prawym górnym rogu kliknij menu Strona, a następnie wybierz Opcje programisty - Narzędzia programisty.
Gdy masz już otwarte Narzędzia dla programistów, zacznijmy od zapoznania się z elementami na stronie głównej Google.
Elementy
Pierwsza karta w Narzędziach dla deweloperów to Elementy. To okno, w którym widzisz strukturę strony internetowej, przedstawioną tak, jak widzi ją przeglądarka.
Przeglądanie DOM
Karty Elementy często odwiedzasz, gdy chcesz zidentyfikować fragment kodu HTML odpowiadający danemu aspektowi strony. Możesz na przykład chcieć sprawdzić, czy obraz ma atrybut identyfikator HTML i jaka jest jego wartość.
Karta Elementy jest czasami lepszym sposobem na „wyświetlenie kodu źródłowego” strony. Na karcie Elementy model DOM strony będzie ładnie sformatowany, co ułatwi Ci wyświetlanie elementów HTML, ich przodków i potomków. Zbyt często strony, które odwiedzasz, mają zminiaturyzowany lub po prostu nieestetyczny kod HTML, przez co trudno jest zobaczyć, jak strona jest sformatowana. Karta Elementy to rozwiązanie umożliwiające wyświetlanie rzeczywistej struktury strony.
Oto przykład danych wyjściowych z opcji „pokaż źródło” na stronie głównej Google.
Powyższy kod źródłowy jest trudny do odczytania, ponieważ jest zoptymalizowany i zminifikowany. Format jest dobry dla klientów i serwerów, ale trudny dla deweloperów.
Jeśli chcesz odczytać kod źródłowy strony, użyj karty Elementy, aby wyświetlić ładnie wydrukowaną hierarchię elementów z wyróżnioną składnią.
Na karcie Elementy możesz też przeglądać, modyfikować i czasem nawet zmieniać style, dane, właściwości i słuchaczy zdarzeń dowolnego elementu na stronie.
Przeglądanie stylów
Charakter kaskadowy CSS sprawia, że przeglądarka stylów na karcie Elementy jest bardzo przydatna. Czasami style nakładają się na siebie i pojawiają się niezamierzone elementy wizualne. Aby debugować taki problem, musisz wiedzieć, która reguła stylów jest stosowana przez przeglądarkę do elementu.
Kliknięcie dowolnego elementu na karcie Elementy spowoduje wyświetlenie wszystkich stylów dołączonych do tego elementu.
Na powyższym zrzucie ekranu widać, że możemy określić wszystkie atrybuty stylu, które są stosowane. Na przykład wypełnienie pochodzi bezpośrednio z atrybutu style elementu <img>. Szerokość i wysokość pochodzą jednak z odpowiednich atrybutów natywnych. Co ciekawe, możesz zauważyć, że style są też dziedziczone z tagu <center>, <body> i innych.
Chociaż warto zobaczyć poszczególne style i ich pochodzenie, bardzo przydatne jest też wyświetlenie ostatecznego zestawu stylów po obliczeniu i zastosowaniu ich do elementu. Aby zobaczyć efekt końcowy, kliknij menu Obliczony styl, jak pokazano na zrzucie ekranu poniżej.
Teraz przyjrzymy się pokrótce innym funkcjom karty Elementy. W kolejnych artykułach omówimy te kwestie bardziej szczegółowo.
Model pudełka
Aby zobaczyć, jak model pudełka jest stosowany do wybranego elementu, kliknij menu Dane:
Właściwości elementu
Wybierając menu Właściwości, możesz wyświetlić wszystkie właściwości elementu, tak jak widzi je JavaScript i DOM:
Odbiorniki
W menu Odbiorcy zdarzeń możesz też zobaczyć odbiorców zdarzeń dołączonych do elementu lub dostępnych w ramach tego elementu:
Podsumowanie
Na karcie Elementy jest wiele funkcji, a w kolejnych artykułach omówimy poszczególne menu.
Użyj karty Elementy, jeśli chcesz zobaczyć, jak strona wygląda w przeglądarce. Na karcie Elementy można szybko i łatwo znaleźć odpowiedzi na częste pytania, np. „jak jest obliczany ten styl?” lub „które tagi HTML wygenerowały ten komponent?”.
Karta Elementy to coś w rodzaju „pokaż źródło” na sterydach. Dzięki niej możesz dokładnie przyjrzeć się swojej stronie.
Gdy już ją przejrzysz, możesz się zastanawiać, jak w ogóle znalazły się tam kod HTML, CSS i obrazy. Karta Zasoby, o której mowa poniżej, pokazuje, jak przeglądarka klienta i serwer WWW komunikują się ze sobą, aby przesyłać te zasoby.
Zasoby
Gdy aplikacja zacznie działać, następnym krokiem powinno być zoptymalizowanie sieci i przepustowości. Twoim celem powinno być jak najszybsze i najbardziej efektywne przeniesienie aplikacji z serwera na klienta. Użytkownicy docenią szybkie wczytywanie stron, a Ty zaoszczędzisz na przepustowości i zasobach serwera. Poza tym Twoja witryna będzie lepiej oceniana w rankingach wyników wyszukiwania Google (które uwzględniają teraz szybkość witryny).
Karta Zasoby w Narzędziach dla deweloperów to okno, w którym możesz zobaczyć komunikację między serwerem internetowym a przeglądarką klienta. Możesz zobaczyć wszystkie zasoby, o które prosi przeglądarka (to zawsze zaskakuje), czas potrzebny na ich pobranie z serwera oraz ilość wykorzystanej przepustowości podczas przesyłania.
Co śmieszne, uruchomienie karty Zasoby wpływa na wydajność wczytywania strony, dlatego domyślnie jest ona wyłączona. Gdy po raz pierwszy użyjesz tej funkcji, musisz ją włączyć na wyświetlanej stronie.
Zalecamy pozostawienie domyślnego ustawienia „Włącz tylko na czas tej sesji”, ponieważ nie chcesz niepotrzebnie ponosić niewielkich kar za wydajność. Gdy klikniesz „Włącz śledzenie zasobów”, strona zostanie ponownie załadowana, a Narzędzia dla programistów będą monitorować i wyświetlać zasoby wysyłane z serwera.
Na poniższym zrzucie ekranu widać zasoby wymagane i wczytane na stronie głównej Google.
Na tym ekranie jest dużo informacji, więc przejdźmy do nich po kolei.
Domyślnie jest to czas żądania i wczytania wszystkich zasobów strony. Przewijanie listy zasobów może Cię zaskoczyć, ponieważ możesz nie wiedzieć, ile indywidualnych żądań wysyła klient. Duża liczba żądań od klienta może znacznie obniżyć wydajność. Pierwszym krokiem do optymalizacji i ostatecznego zmniejszenia zasobów jest uzyskanie informacji o tym, czego dokładnie dotyczy żądanie.
Jeśli interesują Cię tylko obrazy lub arkusze stylów, możesz odfiltrować typ zasobu, korzystając z menu bezpośrednio pod oknem głównej karty.
Zobaczysz też kolejność, w jakiej są żądane zasoby. Dzięki wyświetlaniu harmonogramu możesz lepiej zrozumieć, dlaczego niektóre elementy na stronie pojawiają się później niż inne.
Gdy już poznasz wszystkie żądane zasoby i sposób, w jaki tworzą one całą ścieżkę żądania, możesz przejść do poszczególnych zasobów.
Jeśli zauważysz, że niektóre zasoby są żądane za każdym razem, gdy otwierasz stronę, oznacza to, że nagłówki pamięci podręcznej nie są prawidłowo skonfigurowane. Aby wyświetlić wszystkie nagłówki zasobu, kliknij go na liście po lewej stronie.
Użyj wyświetlenia nagłówków, aby sprawdzić, czy ustawiony jest oczekiwany kod odpowiedzi HTTP i czy podano odpowiednie nagłówki. Jeśli na przykład zasób jest rzadko lub nigdy zmieniany, serwer powinien ustawić nagłówek Expires na bardzo odległą przyszłość. Wskazuje to przeglądarce, że do tego dnia nie należy ponownie wysyłać żądania zasobu. Dzięki temu zmniejszy się liczba połączeń HTTP wymaganych do wyświetlenia strony, co przyspieszy działanie witryny.
Podsumowanie
Karta Zasoby zawiera wiele innych funkcji, które omówimy w następnym artykule.
Na karcie Zasoby możesz sprawdzić, jak przeglądarka klienta komunikuje się z serwerem internetowym. Korzystając z tych informacji, w tym czasu, rozmiaru i kolejności żądań, możesz przeprowadzać inteligentne optymalizacje, aby zmniejszać obciążenie serwera i koszty oraz zwiększać szybkość i wygodę użytkowników.
Szybkość jest bardzo ważna dla Twojej witryny, użytkowników i wyszukiwarek. Gdy zmniejszysz liczbę i rozmiar zasobów oraz odpowiednich rozmów HTTP, następnym krokiem będzie zbadanie i zoptymalizowanie skryptów działających na stronie. Na karcie Skrypty, którą omówimy poniżej, można to zrobić.
Dodatkowe materiały
Więcej informacji o narzędziach dla programistów znajdziesz w tych materiałach:
- Prezentacja i slajdy dotyczące Narzędzi deweloperskich w Chrome z Google I/O 2010
- Samouczek dotyczący Narzędzi dewelopera w Chrome
Zachęcamy też do śledzenia strony html5rocks.com, na której znajdziesz 2 część tego artykułu oraz wiele innych świetnych treści dotyczących HTML5 i Chrome.