Wydajna praca w konsoli narzędzi deweloperskich Chrome

Chrome Developer Tools to ogromne narzędzie wspomagające pracę webdevelopera: pozwala między innymi na debugowanie skryptów JS, inspekcję drzewa DOM czy edycję styli CSS. Jedną z funkcji jaką udostepniają wspomniane narzędzia jest konsola, która m.in. wyświetla błędy ładowania strony, czy pozwala na debugowanie zmiennych JS za pomoca console.log(). W poniższym wpisie przedstawię kilka bardziej zaawansowanych zastosowań konsoli.

inspect()

Pozwala na wybieranie elementów do zbadania. Dla przykładu, wpisanie w konsoli:

var myId = document.getElementById('my-id');
inspect(myId);

wskaże nam element o id #my-id.

$0

Wyświetla zawartość aktualnie wybranego węzła DOM. Jest to obiekt JS, na którym możemy wywołać takie metody jak: firstChild czy outerHTML. Analogicznie, $1, $2 itd. wyświetla poprzednio badane węzły.

$$

Funkcja znana także pod nazwą bling-bling. W rzeczywistości jest to odwołanie do querySelectorAll:

bound: function (selector, start)
  { if (this._canQuerySelectorOnNode(start))
    return start.querySelectorAll(selector);
    return document.querySelectorAll(selector);
  }

Funkcja zwraca zatem tablicę wszystkich wystąpień elementów podanych jako argument. Dla przykładu: $$('div.article') zwróci wszystkie divy z klasą article.

monitorEvents()

Ta funkcja to nic innego, jak monitor zdarzeń. Dla przykładu:

monitorEvents( $$('div.article')[0] ), wyświetli w konsoli wszystkie zdarzenia, jakie wystąpią dla pierwszego diva z klasą article. Będą to m.in. kliknięcia myszą, ruch kursora, ruch scrolla, czy naciśnięcia klawiszy klawiatury. Funkcji tej można przekazać drugi parametr: {mouse, key, touch, control}, np.:
mouseEvents( $0, 'mouse') powoduje wyświetlenie wszystkich zdarzeń la bieżącego elementu i związanych z myszką. touch dotyczy zdarzeń dotykowych, a do control należą między innymi focus, zoom, scroll, resize czy submit.

copy()

Na koniec prosta funkcja, którą można używać m.in. z wyżej wymienionymi funkcjami. Zamiast wyświetlenia wyniku w konsoli spowoduje skopiowanie go do schowka. Przykład użycia: copy($0) lub też copy(112/4) – tak, konsoli możemy używać jako kalkulatora wykonującego podstawowe operacje arytmetyczne! :)

SKOMENTUJ