Wstęp
Google Chrome to bogata i zaawansowana przeglądarka internetowa, która jest pionierem w zakresie możliwości, jakie dają aplikacje internetowe. Dołożyliśmy wszelkich starań, aby zapewnić użytkownikom bardzo szybkie, stabilne i rozbudowane funkcje przeglądania. Google dba też o zadowolenie deweloperów takich jak Ty. Narzędzia dla programistów, które są dostępne w Chrome i Safari, umożliwiają programistom i programistom stron internetowych głębszy dostęp do kodu przeglądarki i aplikacji internetowej.
Narzędzia dla programistów są częścią projektu open source Webkit. Większość omówień w tym artykule dotyczy zarówno Google Chrome, jak i Safari. Zrzuty ekranu zostały jednak wykonane w przeglądarce Google Chrome 6, dlatego mogą występować niewielkie różnice między przeglądarką.
W tym artykule omówimy ogólnie narzędzia dla deweloperów i wyróżnimy najpopularniejsze oraz najbardziej przydatne funkcje. Naszymi docelowymi odbiorcami są programiści stron internetowych, którzy nie znali Narzędzi dla programistów lub jeszcze ich nie badali. Nawet jeśli jesteś doświadczonym programistą stron internetowych, jesteśmy pewni, że przyda się Ci pewna wskazówka.
Jeśli Twoja instancja narzędzi dla programistów nie zgadza się ze zrzutami ekranu z tego artykułu, zalecamy uaktualnienie do wersji 5. Pozwoli Ci to korzystać z opisanych tu funkcji.
Opis
Ogólnie dostępnych jest 8 głównych grup narzędzi dla programistów, a ich możliwości są poszerzane z każdą wersją. Chrome 5 oferuje teraz elementy, zasoby, skrypty, oś czasu, profile, miejsce na dane, audyty i konsolę.
Elementy
Narzędzie Elementy pozwala zobaczyć stronę internetową w takiej postaci, jaką widzi przeglądarka. Oznacza to, że w narzędziu Elementy możesz zobaczyć nieprzetworzony kod HTML, style CSS i obiektowy model dokumentu oraz manipulować nimi w czasie rzeczywistym.
Zasoby
Dzięki narzędziu Zasoby możesz się dowiedzieć, których komponentów strona internetowa lub aplikacja żąda od serwerów WWW, jak długo trwa przetwarzanie tych żądań i jaką przepustowość jest wymagana. Możesz też wyświetlić nagłówki żądań HTTP i odpowiedzi dla każdego zasobu. Narzędzie Zasoby to doskonały sposób na przyspieszenie czasu wczytywania strony.
Skrypty
Aby zajrzeć do wnętrza kodu JavaScript strony, użyj narzędzia Skrypty. Tutaj znajdziesz listę skryptów wymaganych przez stronę oraz w pełni polecany debuger skryptów. Możesz nawet na bieżąco zmieniać kod JavaScript.
Oś czasu
Dzięki narzędziu Oś czasu masz dostęp do zaawansowanej analizy szybkości i czasu, która umożliwia wgląd w różne działania zza kulis działania Chrome. Możesz się dowiedzieć, ile czasu przeglądarka potrzebuje na obsługę zdarzeń DOM, renderowanie układów stron i malowanie okna.
Profile
Narzędzie Profile pomaga przechwytywać i analizować wydajność skryptów JavaScript. Możesz na przykład dowiedzieć się, które funkcje wymagają najwięcej czasu i dowiedzieć się, gdzie dokładnie musisz przeprowadzić optymalizację.
Miejsce na dane
Nowoczesne aplikacje internetowe wymagają większej trwałości niż tylko pliki cookie, a narzędzie Pamięć masowa pozwala śledzić i debugować dane z pamięci lokalnej przeglądarki oraz wykonywać na niej zapytania. Narzędzie to może wyświetlać dane przechowywane w lokalnych bazach danych, pamięci lokalnej, pamięci sesji i plikach cookie oraz wykonywać dotyczące ich zapytania.
Kontrola
Narzędzie Audyt jest jak siedzi obok konsultanta ds. optymalizacji witryny. Narzędzie to może przeanalizować wczytywaną stronę, a następnie przedstawić sugestie i metody optymalizacji, które umożliwiają skrócenie czasu wczytywania strony oraz zwiększenie postrzeganej (i rzeczywistej) szybkości działania.
Konsola
Narzędzia dla programistów oferują w pełni wyposażoną konsolę. W konsoli możesz wpisać dowolny kod JavaScript i w sposób programowy wchodzić w interakcję ze stroną.
Uruchamianie
Z poziomu Chrome możesz łatwo uruchomić Narzędzia dla programistów.
W dowolnym systemie operacyjnym możesz kliknąć prawym przyciskiem myszy dowolny element na stronie i wybrać opcję „Zbadaj element” z menu kontekstowego. Otworzy się narzędzia dla programistów i przejdziesz od razu do klikniętego elementu.
Aby to zrobić, otwórz w przeglądarce Chrome http://www.google.com. Kliknij logo Google prawym przyciskiem myszy, aby wyświetlić te opcje:
Kliknięcie „Zbadaj element” spowoduje otworzenie Narzędzi dla programistów, które powinny wyglądać mniej więcej tak:
Zwróć uwagę, że na karcie Elementy otworzyły się Narzędzia dla deweloperów, a następnie automatycznie przekierowano do i wyróżniono tag <img> dotyczący logo Google. To bardzo przydatne rozwiązanie, jeśli ciekawi Cię, jaki kod HTML wygenerował konkretny element strony.
Narzędzia dla programistów możesz też otwierać za pomocą prostego skrótu klawiszowego. W zależności od systemu operacyjnego wykonaj te czynności:
- W systemach Windows i Linux wybierz klucze
Control-Shift-J. - Na Macu wybierz klawisze
Command-Option-J.
Możesz też otworzyć narzędzia z głównego menu przeglądarki.
Na Macu i na głównym pasku menu aplikacji wybierz Widok, Programista, Narzędzia dla programistów.
Na komputerze z systemem Windows użyj menu Strona w prawym górnym rogu i wybierz Programista, Narzędzia dla programistów.
Po przygotowaniu i otwarciu Narzędzi dla programistów przyjrzyjmy się elementom na stronie głównej Google.
Elementy
Pierwsza karta w Narzędziach dla programistów to Elementy. Jest to okno w strukturze strony internetowej wyświetlane w takiej postaci, jaką widzi przeglądarka.
Przeglądanie DOM
Karty Elementy pojawiają się często, gdy trzeba zidentyfikować fragment kodu HTML dotyczący pewnego aspektu strony. Możesz na przykład zapytać, czy obraz ma atrybut HTML „id” i jaka jest jego wartość.
Karta Elementy jest czasami lepszym sposobem na „wyświetlenie źródła” strony. DOM strony będzie odpowiednio sformatowany na karcie Elementy oraz będzie zawierać elementy HTML, elementy nadrzędne i potomne. Zbyt często strony, które odwiedzasz, mają zminifikowany lub po prostu brzydki kod HTML, co utrudnia zrozumienie struktury strony. Za pomocą karty Elementy możesz zobaczyć rzeczywistą strukturę strony.
Poniżej znajdują się na przykład dane wyjściowe ze źródła „wyświetl źródło” na stronie głównej Google.
Trudno odczytać powyższe źródło, ponieważ jest zoptymalizowane i zminimalizowane. Format jest odpowiedni dla klientów i serwerów, ale dla programistów jest trudny.
Jeśli chcesz sprawdzić źródło strony, użyj karty Elementy, aby wyświetlić przejrzystą i podświetloną składnię hierarchię elementów.
Karta Elementy umożliwia też przeglądanie, interakcję, a czasem nawet zmianę stylów, danych, właściwości i detektorów zdarzeń na stronie.
Przeglądanie stylów
Kaskadowy charakter kodu CSS sprawia, że przeglądarka Style na karcie Elementy jest bardzo przydatna. Czasami style się zawijają i pojawiają się niezamierzone elementy wizualne. Wiedza o tym, która reguła stylu jest stosowana przez przeglądarkę do danego elementu, pomaga w debugowaniu tego typu błędów.
Kliknięcie dowolnego elementu na karcie Elementy spowoduje wyświetlenie wszystkich powiązanych z nim stylów.
Na zrzucie ekranu powyżej widać, że jesteśmy w stanie rozpoznać wszystkie stosowane atrybuty stylu. Na przykład dopełnienie pochodzi bezpośrednio z atrybutu stylu elementu <img>. ale szerokość i wysokość pochodzą z odpowiednich atrybutów natywnych. Co ciekawe, style są też dziedziczone z tagu <center>, tagu <body> i innych elementów.
Dobrze jest zobaczyć poszczególne style i ich źródła, ale bardzo przydatne jest też poznanie ostatecznego zestawu stylów po jego obliczeniu i zastosowaniu do elementu. Ostateczną wersję produktu możesz zobaczyć, wybierając menu Styl wynikowy, jak pokazano na zrzucie ekranu poniżej.
Następnie przyjrzymy się pokrótce innym funkcjom dostępnym na karcie Elementy. W kolejnych artykułach omówimy dokładniej te kwestie.
Model prostokąta
Aby zobaczyć model pola zastosowany do wybranego elementu, wybierz menu Dane:
Właściwości elementu
Po wybraniu menu Właściwości możesz zobaczyć wszystkie właściwości elementu w takiej postaci, w jakiej zobaczyłby je JavaScript i model DOM:
Odbiorniki
W menu Odbiorniki możesz też zobaczyć, do których elementów są dołączone detektory zdarzeń lub które wyświetlają się jako dymki:
Podsumowanie
Na karcie Elementy jest dostępnych wiele funkcji, a kolejne artykuły będą bardziej szczegółowe.
Karta Elementy pozwala sprawdzić, jak strona wygląda w przeglądarce. Typowe problemy, takie jak „Jak oblicza się ten styl?” czy „Jakie tagi HTML wygenerowały ten komponent?” można szybko i łatwo rozwiązać na karcie Elementy.
Potraktuj kartę Elementy jak nadmiarowe źródło wyświetlania, dzięki czemu będziesz dokładnie widzieć swoją stronę.
Po przejrzeniu strony być może zastanawiasz się, jak kod HTML, CSS i obrazy znalazły się tam po raz pierwszy. Karta Zasoby, opisana poniżej, przedstawia, w jaki sposób przeglądarka klienta i serwer WWW komunikują się w celu wysłania tych zasobów.
Zasoby
Gdy aplikacja zacznie działać, następnym krokiem powinno być zoptymalizowanie wydajności sieci i przepustowości. Staraj się przesyłać aplikację z serwera do klienta jak najszybciej i najwydajniej. Użytkownicy podziękują Ci za szybkie wczytywanie się stron, zaoszczędzisz na przepustowości łącza i zasobach serwera, a także uzyskasz lepszy wynik w rankingu wyników wyszukiwania Google (co teraz uwzględnia szybkość witryny).
Karta Zasoby w Narzędziach dla programistów to okno na komunikację między serwerem WWW a przeglądarką klienta. Widać wszystkie zasoby żądane przez przeglądarkę (to zawsze jest bardzo zaskakujące), czas potrzebny na ich odebranie z serwera oraz wykorzystanie przepustowości podczas transferu.
Jak na ironię, uruchomienie karty Zasoby ma wpływ na wydajność wczytywania strony, dlatego jest domyślnie wyłączone. Gdy otworzysz tę funkcję po raz pierwszy, musisz ją włączyć dla przeglądanej strony.
Zalecamy pozostawienie domyślnego ustawienia „Włącz tylko w tej sesji”, ponieważ nie spowoduje to naliczenia niepotrzebnie obniżonej wydajności. Po kliknięciu „Włącz śledzenie zasobów” strona załaduje się ponownie, a narzędzia dla deweloperów będą monitorować i wyświetlać zasoby wysyłane z serwera.
Zrzut ekranu poniżej pokazuje wymagane i wczytane zasoby strony głównej Google.
Na ekranie jest bardzo dużo informacji, więc przeanalizujmy je krok po kroku.
Domyślne działanie pokazuje, ile czasu zajęło żądanie i załadowanie wszystkich zasobów strony. Możesz się nie dziwić, jeśli przewiniesz listę Zasoby w dół, ponieważ nie wiesz, ile indywidualnych żądań zgłasza klient. Duża liczba żądań od klienta może znacząco wpłynąć na wydajność. Uzyskanie informacji o żądanych zasobach jest pierwszym krokiem do optymalizacji i ostatecznego zmniejszenia zasobów.
Jeśli interesują Cię tylko obrazy lub arkusze stylów, możesz filtrować typ zasobu, korzystając z menu bezpośrednio pod głównym oknem karty.
Widzimy także kolejność żądań zasobów. Korzystając z osi czasu, możesz lepiej zrozumieć, dlaczego niektóre elementy na stronie pojawiają się później niż inne.
Po zapoznaniu się ze wszystkimi żądanymi zasobami i ich sposobem tworzenia całego harmonogramu żądań możesz przejść do poszczególnych zasobów.
Jeśli zauważysz, że przy każdym otwarciu strony są wysyłane jakieś zasoby, oznacza to, że nagłówki buforowania nie są prawidłowo skonfigurowane. Aby wyświetlić wszystkie nagłówki danego zasobu, kliknij go na liście po lewej stronie.
Widok Nagłówki umożliwia ustawienie oczekiwanego kodu odpowiedzi HTTP i dostarczenie odpowiednich nagłówków. Jeśli na przykład zasób jest rzadko zmieniany lub nigdy się nie zmienia, serwer powinien ustawić nagłówek Expires na daleko w przyszłości. Informuje ona przeglądarkę, że żądanie zasobu nie powinno być do tego czasu wysyłane ponownie. Zmniejsza to liczbę połączeń HTTP wymaganych przez Twoją stronę, a tym samym przyspiesza działanie witryny.
Podsumowanie
Karta Zasoby obejmuje znacznie więcej funkcji, co omówimy w kolejnym artykule.
Na karcie Zasoby można się dowiedzieć, w jaki sposób przeglądarka klienta komunikuje się z serwerem WWW. Na podstawie tych informacji, takich jak czas żądań, rozmiar żądań i ich kolejność, możesz wprowadzać inteligentne optymalizacje, aby zmniejszyć obciążenie serwera i koszty, a także zwiększyć szybkość i wygodę użytkowników.
Szybkość jest bardzo ważna dla witryny, użytkowników i wyszukiwarek. Po zmniejszeniu liczby i rozmiaru zasobów i prowadzeniu odpowiednich rozmów HTTP następnym krokiem jest zbadanie i zoptymalizowanie skryptów działających na Twojej stronie. Na szczęście karta Skrypty, omówiona poniżej, spełnia to zadanie.
Dodatkowe materiały
Więcej informacji o narzędziach dla programistów znajdziesz w tych artykułach:
- Film i slajdy z Google I/O 2010 poświęcone Narzędziom deweloperskim w Chrome
- Samouczek dotyczący Narzędzi deweloperskich w Chrome
Oczywiście zaglądaj na stronę html5rocks.com, gdzie znajdziesz część 2. tego artykułu, a także wiele innych świetnych treści dotyczących HTML5 i Chrome.