Wstęp
Google Chrome to wszechstronna i zaawansowana przeglądarka internetowa, która jest pionierką w zakresie możliwości aplikacji internetowych. Firma Google ciężko pracowała nad zapewnieniem użytkownikom szybkiego, bardzo stabilnego i bogatego w funkcje przeglądania treści. Google dba też o zadowolenie deweloperów takich jak Ty z Chrome. Narzędzia dla programistów, dostępne w Chrome oraz Safari, umożliwiają programistom i programistom stron internetowych dostęp do kodu przeglądarki i aplikacji internetowej.
Narzędzia dla programistów wchodzą w skład projektu Webkit typu open source. Większość dyskusji 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 w zawartości przeglądarki.
W tym artykule omówimy ogólny przewodnik po narzędziach dla programistów i przedstawimy ich najpopularniejsze i przydatne funkcje. Naszymi docelowymi odbiorcami są programiści stron internetowych, którzy nie znają narzędzi dla programistów lub jeszcze nie znają tych narzędzi. Jesteśmy jednak pewni, że nawet jeśli jesteś doświadczonym programistą stron internetowych, uzyskasz wskazówkę.
Jeśli używasz narzędzi dla programistów w innej wersji niż zrzuty ekranu wymienione w tym artykule, zalecamy przejście na wersję 5. Pozwoli Ci to zapoznać się ze wszystkimi opisanymi tu funkcjami i uzyskać dostęp do wszystkich opisanych tu funkcji.
Przegląd
W widoku Narzędzia dla programistów dostępnych jest 8 głównych grup narzędzi, a ich możliwości są rozszerzane z każdą wersją. W Chrome 5 dostępne są teraz Elementy, zasoby, skrypty, oś czasu, profile, miejsce na dane, audyty i konsola.
Elementy
Narzędzie Elementy pozwala zobaczyć stronę internetową w takiej postaci, w jakiej widzi ją przeglądarka. Oznacza to, że narzędzie Elements pozwala wyświetlać nieprzetworzony kod HTML i style CSS oraz model obiektu dokumentu, a także modyfikować elementy w czasie rzeczywistym.
Zasoby
Narzędzie Zasoby umożliwia uzyskanie informacji o składnikach, których strona internetowa lub aplikacja żąda od serwerów WWW, czasu potrzebnego na przesłanie takich żądań oraz wymaganej przepustowości. Możesz też wyświetlić nagłówki żądania i odpowiedzi HTTP każdego z zasobów. Narzędzie Zasoby znakomicie pomaga przyspieszyć czas wczytywania strony.
Skrypty
Aby zajrzeć do kodu JavaScript strony, użyj narzędzia Skrypty. Tutaj znajdziesz listę skryptów wymaganych przez stronę oraz w pełni funkcjonalny debuger skryptów. Możesz nawet na bieżąco zmieniać JavaScript.
Oś czasu
Aby przeprowadzić zaawansowaną analizę czasu i szybkości, narzędzie Oś czasu zapewnia szczegółowy wgląd w różne działania wykonywane za kulisami Chrome. Możesz dowiedzieć się, ile czasu zajmuje przeglądarce obsługa zdarzeń DOM, renderowanie układów stron i wyrenderowanie okna.
Profile
Narzędzie Profile pomaga rejestrować i analizować wydajność skryptów JavaScript. Możesz na przykład dowiedzieć się, które funkcje wymagają najwięcej czasu, i zacząć optymalizować.
Miejsce na dane
Nowoczesne aplikacje internetowe wymagają większej trwałości niż plików cookie, a narzędzie do przechowywania danych umożliwia śledzenie i debugowanie pamięci lokalnej przeglądarki oraz wykonywanie na niej zapytań. To narzędzie umożliwia wyświetlanie danych przechowywanych w lokalnych bazach danych, pamięci lokalnej, pamięci sesji i plikach cookie oraz wykonywanie na nich zapytań.
Skontroluj
Narzędzie audytu działa tak, jakby siedział przy Tobie konsultant ds. optymalizacji witryn. To narzędzie może analizować wczytywaną stronę, a następnie wyświetlać sugestie i optymalizacje pozwalające skrócić czas wczytywania strony oraz zwiększyć postrzeganą (i rzeczywistą) szybkość reakcji.
Konsola
Narzędzia dla programistów zawierają też w pełni polecaną konsolę. W konsoli możesz wpisać dowolny kod JavaScript i programować interakcję ze stroną.
Uruchamianie
Uruchamianie Narzędzi dla programistów w Chrome jest proste.
W każdym systemie operacyjnym możesz po prostu kliknąć prawym przyciskiem myszy dowolny element na stronie i wybrać opcję „Zbadaj element” z menu kontekstowego. Spowoduje to otwarcie narzędzi dla programistów i przejście bezpośrednio do klikniętego elementu.
Aby zobaczyć, jak to działa, otwórz http://www.google.com w przeglądarce Chrome. Kliknij logo Google prawym przyciskiem myszy, aby wyświetlić następujące opcje:
Po kliknięciu „Zbadaj element” wyświetlone zostaną narzędzia dla programistów, które powinny wyglądać mniej więcej tak:
Zwróć uwagę, że Narzędzia dla programistów otworzyły się na karcie Elements i automatycznie przeszły do tagu <img> zawierającego logo Google. Jest to bardzo przydatne, gdy zastanawiasz się, który kod HTML wygenerował konkretny element strony.
Narzędzia dla programistów możesz też otworzyć za pomocą prostego skrótu klawiszowego. W zależności od systemu operacyjnego spróbuj wykonać następujące czynności:
- W systemach Windows i Linux naciśnij klawisze
Control-Shift-J. - Na Macu naciśnij klawisze
Command-Option-J.
Narzędzia można też otwierać z głównego menu przeglądarki.
Na Macu i na głównym pasku menu aplikacji kliknij Widok, Programista, Narzędzia dla programistów.
Na komputerze z systemem Windows w prawym górnym rogu kliknij menu Strona, a następnie wybierz kolejno Programista i Narzędzia dla deweloperów.
Skoro masz już otwarte i gotowe narzędzia dla programistów, zacznijmy od poznania elementów na stronie głównej Google.
Elementy
Pierwsza karta w Narzędziach dla programistów to Elements. Jest to okno na strukturę strony internetowej pokazywane w takiej postaci, w jakiej widzi ją przeglądarka.
Przeglądanie DOM
Karty Elementy często pojawiają się, gdy trzeba wskazać fragment HTML dotyczący jakiegoś aspektu strony. Ciekawi Cię na przykład, czy obraz ma atrybut HTML „id” i jaka jest jego wartość.
Czasami lepszy sposób „wyświetlania źródła” strony można uzyskać na karcie Elementy. Na karcie Elements DOM strony będzie ładnie sformatowany i będzie można łatwo wyświetlić elementy HTML oraz ich elementy nadrzędne i potomne. Zbyt często odwiedzane przez Ciebie strony mają zmniejszony kod HTML lub po prostu brzydki kod HTML, który utrudnia sprawdzenie struktury strony. Karta Elementy to rozwiązanie umożliwiające wyświetlenie rzeczywistej struktury strony.
Poniżej znajdują się na przykład dane wyjściowe z „widoku źródła” strony głównej Google.
Ciężko przeczytać powyższe źródło, ponieważ jest ono zoptymalizowane i zmniejszone. Format jest odpowiedni dla klientów i serwerów, ale trudny dla programistów.
Jeśli chcesz odczytać źródło strony, na karcie Elementy możesz wyświetlić hierarchię elementów z podświetlonymi składnią i pięknie drukowanymi.
Na karcie Elementy możesz też przeglądać, wchodzić w interakcje, a czasem nawet zmieniać style, wskaźniki, właściwości i detektory zdarzeń dowolnego elementu na stronie.
Przeglądanie stylów
Kaskadowy charakter kodu CSS sprawia, że bardzo przydatna jest przeglądarka Style na karcie Elements. Czasami style zawijają się do siebie i pojawiają się niezamierzone treści wizualne. Wiedza o tym, którą regułę stylu stosuje przeglądarka do danego elementu, ułatwi Ci debugowanie takiego problemu.
Kliknięcie dowolnego elementu na karcie Elementy spowoduje wyświetlenie wszystkich powiązanych z nim stylów.
Jak widać na zrzucie ekranu powyżej, jesteśmy w stanie określić wszystkie zastosowane atrybuty stylu. Na przykład dopełnienie pochodzi bezpośrednio z atrybutu stylu elementu <img>. Szerokość i wysokość pochodzą jednak z odpowiednich atrybutów natywnych. Co ciekawe, są style odziedziczone także z tagu <center>, tagu <body> i innych.
Dobrze jest widzieć poszczególne style i ich źródła, ale dobrze jest też zobaczyć ostateczny zestaw stylów po jego obliczeniu i zastosowaniu do elementu. Ostateczną wersję produktu możesz zobaczyć, wybierając menu Styl wynikowy, tak jak na zrzucie ekranu poniżej.
Następnie przyjrzymy się pokrótce innym funkcjom dostępnym na karcie Elementy. Te kwestie omówimy bardziej szczegółowo w kolejnych artykułach.
Model skrzynkowy
Aby zobaczyć model ramkowy, który jest stosowany do wybranego elementu, wybierz menu Wskaźniki:
Właściwości elementu
Aby zobaczyć wszystkie właściwości elementu w takiej postaci, w jakiej będą widoczne dla JavaScriptu i modelu DOM, wybierając menu Właściwości:
Odbiorniki
Możesz też zobaczyć detektory zdarzeń podłączone do elementu lub ten element wyświetla się za pomocą dymka w menu Detektory zdarzeń:
Podsumowanie
Karta Elementy zawiera wiele funkcji. W kolejnych artykułach dokładniej omawiamy poszczególne menu.
Karta Elementy służy do sprawdzania, jak strona wygląda z perspektywy samej przeglądarki. Na karcie Elementy można szybko i łatwo rozwiązać typowe problemy, takie jak „Jak jest obliczany ten styl?” lub „Jakie tagi HTML wygenerowały ten komponent?”.
Kartę Elementy możesz traktować jak dodatkowe „wyświetlenie źródła” i uzyskiwać bardzo wyraźny wgląd w stronę.
Po zapoznaniu się ze stroną możesz się zastanawiać, skąd wzięła się kod HTML, CSS i obrazy. Na karcie Zasoby, która została opisana poniżej, widać, w jaki sposób przeglądarka klienta i serwer WWW komunikują się, aby przesłać te zasoby.
Zasoby
Gdy aplikacja zacznie już działać, należy zoptymalizować wydajność sieci i przepustowości. Staraj się jak najszybciej i najefektywniej przesyłać aplikacje z serwera do klienta. Użytkownicy doceniają szybkie wczytywanie stron, zaoszczędzisz na przepustowości i zasobach serwera, a także uzyskasz wyższe pozycje w wynikach wyszukiwania Google (które teraz będą uwzględniać szybkość witryny).
Karta Zasoby w Narzędziach dla programistów to okno komunikacji między serwerem WWW a przeglądarką klienta. Zobaczysz wszystkie zasoby żądane przez przeglądarkę (jest to zawsze bardzo zaskakujące!), czas potrzebny na odebranie ich z serwera oraz wykorzystanie przepustowości podczas transferu.
Jak na imitację, uruchomienie karty Zasoby wpływa na szybkość wczytywania strony, więc jest ona domyślnie wyłączona. Po pierwszym uruchomieniu tej funkcji należy ją włączyć na wyświetlanej stronie.
Zalecamy pozostawienie zaznaczonego ustawienia domyślnego „Włącz tylko w przypadku tej sesji”, ponieważ pozwoli to uniknąć niepotrzebnego narażenia użytkownika na małą karę za wydajność. Gdy klikniesz „Włącz śledzenie zasobów”, strona załaduje się ponownie, a narzędzia dla programistów będą monitorować i wyświetlać zasoby wysyłane z serwera.
Poniższy zrzut ekranu przedstawia zasoby wymagane i załadowane na stronie głównej Google.
Na tym ekranie znajduje się wiele informacji, dlatego warto przeanalizować je osobno.
Domyślnie pokazuje, ile czasu zajęło żądanie i wczytanie wszystkich zasobów strony. Przewijanie w dół listy Zasoby może Cię zaskoczyć, ponieważ możesz nie wiedzieć, ile indywidualnych żądań jest wystosowanych przez klienta. Duża liczba żądań od klienta może znacząco wpłynąć na wydajność. Pierwszym krokiem w kierunku optymalizacji i ostatecznej redukcji zasobów jest uzyskanie wglądu w wymagania.
Jeśli interesują Cię tylko obrazy lub arkusze stylów, możesz filtrować typ zasobów za pomocą menu bezpośrednio pod głównym oknem karty.
Dowiesz się też, w jakiej kolejności są wymagane zasoby. Korzystając z osi czasu, możesz lepiej zrozumieć, dlaczego niektóre elementy na stronie pojawiają się później niż inne.
Gdy zapoznasz się z informacjami o wszystkich żądanych zasobach i o tym, jak tworzą one cały harmonogram żądań, możesz przejść do poszczególnych zasobów.
Jeśli zauważysz, że przy każdym otwarciu strony żądane są niektóre zasoby, oznacza to, że nagłówki buforowania nie są prawidłowo skonfigurowane. Możesz wyświetlić wszystkie nagłówki zasobu, klikając zasób na liście po lewej stronie.
Na ekranie Nagłówki upewnij się, że ustawiono oczekiwany kod odpowiedzi HTTP i podano odpowiednie nagłówki. Jeśli na przykład zasób jest rzadko zmieniany lub nigdy się nie zmienia, serwer powinien ustawić nagłówek Wygasa na daleką przyszłość. Informuje to przeglądarkę, że żądania zasobu nie powinny być wysyłane do tego dnia ponownie. Zmniejsza to liczbę połączeń HTTP wymaganych dla strony, a tym samym przyspiesza działanie witryny.
Podsumowanie
Karta Zasoby zawiera dużo więcej informacji, które omówimy w kolejnym artykule.
Karta Zasoby umożliwia wgląd w sposób, w jaki przeglądarka kliencka komunikuje się z serwerem WWW. Na podstawie tych informacji, takich jak czas i rozmiar żądań oraz kolejność żądań, możesz dokonywać inteligentnych optymalizacji, które zmniejszają obciążenie serwera i koszty oraz przyspieszają działanie i poprawiają wygodę użytkowników.
Szybkość ma duże znaczenie dla Twojej witryny, użytkowników i wyszukiwarek. Po zmniejszeniu liczby i rozmiaru zasobów oraz przeprowadzeniu odpowiednich rozmów HTTP kolejnym krokiem jest zbadanie i zoptymalizowanie skryptów działających na stronie. Na szczęście właśnie to robimy na karcie Skrypty.
Dodatkowe materiały
Więcej informacji o narzędziach dla programistów znajdziesz w tych artykułach:
- Film i slajdy z prezentacją narzędzi dla programistów Chrome z konferencji Google I/O 2010
- Samouczek dotyczący narzędzi dla programistów w Chrome
Oczywiście w witrynie html5rocks.com znajdziesz 2. część tego artykułu oraz inne ciekawe materiały dotyczące HTML5 i Chrome.