Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Narzędzia dewelopera w Google Chrome

Autor: Piotr Karpiuk o wtorek 5. Lipiec 2016

Dzisiejszy artykuł będzie narzędziach, jakie przeglądarka Google Chrome udostępnia programistom do debugowania i monitorowania aplikacji webowych, pod przyciskiem F12. Dla tych co mają dużo czasu, pełny opis możliwości jest dostępny na stronach Google’a: https://developers.google.com/web/tools/chrome-devtools/. Tutaj zakładam że Czytelnik ma już jakieś pojęcie o tych narzędziach, zapewne już z nich korzysta w jakimś zakresie i chciałby możliwie szybko poszerzyć swoją wiedzę o różne przydatne i ciekawe triki, które pojawiły się ostatnimi czasy, lub były od dawna ale nie są oczywiste.

Task Manager

Kombinacja klawiszy Shift+ESC otwiera managera zadań, w którym możemy zobaczyć zużycie zasobów komputera z rozbiciem na poszczególne zakładki przeglądarki:

Edycja drzewa DOM

Patrz także: Edit the DOM.

Taką edycję możemy sobie wydatnie przyspieszyć używając klawiatury:

Strzałka w lewo/prawo
Zwijanie i rozwijanie gałęzi drzewa
Enter
Wejście w tryb edycji, klawiszem TAB przechodzimy do kolejnych miejsc (np. atrybutów elementu), które możemy modyfikować
F2
Edycja elementu jako łańcucha HTML (Ctrl+Enter zatwierdza zmiany)
Ctrl+Z
Wycofanie ostatniej zmiany

Ponadto, elementy drzewa można przeciągać myszką.

Edycja CSS

Patrz także: Edit Styles.

Najedź kursorem myszki nad selektor w regule CSS, aby podświetlić w dokumencie wszystkie elementy, których ten selektor dotyczy.

Podczas edycji wartości liczbowej własności CSS mogą się przydać skróty klawiaturowe:

Strzałka w górę/dół
Zwiększa/zmniejsza wartość o 1, lub 0.1 gdy bieżąca wartość jest między -1 a 1.
Alt+strzałka w górę/dół
Zwiększa/zmniejsza wartość o 0.1
Shift+strzałka w górę/dół
Zwiększa/zmniejsza wartość o 10
Shift+PageUp/PageDown
Zwiększa/zmniejsza wartość o 100

Jeśli wartością własności jest kolor, jest on wyświetlany w małym kwadraciku. Kliknij ten kwadracik aby wejść do edytora koloru. Tutaj można poznać wartość hex koloru, użyć pipety (ang. eyedropper) itp.

Wyszukiwanie i przeszukiwanie plików

Zakładka „Sources” pozwala przeglądać i modyfikować źródła plików wchodzących w skład załadowanej do przeglądarki strony WWW.

Ctrl+O
Wyszukiwarka załadowanych plików (po nazwie, czyli taki odpowiednik UNIXowego find)
Shift+Ctrl+F
Przeszukanie treści załadowanych plików (odpowiednik UNIXowego grep)

Symulacja urządzeń mobilnych

Patrz także: Simulate Mobile Devices with Device Mode.

Jak witryna będzie wyglądała po zmianie wielkości okna przeglądarki, albo na różnych urządzeniach mobilnych? Tryb „Device Mode” pozwala to sprawdzić. Można tu z listy rozwijanej wybrać nie tylko różne urządzenia (smartfony, tablety), ale również opcję „Responsive”, która pozwala łatwo manipulować rozmiarem okna dokumentu HTML bez potrzeby zmiany rozmiarów okna przeglądarki.

Konsola

Patrz także: Using the Console.

W zakładce „Console” wykonujemy dowolne polecenia JavaScript w kontekście aktualnie załadowanej strony WWW. W każdej innej zakładce także mamy dostęp do konsoli – wystarczy nacisnąć klawisz Esc który otwiera dolną „szufladę” z konsolą. Oto kilka porad:

  • Każdy wynik polecenia może być poprzedzany stemplem czasowym – w ustawieniach DevTools (klawisz F1) w sekcji „Console” należy zaznaczyć opcję „Show timestamps”
  • Domyślnie przeładowanie strony lub przejście na inną stronę czyści zawartość konsoli – aby tego uniknąć w górnej belce konsoli zaznacz opcję „Preserve log”
  • Zawartość okna konsoli możemy zapisać do pliku – z menu kontekstowego wybieramy opcję „Save As…”
  • Do logowania na konsoli używamy poleceń console.log(), console.warn() i console.error(), które wyświetlają proste łańcuchy znaków. Możemy również grupować komunikaty, co pozwala nam zapanować nad ich ilością. Grupy można nawet zagnieżdżać, a każdą z nich zwijać i rozwijać:

    Zamiast console.group() możemy użyć console.groupCollapsed(), aby wygenerowana grupa była od razu zwinięta.

  • Polecenie console.assert() pozwala umieścić w kodzie asercje:
  • Nieraz chcemy zmierzyć czas wykonania określonego fragmentu kodu:
  • Polecenie console.count informuje ile razy wyświetlono ten sam łańcuch:
  • Polecenie console.table pokazuje zawartość tablicy jako tabelkę (więcej o tym w artykule Compare Similar Data Objects):
  • Polecenie console.dir wyświetla element HTML jako obiekt JavaScript:
  • W kodzie JavaScript umieść console.trace() aby zrzucić w konsoli bieżącą zawartość stosu.
  • Zmienna $_ przechowuje wynik ostatniego polecenia.
  • Polecenie copy(wyrażenie) kopiuje ładnie sformatowany wynik wyrażenia do schowka systemowego
  • Polecenia keys(obiekt) i values(obiekt) zwracają odpowiednio tablicę kluczy i tablicę wartości obiektu.
  • Polecenie $(wyrażenie) jest skrótem dla document.querySelector(wyrażenie)
  • Polecenie $$(wyrażenie) jest skrótem dla document.querySelectorAll(wyrażenie)
  • Polecenie $x(wyrażenie XPath) wykonuje zapytanie XPath
  • Możesz zdefiniować sposób formatowania dla własnych obiektów (jako HTML): więcej w artykule Custom Object Formatters in Chrome DevTools

Monitoring

Polecenie monitor(funkcja) włącza śledzenie wskazanej funkcji – każde wywołanie tej funkcji loguje informacje m.in. o parametrach wywołania

Na podobnej zasadzie można monitorować zdarzenia na elementach HTML, za pomocą poleceń typu monitorEvents(document.body, "click") i unmonitorEvents(document.body).

Debugowanie

Patrz także: How to set breakpoints.

Oprócz standardowych pułapek w kodzie źródłowym ustawianych myszką na marginesie edytora, mamy również tzw. pułapki warunkowe:

  • Pułapka na każdym wyjątku (również tym złapanym i obsłużonym, jeśli zaznaczymy odpowiednie pole wyboru):

    Pamiętajmy też, że możemy w kodzie naszej aplikacji zdefiniować funkcję window.onerror, która przechwyci wszystkie nieobsłużone wyjątki.

  • Pułapka na modyfikacji wskazanego elementu HTML (np. modyfikacja atrybutów, wstawienie lub usunięcie potomka)
  • Pułapka na określonym zdarzeniu JavaScript (np. load, click itp.)
  • Pułapka na wywołaniu Ajaxa (XHR):
    • każdego,
    • którego URL zawiera określony łańcuch,
    • przed wybranymi zdarzeniami związanymi z XHR (np. load, timeout, error)

Nade wszystko możemy jawnie wymusić wejście do debuggera poprzez umieszczenie w kodzie źródłowym JavaScript słowa kluczowego debugger.

Zakładka „Source”

Jeśli otwarty plik JavaScriptu jest zminifikowany, możesz go ładnie poformatować – w nagłówku edytora pojawi się stosowna propozycja, wystarczy kliknąć.

Snippety (szuflada „Snippets”) to małe skrypty niezwiązane z żadną konkretną stroną, zapisywane lokalnie w przeglądarce pomiędzy sesjami, które można wykonać w kontekście dowolnej strony. Aby wykonać fragment snippeta, zaznacz ten fragment i użyj kombinacji klawiszy Ctrl+Shift+E.

Zakładka „Timeline”

Mając profil, możemy go łatwo wyeksportować do pliku i wysłać koledze. Wystarczy z menu kontekstowego wybrać opcję „Save Timeline Data…”.

Zakładka „Network”

Jeśli przy najciśniętym klawiszu Shift najedziemy kursorem myszki nad jakiś zasób w tabeli, poznamy zależności pomiędzy zasobami (kto kogo ładował). I tak na poniższym obrazku widzimy że plik „gpt.js” jest ładowany przez „dj0L2J1a…3D.js” (podświetlany na zielono), a sam z kolei ładuje „pubads_impl_90.js”, „ads?…” i „osd.js” (podświetlone na czerwono).

W pasku narzędzi możemy filtrować ładowane zasoby po nazwie, ale także używając specjalnych słów kluczowych, np.:

  • domain:domena – pokaże zasoby tylko z podanej domeny. Można używać gwiazdki, a ponadto samo automatyczne podpowiadanie pozwala ustalić szybko listę domen, z których bieżąca strona WWW ładuje zasoby.
  • larger-than:100k – pokaże tylko zasoby większe niż 100 KB.

Możemy łatwo powtórzyć wykonanie dowolnego wywołania Ajax (XHR):

Dowolne zlecenie HTTP możemy zapisać w schowku jako wywołanie Unixowego polecenia curl:

W powyższym przykładzie pobranie strony Onet.pl może być zamienione na następujące wywołanie cURL:

curl 'http://www.onet.pl/'
        -H 'Accept-Encoding: gzip, deflate, sdch'
        -H 'Accept-Language: pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4'
        -H 'Upgrade-Insecure-Requests: 1'
        -H 'User-Agent: Mozilla/4.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2704.106 Safari/537.36'
        -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'
        -H 'Cookie: onet_ubi=201606131345196366230019; 
                    ...
                    __utmb=3822123853.6.10.1467732214; 
                    __utmc=38111853; 
                    __utmz=382281853.14376473.12.2.utmcsr=http://wiadomosci.onet.pl/krakow/zakopane-kolejka-do-kolejki-na-kasprowy-wierch/6jq7v8|utmccn=last_slide_redirect|utmcmd=referral'
        -H 'Connection: keep-alive'
        --compressed

Zakładka „Profiles”

Profiler to potężne i bardzo dopracowane narzędzie prezentujące wyniki w tabelce i na osi czasu (łatwo można manipulować za pomocą myszki interesującym nas przedziałem czasu). Po jego uruchomieniu następuje „nagrywanie”: rejestrujemy czynności wykonywane na aplikacji WWW, po czym naciskamy „Stop” i oglądamy wyniki. Profiler pozwala wykonać trzy główne zadania:

Profil CPU (zadanie Collect JavaScript CPU Profile) pokazuje stos wywołań funkcji na osi czasu. Myszką możemy zaznaczyć interesujący nas przedział czasu, warto też pokręcić kółeczkiem myszki. Widzimy tu kiedy wykonana została jaka funkcja, widzimy jakie wywołała podfunkcje.

Zadanie Take Heap Snapshot pozwala wykonać ewidencję zawartości sterty (snapshot). Szczególnie ciekawa jest opcja „Comparison” pozwalająca obejrzeć różnicę między dwoma snapshotami – może się przydać przy dochodzeniu przyczyny wycieków pamięci w naszej aplikacji.

Zadanie Record Heap Allocations pozwala na obejrzenie kiedy została zaalokowana i zwolniona pamięć. Na wykresie słupki reprezentują przydzieloną pamięć, a kolor mówi czy została ona odśmiecona (szary) czy nie (niebieski). Kolumna „Distance” określa odległość obiektu od korzenia w grafie alokacji, „Shallow size” to rozmiar pamięci zajmowanej przez obiekt, a „Retained Size” to rozmiar pamięci zajmwoanej przez cały podgraf obiektu.

Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>