Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Web Inspector w Google Chrome

Autor: Piotr Karpiuk o sobota 23. Październik 2010

Przestałem używać Firefoksa i przerzuciłem się na Google Chrome już nie tylko do surfowania po Internecie (jest znacznie szybszy), ale również do deweloperki aplikacji webowych. Uważam że Web Inspector preinstalowany w Chrome może śmiało konkurować ze słynnym rozszerzeniem FireBug do Firefoksa, a są aspekty w których bije konkurencję na głowę.

Pierwszy z linków wymienionych w ramce obok to elegancki tutorial po zakamarkach WebInspectora (otwierającego się w Chromie po naciśnięciu Shift+Ctrl+I). Jeśli nie bardzo masz czas/ochotę czytać całkiem długi tutorial po angielsku poniżej kilka zdań zachęty żebyś jednak to zrobił:

  • podświetlanie składni (HTML, CSS, JavaScript, JSON),
  • w zakładce Elements w polu wyszukiwania oprócz zwykłego tekstu możesz też podawać wyrażenia XPath i selektory CSS; wszystkie znalezione artefakty są podświetlane, pierwszy otrzymuje fokus,
  • edytując wartość numeryczną jakiejś własności szablonu CSS warto użyć klawiszy strzałek do góry i dołu (odejmuje/dodaje 1), z ew. modyfikatorami Shift/Alt (skok co 10, 0.1),
  • zakładka Profiles oprócz czasu wykonania pozwala profilować zużycie pamięci; klikając ikonkę oka w lewym dolnym rogu otrzymujemy profil sterty, tj. migawkę przedstawiającą ilość i rozmiar obiektów uporządkowanych wg. ich klasy; widzimy także statystyki: ile pamięci jest zajętej i jaką część z tego zajmuje kod, a jaką dane; gdy wykonasz więcej niż jeden profil sterty, możesz porównać dwa profile żeby zobaczyć co się zmieniło; pole wyszukiwania w prawym górnym rogu pozwala na wprowadzanie wyrażeń postaci > 2.5ms do znalezienia funkcji które wykonywały się dłużej niż 2.5ms, > 10% do podświetlenia obiektów które zajmują więcej niż 10% pamięci itp.

    Skróty klawiaturowe

    Ctrl-Shift-I
    Open Web Inspector
    Ctrl-[, Ctrl-]
    Next/Previous panel
    Esc
    Open/Close JS console
    F8
    Continue
    F10
    Step over
    F11
    Step into
    Shift F11
    Step out
    Ctrl-.
    Next call frame
    Ctrl-,
    Previous call frame
    Shift-Ctrl-E
    Evaluate selection
    when on breakpoint

  • w zakładce Scripts w lewym dolnym rogu jest przycisk który pozwala pauzować skrypt przy wyjątku (każdym lub niełapanym) – dzięki temu możemy poznać stan wszystkich zmiennych z momentu powstania sytuacji wyjątkowej; pułapki stawiamy klikając na lewym marginesie skryptu, co ustawia niebieski znacznik (kolejne kliknięcie usuwa go); klikając prawym klawiszem na znaczniku i wybierając opcję Edit Breakpoint… możemy zdefiniować warunek zatrzymania skryptu

  • zakładka Storage daje wgląd w ciasteczka, oraz SQLowy mechanizm HTML5 Database storage – tutaj możesz wykonywać zapytania SQL na otwartych przez stronę WWW lokalnych bazach danych (z autouzupełnianiem i podpowiadaniem identyfikatorów),

  • w zakładce Console która obsługuje interfejs API oferowany przez FireBuga, mamy też uzupełnianie identyfikatorów klawiszem Tab i podpowiadanie; polecenia w rodzaju $("perf") pozwalają selektorami wyszukiwać tagi w drzewie DOM,
  • zakładka Audits wykonuje szereg testów na aktualnej stronie WWW i podpowiada co możesz poprawić (np. informuje o niewykorzystywanych zasobach które niepotrzebnie zostały załadowane, jak przyspieszyć ładowanie strony itp.),
  • zakładka Timeline uzupełnia klasyczną już zakładkę Resources pokazując na osi czasu czas wykonania przez przeglądarkę takich czynności jak ładowanie zasobów, parsowanie JavaScriptu, wyliczanie styli CSS, czy przerysowywanie fragmentów ekranu.
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>