Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Web Inspector w Google Chrome

Autor: Piotr Karpiuk o 23. października 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.
    Czytaj więcej »

Tags: ,
Napisany w WWW | Brak komentarzy »