Chrome DevTools Revolutions 2013

Arthur Evans

Twitter GitHub

Tim Statler

Twitter

Wstęp

Wraz ze wzrostem złożoności i funkcjonalności aplikacji internetowych zwiększyły się także Narzędzia deweloperskie w Chrome. To podsumowanie prezentacji Chrome DevTools Revolutions 2013 przeprowadzonej przez Paula I/O 2013 pokazuje najnowsze funkcje, które rewolucjonizują sposób tworzenia i testowania aplikacji internetowych.

Jeśli nie udało Ci się obejrzeć prezentacji Pawła, możesz obejrzeć ją powyżej (poczekamy) lub przejść od razu do podsumowania funkcji:

• Obszary robocze umożliwiają używanie Narzędzi deweloperskich jako edytora kodu źródłowego.
• Jeśli używasz Sass, spodoba Ci się możliwość edycji plików Sass (.scss) na żywo w Narzędziach deweloperskich i zmiany zostaną natychmiast odzwierciedlone na stronie.
• Zdalne debugowanie stron w Chrome na Androida jest możliwe od jakiegoś czasu, ale rozszerzenie ADB ułatwia łączenie się z urządzeniami z Androidem. Odwrotne przekierowanie portów pozwala łatwo połączyć się z hostem lokalnym na komputerze programistycznym z urządzenia.
• W aplikacjach internetowych wydajność zawsze jest ważnym zagadnieniem, dlatego w Narzędziach deweloperskich dostępnych jest wiele nowych funkcji, które pomagają śledzić wąskie gardła. Są to między innymi nowa wizualizacja wykresu płomieniowego do profilowania procesora oraz kilka nowych narzędzi do debugowania problemów z wydajnością związanych z renderowaniem i użyciem pamięci.

Te funkcje są już dostępne w Chrome 28, a także w wersji stabilnej.

Obszary robocze

Obszary robocze umożliwiają mapowanie zasobów udostępnianych z lokalnego serwera WWW na pliki na dysku. Pozwala to edytować dowolny typ pliku źródłowego w panelu Źródła i zapewniać zachowywanie wprowadzonych zmian na dysku. Podobnie zmiany wprowadzone w edytorze zewnętrznym są natychmiast wyświetlane w panelu Źródła.

Zrzut ekranu poniżej przedstawia przykładowe obszary robocze w działaniu. Witryna Kalendarza została załadowana przez hosta lokalnego, a w panelu Źródła widoczny jest widok lokalnego systemu plików folderu głównego witryny. Zmiany wprowadzone w plikach w tym folderze są zapisywane na dysku. Na poniższym zrzucie ekranu widać część niezapisanych zmian w pliku Calendar.css, dlatego obok nazwy pliku znajduje się gwiazdka.

Naciśnięcie Control+S lub Command+S powoduje utrzymanie zmian na dysku.

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

• Zmiany DOM w panelu Elementy nie są zachowywane. Zostaną zachowane tylko zmiany stylu wprowadzone w panelu Elementy.
• Można zmieniać tylko style zdefiniowane w zewnętrznym pliku CSS. Zmiany w elemencie elementu.style i stylach wbudowanych nie są zachowywane z powrotem na dysk. Jeśli masz wbudowane style, możesz je zmieniać w panelu Źródła.
• Zmiany stylu w panelu Elementy są wprowadzane natychmiast – nie musisz naciskać Control+S ani Command+S.

Dodaję folder obszaru roboczego

Korzystanie z obszarów roboczych składa się z 2 etapów: udostępnienia zawartości folderu lokalnego w Narzędziach deweloperskich i mapowania tego folderu na adres URL.

Aby dodać nowy folder obszaru roboczego:

1. W Narzędziach deweloperskich kliknij Settings (Ustawienia) , aby otworzyć ustawienia DevTools.
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 zezwolić Narzędziom deweloperskim na pełny dostęp do folderu.

W panelu Źródła pojawi się nowy folder obszaru roboczego wraz ze źródłami wczytanymi przez lokalnego hosta. Teraz możesz edytować na żywo pliki w folderze obszaru roboczego, a te zmiany zostaną zachowane na dysku.

Mapowanie folderu na adres URL

Po dodaniu folderu obszaru roboczego możesz zmapować go na adres URL. Po każdym wczytaniu przez Chrome określonego adresu URL w panelu Źródła zamiast zawartości folderu sieciowego wyświetlana jest zawartość folderu obszaru roboczego.

Aby zmapować folder obszaru roboczego na adres URL:

1. W panelu Źródła kliknij plik w folderze obszaru roboczego prawym przyciskiem myszy lub kliknij go z naciśniętym klawiszem Control.
2. Wybierz Mapowanie na zasób sieciowy.

   

3. Wybierz odpowiedni zasób sieciowy z aktualnie wczytanej strony.

   

4. Załaduj ponownie stronę w Chrome.

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

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

Są 2 inne sposoby łączenia folderu sieciowego z folderem obszaru roboczego:

• Kliknij zasób sieciowy prawym przyciskiem myszy (lub kliknij z naciśniętym klawiszem Control) i wybierz Mapowanie na zasób systemu plików.
• Dodaj mapowania ręcznie na karcie Workspace w oknie Ustawienia narzędzi deweloperskich.

Debugowanie mapy źródłowej Sass/CSS

Debugowanie Sass (CSS Source Map) pozwala edytować na żywo pliki Sass (.scss) w panelu Źródła i wyświetlać wyniki bez konieczności opuszczania Narzędzi deweloperskich ani odświeżania strony. Podczas sprawdzania elementu, którego style są dostarczane przez plik CSS wygenerowany przez Sass, w panelu Elementy pojawi się link do pliku .scss, a nie do wygenerowanego pliku .css.

Kliknięcie tego linku powoduje otwarcie (edytowalnego) pliku SCSS w panelu Źródła. W pliku możesz wprowadzić dowolne zmiany.

Gdy zapiszesz zmiany w pliku SCSS (w Narzędziach deweloperskich lub w innym miejscu), kompilator Sass ponownie wygeneruje pliki CSS. Następnie Narzędzia deweloperskie ponownie załadują nowo wygenerowany plik CSS.

Uwaga: z technicznego punktu widzenia ta funkcja powinna działać z każdym procesorem CSS obsługującym mapy źródeł. Więcej informacji znajdziesz w artykule na temat pracy z preprocesorami CSS w dokumentacji Narzędzi dla deweloperów.

Korzystanie z debugowania Sass

Aby korzystać z debugowania Sass w Chrome, musisz mieć przedpremierową wersję kompilatora Sass, która jest jedyną wersją, która obecnie obsługuje generowanie map źródłowych.

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

W eksperymentach z Narzędziami deweloperskimi musisz też włączyć funkcję debugowania Sass:

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

Po zainstalowaniu Sass uruchom kompilator Sass, aby obserwować 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 korzystasz z kompasu, pamiętaj, że nie obsługuje on jeszcze przedpremierowej wersji Sass, więc nie możesz używać tej aplikacji do debugowania.

Jak to działa

Dla 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 określa mapowania między plikami .scss a .css. Każdy plik CSS zawiera umieszczony w specjalnym komentarzu adnotację, która określa adres URL pliku mapy źródłowej:

/*# sourceMappingURL=<url>; */

Weźmy na przykład ten plik SCSS:

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

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

Sass generuje plik CSS podobny do poniższego 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ódła:

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

Łatwiejsze zdalne debugowanie w Chrome na Androida

Kilka nowych funkcji w Narzędziach deweloperskich ułatwia konfigurację zdalnego debugowania w Chrome na Androida: rozszerzenie ADB i przekierowywanie wstecznego przekierowania portów.

Rozszerzenie ADB do Chrome upraszcza konfigurowanie debugowania zdalnego. Zapewnia to te korzyści:

• Zawiera pakiet Android Debug Bridge (ADB), dzięki czemu nie musisz go instalować.
• Nie jest wymagana interakcja z wierszem poleceń.
• Interfejs ułatwiający uruchamianie i zatrzymywanie demona ADB oraz wyświetlanie połączonych urządzeń.

Odwrotne przekierowanie portów ułatwia połączenie Chrome na Androidzie z serwerem WWW działającym na Twoim lokalnym hoście. To utrudnienie w niektórych środowiskach sieciowych bez korzystania z niektórych sztuczek DNS.

Korzystanie z rozszerzenia ADB

Najpierw zainstaluj rozszerzenie ADB do Chrome z Chrome Web Store. Kliknij Dodaj do Chrome, aby zainstalować rozszerzenie.

Uwaga: instalowanie rozszerzeń z Chrome Web Store nie jest obsługiwane w systemie Windows 8. Jeśli masz problemy z instalacją z Chrome Web Store, zapoznaj się z sekcją Zdalne debugowanie w Androidzie, w której znajdziesz alternatywne instrukcje instalacji.

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

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

Kliknij Wyświetl urządzenia, aby otworzyć stronę about:inspect, na której widoczne są wszystkie podłączone urządzenia i ich karty. Aby sprawdzić kartę w Narzędziach deweloperskich, kliknij link „inspect” (sprawdź) obok jej adresu URL.

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

Odwrotne przekierowanie portów (eksperymentalne)

Zazwyczaj na lokalnym komputerze używanym do programowania działa serwer WWW i chcesz połączyć się z tą witryną ze swojego urządzenia. Jeśli komputer używany do programowania i urządzenie są połączone z tą samą siecią, jest to proste. Jednak w niektórych przypadkach, na przykład w sieciach firmowych z ograniczonym dostępem, może nie udać się to bez odpowiednich sztuczek DNS. Jest to bardzo łatwe dzięki nowej funkcji odwrotnego przekierowania portów w Chrome na Androida. Działa ona na podstawie utworzenia na urządzeniu nasłuchującego portu TCP, który kieruje ruch przez USB do określonego portu TCP w komputerze, którego używasz do programowania.

Aby korzystać z tej funkcji, potrzebujesz:

• przeglądarka Chrome w wersji 28 lub nowszej zainstalowana na komputerze służącym do programowania.
• Chrome na Androida (beta) zainstalowany na urządzeniu
• zainstalowane na komputerze do programowania rozszerzenie Android Debug Bridge (ADB do Chrome lub pełny pakiet SDK do Androida)

Aby użyć odwrotnego przekierowania portów, musisz podłączyć urządzenie na potrzeby zdalnego debugowania, zgodnie z opisem w sekcji Korzystanie z rozszerzenia ADB. Następnie musisz włączyć odwrotne przekierowanie portów i dodać regułę przekierowania portów dla swojej aplikacji.

Najpierw włącz odwrotne przekierowanie portów:

1. Otwórz Chrome na komputerze, na którym pracujesz.
2. W sekcji about:flags włącz opcję Włącz eksperymenty w Narzędziach dla programistów i uruchom ponownie Chrome.
3. Otwórz about:inspect. Powinna wyświetlić się Twoja komórka i lista otwartych kart.
4. Kliknij link „inspect” (sprawdź) obok dowolnej witryny z listy.
5. Otworzy się okno narzędzi dla deweloperów. Otwórz panel Ustawienia.
6. W sekcji Eksperymenty włącz opcję Włącz przekierowanie odwrotnego portu.
7. Zamknij okno narzędzi dla deweloperów i wróć do strony about:inspect.

Następnie dodaj regułę przekierowania portów:

1. Ponownie kliknij link „inspect” (sprawdź), aby otworzyć Narzędzia deweloperskie i ponownie otwórz ustawienia tych narzędzi.
2. Kliknij kartę Przenoszenie portów.
3. W polu Port urządzenia wpisz numer portu, z którym Chrome ma się łączyć na urządzeniu z Androidem (domyślnie jest to 8080).
4. W polu Target (Miejsce docelowe) wpisz numer portu, na którym działa aplikacja internetowa na komputerze, na którym jest uruchomiona aplikacja.

   

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

Powinna się wyświetlić treść wyświetlana przez system do programowania.

Wizualizacja wykresu płomieniowego dla profili JavaScript

Nowy widok Wykres płomieniowy przedstawia wizualną reprezentację procesu przetwarzania JavaScriptu w czasie, podobnie jak w panelach Oś czasu i Sieć.

Oś pozioma przedstawia czas, a oś pionowa – stos wywołań. W górnej części panelu znajduje się omówienie obejmujące całe nagranie. Możesz powiększyć dany obszar, wybierając go za pomocą myszy, jak pokazano poniżej. Skala czasu widoku szczegółów odpowiednio się zmniejsza.

W widoku szczegółów stos wywołań jest reprezentowany jako stos „bloków” funkcji. Bryła znajdująca się nad innym została wywołana przez dolny blok funkcyjny. Najechanie kursorem na dany blok powoduje wyświetlenie nazwy jego funkcji i danych o czasie:

• Nazwa – nazwa funkcji.
• Czas własny – ile czasu zajęło zakończenie bieżącego wywołania funkcji, z uwzględnieniem tylko instrukcji w samej funkcji, z pominięciem wywołanych funkcji.
• Łączny czas – czas potrzebny na zakończenie bieżącego wywołania tej funkcji i wywołanych przez nią funkcji.
• Zagregowany czas własny – łączny czas wszystkich wywołań funkcji w nagraniu, bez uwzględniania funkcji wywoływanych przez tę funkcję.
• Zagregowany czas całkowity – łączny czas wykonywania wszystkich wywołań funkcji, w tym funkcji wywoływanych przez tę funkcję.

Kliknięcie bloku funkcji powoduje otwarcie jego zawierającego plik JavaScript w panelu Źródła w wierszu, w którym zdefiniowano funkcję.

Aby użyć wykresu płomieniowego:

1. W Narzędziach deweloperskich kliknij kartę Profile.
2. Wybierz Zarejestruj profil procesora JavaScript i kliknij Uruchom.
3. Gdy zakończysz zbieranie danych, kliknij Zatrzymaj.
4. W widoku profilu wybierz wizualizację Flame Chart.

   

5 kluczowych funkcji związanych z pomiarem skuteczności

Podsumowaniem tej ankiety dotyczącej rewolucyjnych postępów w Narzędziach deweloperskich jest kilka nowych funkcji do badania problemów z wydajnością:

• Tryb malowania ciągłego
• Wyświetlanie prostokątów malowania i obramowań warstw
• Licznik FPS
• Znajdowanie wymuszonych układów synchronicznych (wszystkie układy)
• Śledzenie alokacji obiektów

Tryb malowania ciągłego

Tryb ciągłego malowania to opcja w ustawieniach Narzędzi deweloperskich (Renderowanie > Włącz ciągłe ponowne malowanie stron), która pomaga określić koszt renderowania poszczególnych elementów lub stylów CSS.

Normalnie Chrome maluje ekran tylko w odpowiedzi na zmianę układu lub stylu i tylko te obszary ekranu, które wymagają aktualizacji. Gdy włączysz ciągłe ponowne malowanie stron, cały ekran jest stale malowany. Wyświetlacz HUD pokazuje czas potrzebny Chrome na wyrenderowanie strony, a także zakres czasowy oraz wykres przedstawiający rozkład ostatnich czasów wyrenderowania. Pozioma linia na histogramie wskazuje czas trwania 16,6 ms.

Zaletą takiego zastosowania jest to, że możesz spacerować po drzewie DOM w panelu Elementy i ukrywać poszczególne elementy (naciśnij klawisz H, by ukryć aktualnie wybrany element) lub wyłączyć style CSS elementu. Możesz sprawdzić, ile czasu dany element lub styl wpływa na „wagę” renderowania strony, jeśli zajdzie taka potrzeba. Zwróć uwagę na zmiany czasu wyrenderowania strony. Jeśli ukrycie jednego elementu znacznie skraca czas renderowania, możesz skupić się na stylu lub konstrukcji tego elementu.

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

1. Otwórz ustawienia Narzędzi deweloperskich. 1.Na karcie Ogólne w sekcji Renderowanie włącz opcję Włącz ciągłe renderowanie stron.

Uwaga: jeśli nie widzisz tej opcji w Ustawieniach, otwórz about:flags, włącz about:flags i uruchom ponownie Chrome.

Więcej informacji znajdziesz w artykule Profilowanie długich czasów renderowania w trybie ciągłego malowania w Narzędziach deweloperskich.

Pokazuję prostokąty renderowania i obramowanie warstw

Inną opcją w Narzędziach deweloperskich jest pokazanie, na jakie prostokątne obszary wyświetlacza są malowane. (Ustawienia > Renderowanie > Pokaż prostokąty renderowania). Na przykład na zrzucie ekranu poniżej fioletowej grafiki rysowany jest prostokąt malowania na obszarze, w którym zastosowano efekt po najechaniu kursorem myszy na fioletową grafikę. To dobrze, ponieważ zajmuje to stosunkowo niewielką część ekranu.

Należy unikać praktyk projektowych i programistycznych, które powodują, że cały wyświetlacz jest malowany. Na przykład na zrzucie ekranu poniżej użytkownik przewija stronę. Jeden prostokąt otacza pasek przewijania, a drugi – całą resztę strony. W tym przypadku winną jest obraz tła w elemencie „body”. Pozycja obrazu jest ustawiona na stałą w CSS, co oznacza, że Chrome musi ponownie malować całą stronę przy każdym przewinięciu.

Licznik FPS

Wskaźnik FPS pokazuje aktualną liczbę klatek na stronie, minimalną i maksymalną liczbę klatek, wykres słupkowy przedstawiający liczbę klatek w czasie oraz histogram, który pokazuje zmienność liczby klatek.

Aby wyświetlić licznik klatek na sekundę:

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

Możesz wymusić wyświetlanie wskaźnika FPS, otwierając about:flags, włączając licznik klatek na sekundę i ponownie uruchamiając Chrome.

Znajdowanie wymuszonych układów synchronicznych (wszystkie układy)

Aby zmaksymalizować wydajność renderowania, Chrome zazwyczaj grupuje zmiany układu, o które prosi aplikacja, i planuje przekazywanie układu, aby asynchronicznie obliczać i renderować żądane zmiany. Jeśli jednak aplikacja poprosi o podanie wartości właściwości zależnej od układu (takiej jak offsetHeight lub offsetWidth), Chrome musi natychmiast i synchronicznie wykonać układ strony. Te tzw. wymuszone układy synchroniczne mogą znacznie obniżyć wydajność renderowania, zwłaszcza gdy jest wykonywane wielokrotnie na dużych drzewach DOM. Ten scenariusz jest również nazywany „wyrzucaniem układu”.

Nagrywanie na osi czasu informuje o wykryciu wymuszonego układu synchronicznego. W takiej sytuacji żółta ikona ostrzeżenia obok odpowiedniego rekordu na osi czasu. Najedź kursorem na jeden z tych rekordów, aby wyświetlić zrzuty stosu kodu, który unieważnił układ, oraz kodu, który wymusił układ.

To wyskakujące okienko pokazuje też liczbę węzłów wymagających układu, rozmiar drzewa ponownego układu, zakres układu i poziom główny układu.

Więcej informacji znajdziesz w sekcji Prezentacja osi czasu: Diagnozowanie wymuszonych układów synchronicznych.

Śledzenie alokacji obiektów

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

Aby śledzić przydziały obiektów:

1. W Narzędziach deweloperskich kliknij kartę Profile.
2. Wybierz Rejestruj alokacje sterty i kliknij Rozpocznij.
3. Po zakończeniu zbierania danych kliknij Zatrzymaj rejestrowanie profilu sterty (czerwone kółko w lewym dolnym rogu panelu profilowania).

Profilowanie kanwy (funkcja eksperymentalna)

Na koniec mamy do czynienia z całkowicie eksperymentalną funkcją, którą warto przetestować. Profilowanie Canvas umożliwia nagrywanie i odtwarzanie wywołań WebGL wykonanych w elemencie Canvas. Możesz prześledzić poszczególne rozmowy lub grupy połączeń WebGL i zobaczyć uzyskane wyniki. Możesz też sprawdzić czas potrzebny na ponowne odtworzenie tych połączeń.

Aby użyć profilowania kanwy:

1. Włącz funkcję Inspekcja Canvas na karcie Eksperymenty w ustawieniach Narzędzi dla deweloperów. Jeśli nie widzisz tej karty, otwórz about:flags, włącz opcję Włącz eksperymenty w Narzędziach dla deweloperów i ponownie uruchom Chrome.
2. Kliknij kartę Profile.
3. Wybierz Przechwyć ramkę odbitki na płótnie i kliknij Zrób zrzut ekranu.
4. Możesz teraz przeglądać wywołania użyte do utworzenia ramki obszaru roboczego.