Chrome DevTools Revolutions 2013

Arthur Evans

Tim Statler

Wprowadzenie

Wraz ze wzrostem złożoności i funkcjonalności aplikacji internetowych zwiększa się też znaczenie Narzędzi deweloperskich w Chrome. W tym podsumowaniu prezentacji Paul Irisha z Google I/O 2013 Chrome DevTools Revolutions 2013 znajdziesz najnowsze funkcje, które rewolucjonizują sposób tworzenia i testowania aplikacji internetowych.

Jeśli przegapiłeś/przegapiłaś wykład Paula, możesz obejrzeć go powyżej (śmiało, poczekaj chwilę) lub przejść od razu do podsumowania funkcji:

• Workspaces umożliwia korzystanie z Narzędzi deweloperskich jako edytora kodu źródłowego.
• Jeśli używasz Sass, z pewnością docenisz możliwość edytowania plików Sass (.scss) w Narzędziach dla programistów i bezpośredniego wyświetlania zmian na stronie.
• Debugowanie stron w Chrome na Androida zdalnie było możliwe już od jakiegoś czasu, ale rozszerzenie ADB ułatwia łączenie się z urządzeniami z Androidem. Odwrotne przekierowanie portów umożliwia łatwe nawiązywanie połączenia z localhostem na komputerze programistycznym z urządzenia.
• Wydajność zawsze jest problemem w przypadku aplikacji internetowych, a DevTools zawiera kilka nowych funkcji, które ułatwiają lokalizowanie wąskich gardeł, w tym nową wizualizację wykresu płomienistego do profilowania procesora i kilka nowych narzędzi do debugowania problemów z wydajnością związanych z renderowaniem i wykorzystaniem pamięci.

Te funkcje są dostępne w Chrome 28, który jest teraz dostępny w kanale stabilnym.

Obszary robocze

Obszary robocze umożliwiają mapowanie zasobów udostępnianych przez lokalny serwer internetowy na pliki na dysku. Dzięki temu możesz edytować dowolny typ pliku źródłowego w panelu Źródła, a zmiany będą zapisywane na dysku. Podobnie zmiany wprowadzone w zewnętrznym edytorze są natychmiast widoczne w panelu Źródła.

Zrzut ekranu poniżej pokazuje przykład działania przestrzeni roboczych. Witryna Kalendarza została załadowana przez localhost, a panel Źródła zawiera widok lokalnego systemu plików katalogu głównego witryny. Zmiany wprowadzone w plikach w tym folderze są zapisywane na dysku. Na zrzucie ekranu poniżej widać niezapisane zmiany w pliku Calendar.css, dlatego obok jego nazwy znajduje się gwiazdka.

Naciśnięcie Control+S lub Command+S spowoduje zapisanie zmian na dysku.

Podobnie zmiany stylów elementu wprowadzone w panelu Elementy są widoczne zarówno w panelu Źródła, jak i w zewnętrznym edytorze. Uwaga:

• Zmiany w DOM w panelu Elementy nie są zapisywane. Zapisywane są tylko zmiany stylu w panelu Elementy.
• Zmiana jest możliwa tylko w przypadku stylów zdefiniowanych w zewnętrznym pliku CSS. Zmiany w element.style i stylach wstawianych nie są zapisywane na dysku. Jeśli masz stylizowane wstawiane, możesz je zmienić w panelu Źródła.
• Zmiany stylu w panelu Elementy są zapisywane natychmiast; nie musisz naciskać Control+S ani Command+S.

Dodawanie folderu obszaru roboczego

Korzystanie z przestrzeni roboczych składa się z 2 części: udostępniania zawartości folderu lokalnego w DevTools i mapowania tego folderu na adres URL.

Aby dodać nowy folder obszaru roboczego:

1. W Narzędziach deweloperskich kliknij Ustawienia , aby otworzyć ustawienia Narzędzi deweloperskich.
2. Kliknij Obszar roboczy.
3. Kliknij Dodaj folder.
4. Przejdź do folderu zawierającego pliki źródłowe projektu i kliknij Wybierz.
5. Gdy pojawi się prośba, kliknij Zezwól, aby przyznać Narzędziom dla programistów pełny dostęp do folderu.

Panel Źródła zawiera nowy folder obszaru roboczego wraz ze źródłami wczytanymi przez localhost. Możesz teraz edytować pliki w folderze workspace na bieżąco, a zmiany będą zapisywane na dysku.

Mapowanie folderu na adres URL

Po dodaniu folderu obszaru roboczego możesz go zmapować na adres URL. Gdy Chrome wczyta określony adres URL, panel Źródła wyświetli zawartość folderu obszaru roboczego zamiast zawartości folderu sieci.

Aby zmapować folder obszaru roboczego na adres URL:

1. W panelu Źródła kliknij plik prawym przyciskiem myszy lub naciśnij Ctrl + kliknij plik w folderze obszaru roboczego.
2. Wybierz Mapuj do zasobu sieci.

   

3. Wybierz odpowiedni zasób sieci na aktualnie wczytanej stronie.

   

4. Załaduj ponownie stronę w Chrome.

W panelu Źródła powinna teraz być widoczna tylko zawartość folderu lokalnego obszaru roboczego witryny, a nie źródła localhost, jak pokazano na ilustracji poniżej.

Uwaga: jeśli nadal widzisz źródła localhost, odśwież stronę w Chrome.

Folder sieci można połączyć z folderem obszaru roboczego na 2 sposoby:

• Kliknij prawym przyciskiem myszy (lub naciśnij Control + kliknij) zasób sieciowy i wybierz Mapuj na zasób systemu plików.
• Dodaj mapowania ręcznie na karcie Workspace w oknie ustawień DevTools.

Debugowanie mapy źródeł Sass/CSS

Debugowanie Sass (mapa źródeł CSS) umożliwia edytowanie plików Sass (.scss) w panelu Źródła i wyświetlanie wyników bez konieczności opuszczania DevTools ani odświeżania strony. Gdy sprawdzasz element, którego styl jest określony przez wygenerowany przez Sass plik CSS, w panelu Elementy wyświetlany jest link do pliku .scss, a nie wygenerowanego pliku .css.

Kliknięcie linku powoduje otwarcie (edytowalny) plik SCSS w panelu Źródła. Możesz wprowadzić w nim dowolne zmiany.

Gdy zapiszesz zmiany w pliku SCSS (w DevTools lub gdzie indziej), kompilator Sass ponownie wygeneruje pliki CSS. Następnie narzędzia DevTools ponownie wczytują nowo wygenerowany plik CSS.

Uwaga: technicznie ta funkcja powinna działać z dowolnym preprocesorem CSS, który obsługuje mapy źródeł. Więcej informacji znajdziesz w dokumentacji DevTools na temat pracy z przetwarzaczami CSS.

Debugowanie za pomocą Sass

Aby debugować Sassa w Chrome, musisz mieć wersję kompilatora Sass przedpremierową, która jest jedyną wersją, która obecnie obsługuje generowanie mapy źródeł.

gem install sass -v '>=3.3.0alpha' --pre

Musisz też włączyć funkcję debugowania Sass w eksperymentach w Narzędziach deweloperskich:

1. Otwórz about:flags w Chrome.
2. Włącz Włącz eksperymenty w narzędziach dla deweloperów.
3. Uruchom ponownie Chrome.
4. Otwórz ustawienia Narzędzi deweloperskich i kliknij Eksperymenty.
5. Włącz Obsługę Sass (lub Debugowanie arkuszy stylów Sass, w zależności od używanej wersji przeglądarki).

Po zainstalowaniu programu Sass uruchom kompilator Sass, aby monitorować zmiany w plikach źródłowych Sass i tworzyć pliki mapy źródeł dla każdego wygenerowanego pliku CSS, na przykład:

sass --watch **--sourcemap** sass/styles.scss:styles.css

Jeśli używasz narzędzia Compass, pamiętaj, że nie obsługuje ono jeszcze wersji wstępnej Sass, więc nie możesz debugować Sassa za jego pomocą.

Jak to działa

W przypadku każdego przetwarzanego pliku źródłowego SCSS kompilator Sass generuje plik mapy źródłowej (plik .map) oprócz skompilowanego kodu CSS. Plik mapy źródłowej to plik JSON, który definiuje mapowania między plikiem .scss a plikami .css. Każdy plik CSS zawiera adnotację, która określa URL pliku mapy źródłowej, osadzony w specjalnym komentarzu:

/*# sourceMappingURL=<url>; */

Na przykład w przypadku tego pliku SCSS:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass generuje plik CSS z adnotacją sourceMappingURL:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

Poniżej znajduje się przykładowy plik mapy źródeł:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Łatwiejsze debugowanie zdalne w Chrome na Androida

Kilka nowych funkcji w Narzędziach deweloperskich ułatwia konfigurowanie zdalnego debugowania w Chrome na Androida: rozszerzenie ADB i odwrotne przekierowanie portu.

Rozszerzenie ADB do Chrome upraszcza proces konfigurowania debugowania zdalnego. Zapewnia ona te korzyści:

• Zawiera pakiet Android Debug Bridge (ADB), więc nie musisz go instalować.
• Nie wymaga interakcji z wiersza poleceń.
• Interfejs umożliwiający łatwe uruchamianie i zatrzymywanie demona ADB oraz wyświetlanie połączonych urządzeń.

Przekierowanie portu w drugą stronę ułatwia połączenie Chrome na Androidzie z serwerem internetowym działającym na komputerze lokalnym. W niektórych środowiskach sieciowych bez sztuczek z DNS-em jest to trudne do wykonania.

Korzystanie z rozszerzenia ADB

Najpierw zainstaluj rozszerzenie ADB do Chrome ze sklepu Chrome Web Store. Aby zainstalować rozszerzenie, kliknij Dodaj do Chrome.

Uwaga: instalowanie rozszerzeń ze sklepu Chrome Web Store nie jest obsługiwane w systemie Windows 8. Jeśli masz problemy z instalacją z Chrome Web Store, zapoznaj się z artykułem Zdalne debugowanie na Androidzie, aby poznać alternatywne instrukcje instalacji.

Po zainstalowaniu w Chrome pojawi się szara ikona menu Androida. Aby uruchomić ADB, kliknij ikonę, a potem kliknij Uruchom ADB.

Gdy ADB zostanie uruchomione, ikona menu zmieni kolor na zielony i wyświetli liczbę aktualnie połączonych urządzeń (jeśli takie są).

Kliknij Wyświetl urządzenia, aby otworzyć stronę about:inspect, na której wyświetlają się wszystkie połączone urządzenia i ich karty. Aby sprawdzić kartę w DevTools, kliknij link „sprawdź” obok jej adresu URL.

Jeśli nie widzisz żadnych połączonych urządzeń, sprawdź, czy Twoje urządzenie jest podłączone do portu USB i czy w ustawieniach Chrome na Androida włączone jest debugowanie przez USB. Szczegółowe instrukcje i sposoby rozwiązywania problemów znajdziesz w artykule Zdalne debugowanie na urządzeniach z Androidem.

Odwrotne przekierowanie portów (eksperymentalne)

Serwer WWW działa zwykle na lokalnym komputerze programistycznym i chcesz połączyć się z nim z urządzenia. Jeśli urządzenie i komputer programistyczny są w tej samej sieci, jest to proste. W niektórych przypadkach, np. w sieciach firmowych z ograniczonym dostępem, może to być niemożliwe bez użycia sprytnych sztuczek z DNS. Nowa funkcja w Chrome na Androida o nazwie odwrotne przekierowywanie portów ułatwia to zadanie. Polega ona na utworzeniu na urządzeniu portu TCP nasłuchującego, który przekierowuje ruch przez USB do określonego portu TCP na komputerze programisty.

Aby korzystać z tej funkcji, musisz:

• Chrome w wersji 28 lub nowszej zainstalowanej na komputerze programisty
• Chrome na Androida w wersji beta zainstalowany na urządzeniu.
• Android Debug Bridge (rozszerzenie ADB do Chrome lub pełny pakiet Android SDK) zainstalowany na komputerze dewelopera.

Aby korzystać z odwrotnego przekierowania portów, musisz mieć urządzenie połączone na potrzeby debugowania zdalnego, jak opisano w sekcji Korzystanie z rozszerzenia ADB. Następnie musisz włączyć odwrotne przekierowywanie portów i dodać regułę przekierowywania portów dla aplikacji.

Najpierw włącz przekierowanie portów w drugim kierunku:

1. Otwórz Chrome na komputerze programisty.
2. W sekcji about:flags włącz opcję Włącz eksperymenty w Narzędziach dla deweloperów i ponownie uruchom Chrome.
3. Otwórz about:inspect. Powinieneś zobaczyć swoje urządzenie mobilne i listę otwartych kart.
4. Kliknij link „Sprawdź” obok dowolnej z wyświetlonych witryn.
5. W otwartym oknie Narzędzia programistyczne otwórz panel Ustawienia.
6. W sekcji Eksperymenty włącz opcję Włącz odwrotne przekierowanie portów.
7. Zamknij okno Narzędzi deweloperskich i wróć do about:inspect.

Następnie dodaj regułę przekierowania portu:

1. Aby otworzyć Narzędzia deweloperskie, kliknij ponownie link „Sprawdź”. Następnie otwórz ponownie Ustawienia Narzędzi deweloperskich.
2. Kliknij kartę Przekierowanie portów.
3. W polu Port urządzenia wpisz numer portu, z którym ma się połączyć Chrome na urządzeniu z Androidem (domyślnie jest to 8080).
4. W polu Docelowy dodaj numer portu, na którym aplikacja internetowa działa na Twoim komputerze deweloperskim.

   

5. W Chrome na Androida otwórz localhost:, gdzie to wartość wpisana w polu Port urządzenia (domyślnie 8080).

Powinny się wyświetlić treści serwowane przez komputer programistyczny.

Wizualizacja wykresu płomieniowego w przypadku profili JavaScript

Nowy widok wykresu płomienistego zawiera wizualizację przetwarzania kodu JavaScript w czasie, podobną do tej, która występuje w panelach Oś czasu i Sieć.

Oś pozioma to oś czasu, a oś pionowa to stos wywołania. U góry panelu znajduje się przegląd pokazujący cały zapis. Możesz „przybliżyć” wybrany obszar, klikając go myszką, jak pokazano poniżej. W zależności od tego zmienia się skala w widoku szczegółowym.

W widoku szczegółów stos wywołania jest reprezentowany jako stos „bloków” funkcji. Blok, który znajduje się na innym bloku, został wywołany przez blok funkcji znajdujący się niżej. Po najechaniu kursorem na dany blok wyświetla się jego nazwa funkcji i dane dotyczące czasu:

• Nazwa – nazwa funkcji.
• Czas wykonania funkcji – czas potrzebny do wykonania bieżącego wywołania funkcji, w tym tylko instrukcje w samej funkcji, bez wywołanych przez nią funkcji.
• Całkowity czas – czas potrzebny na wykonanie bieżącego wywołania tej funkcji i wszystkich wywołanych przez nią funkcji.
• Zagregowany czas własny – zagregowany czas wszystkich wywołań funkcji w całości nagrania, nie uwzględniający funkcji wywołanych przez tę funkcję.
• Zagregowany łączny czas – łączny czas wszystkich wywołań funkcji, w tym funkcji wywołanych przez tę funkcję.

Kliknięcie bloku funkcji powoduje otwarcie w panelu Źródła pliku JavaScript zawierającego ten blok, na linii, na której zdefiniowano funkcję.

Aby użyć wykresu płomienistego:

1. W narzędziach dla deweloperów kliknij kartę Profile (Profile).
2. Wybierz Zarejestruj profil procesora JavaScript i kliknij Start (Rozpocznij).
3. Po zakończeniu zbierania danych kliknij Zatrzymaj.
4. W widoku profilu wybierz wizualizację Wykres płomienisty.

   

5 kluczowych funkcji pomiaru skuteczności

Na zakończenie omówienia rewolucyjnych zmian w Narzędziach deweloperskich przedstawimy kilka nowych funkcji do analizowania problemów z wydajnością:

• Tryb ciągłego malowania
• Wyświetlanie prostokątów i obramowań warstw w Paint
• Licznik FPS
• Wyszukiwanie wymuszonych układów synchronicznych (throttling układu)
• Śledzenie przydziału obiektów

Tryb ciągłego malowania

Tryb ciągłego odświeżania to opcja w ustawieniach Narzędzi deweloperskich (Wyświetlanie > Włącz ciągłe odświeżanie strony), która pomaga określić koszt renderowania poszczególnych elementów lub stylów CSS.

Zazwyczaj Chrome wyświetla obraz na ekranie tylko w odpowiedzi na zmianę układu lub stylu i tylko w tych obszarach ekranu, które wymagają aktualizacji. Gdy włączysz ciągłe odświeżanie strony, cały ekran będzie stale odświeżany. W powiadomieniu wyświetlane są czas potrzebny Chrome na wyświetlenie strony, zakres czasów i wykres przedstawiający rozkład ostatnich czasów wyświetlania. Linia pozioma na histogramie wskazuje wartość 16,6 ms.

Dzięki temu możesz przejść przez drzewo DOM w panelu Elementy i ukryć poszczególne elementy (naciśnij klawisz H, aby ukryć aktualnie wybrany element) lub wyłączyć style CSS elementu. Możesz sprawdzić, ile czasu zajmuje renderowanie elementu lub stylu, porównując czas renderowania strony z czasem renderowania strony bez tego elementu lub stylu. Jeśli ukrycie pojedynczego elementu znacznie skróci czas renderowania, wiesz, że musisz skupić się na stylizacji lub konstrukcji tego elementu.

Aby włączyć tryb ciągłego malowania:

1. Otwórz ustawienia Narzędzi deweloperskich. 1.Na karcie Ogólne w sekcji Renderowanie włącz opcję Włącz ciągłe odświeżanie strony.

Uwaga: jeśli nie widzisz tej opcji w Ustawieniach, otwórz about:flags, włącz kompozycję za pomocą procesora graficznego na wszystkich stronach i ponownie uruchom Chrome.

Więcej informacji znajdziesz w artykule Profilowanie długich czasów renderowania za pomocą trybu ciągłego renderowania w DevTools.

Wyświetlanie prostokątów i obrzeży warstw

Inną opcją w DevTools jest wyświetlanie prostokątnych obszarów ekranu, na których są malowane elementy. (Ustawienia > Renderowanie > Pokaż prostokąty renderowania). Na przykład na zrzucie ekranu poniżej prostokąt narysowany za pomocą narzędzia do malowania pokrywa obszar, w którym zastosowano efekt najechania CSS do fioletowej grafiki. To dobrze, ponieważ zajmuje stosunkowo niewielką część ekranu.

Unikaj metod projektowania i tworzenia, które powodują ponowne malowanie całego wyświetlacza. Na przykład na tym zrzucie ekranu użytkownik przewija stronę. Jeden prostokąt obejmuje suwak przewijania, a drugi – całą resztę strony. W tym przypadku winowajcą jest obraz tła w elemencie body. Pozycja obrazu jest ustawiona w CSS jako „fixed”, co wymaga od Chrome ponownego rysowania całej strony po każdym przewinięciu.

Licznik FPS

Miernik liczby klatek na sekundę wyświetla bieżącą liczbę klatek na sekundę, minimalną i maksymalną liczbę klatek na sekundę, wykres słupkowy pokazujący liczbę klatek na sekundę w czasie oraz histogram pokazujący zmienność liczby klatek na sekundę.

Aby wyświetlić miernik FPS:

1. Otwórz ustawienia Narzędzi deweloperskich.
2. Kliknij Ogólne.
3. W sekcji Renderowanie włącz opcje Wymuś przyspieszone łączenie i Pokaż miernik FPS.

Aby zawsze wyświetlać licznik FPS, otwórz about:flags, włącz licznik FPS i ponownym uruchomieniu Chrome.

Wyszukiwanie wymuszonych układów synchronicznych (throttling układu)

Aby zmaksymalizować wydajność renderowania, Chrome zwykle grupowanie zmiany układu żądane przez aplikację i planuje przetwarzanie układu w niesynchronizowany sposób, aby obliczać i renderować żądane zmiany. Jeśli jednak aplikacja poprosi o wartość właściwości zależnej od układu (np. offsetHeight lub offsetWidth), Chrome jest zmuszona do natychmiastowego i synchronicznego wykonania układu strony. Te tak zwane wymuszone układy synchroniczne mogą znacznie obniżyć wydajność renderowania, zwłaszcza gdy są wielokrotnie wykonywane w przypadku dużych drzew DOM. Ten scenariusz nazywany jest też „zużywaniem układu”.

Rejestrowanie osi czasu ostrzega o wymuszonym układzie synchronicznym za pomocą żółtej ikony ostrzeżenia obok odpowiedniego rekordu osi czasu. Po najechaniu kursorem na jeden z tych rekordów wyświetlają się ścieżki stosu kodu, który unieważnił układ, oraz kodu, który wymusił układ.

To okno zawiera też liczbę węzłów, które wymagały ułożenia, rozmiar drzewa ponownego układu, zakres układu i korzeń układu.

Więcej informacji znajdziesz w artykule Demo osi czasu: diagnozowanie wymuszonych układów synchronicznych.

Śledzenie przydziału obiektów

Śledzenie alokacji obiektów to nowy typ profilu pamięci, który pokazuje alokację w czasie. Gdy rozpoczniesz śledzenie alokacji, Narzędzie deweloperskie będzie stale robić zrzuty stosu. Profil alokacji stosu pokazuje, gdzie tworzone są obiekty, i określa ścieżkę przechowywania.

Aby śledzić przypisania obiektów:

1. W narzędziach dla deweloperów kliknij kartę Profile (Profile).
2. Wybierz Rejestruj przydziały stosu i kliknij Rozpocznij.
3. Po zakończeniu zbierania danych kliknij Zatrzymaj nagrywanie profilu stosu (czerwone kółko w lewym dolnym rogu panelu profilowania).

Profilowanie Canvas (funkcja eksperymentalna)

Na koniec przedstawiamy zupełnie eksperymentalną funkcję. Profilowanie kanwy umożliwia nagrywanie i odtwarzanie wywołań WebGL wykonanych na elemencie kanwy. Możesz przejrzeć poszczególne wywołania WebGL lub grupy wywołań i obserwować renderowane wyniki. Zobaczysz też czas potrzebny na odtworzenie tych konkretnych połączeń.

Aby korzystać z profilowania na płótnie:

1. Włącz funkcję Inspekcja kanwy na karcie Eksperymenty w ustawieniach Narzędzi deweloperskich. (jeśli nie widzisz tej karty, otwórz about:flags, włącz Włącz eksperymenty w Narzędziach dla deweloperów i uruchom ponownie Chrome).
2. Kliknij kartę Profile (Profile).
3. Wybierz Utwórz ramkę obrazu i kliknij Zrób zrzut ekranu.
4. Możesz teraz przejrzeć wywołania użyte do utworzenia ramki na kanwie.