6 rzeczy, których możesz nie wiedzieć o narzędziach developerskich w Chrome

Każdy developer musi używać narzędzi do debugowania, a dla mnie najlepszym jest Chrome. Dostępne też na blogu.

Znajdowanie elementu DOM

Gdy używasz jQuery na stronie wiesz, jak prosto znaleźć elementy po klasie - $('.class') lub ID - $('#id-selector'). A co z konsolą w Chrome, gdzie nie mamy jQ?

Możesz w ten sam sposób posługiwać się $ - $(‘tagName’), $(‘.class’), $(‘#id’) są równoznaczne z document.querySelector(‘ ‘). $ oznaczy pierwszy znaleziony element w DOM, jeśli potrzebujemy wybrać wszystkie możesz użyć $$ - $$('.class'). Znalezione elementy zostaną umieszczone w tablicy i możesz się do nich odnieść przez pozycję np. $$('.class')[0] lub $$('.class')[3].

Spraw, by treść strony była edytowalna

Czasem potrzeba zwizualizować pewne zachowania na stronie, np. podczas prezentacji projektu, gdy nie mamy dostępu do edytora. Możemy edytować elementy w konsoli lub... bezpośrednio na stronie.

Wystarczy w konsoli odpalić _tryb edycji_.

	document.body.contentEditable=true 

Wyczyść konsole

Po prostu... wpisz w konsoli

clear()

Sprawdzanie elementu bezpośrednio z konsoli

Bardzo łatwo możesz zbadać element prosto z konsoli. - inspect($('selector')) oznaczy 1. znaleziony selector i otworzy zakładkę Elements. - Za pomocą $0, $1... możesz poruszać się po ostatnio sprawdzanych elementach, np. inspect($0) oznaczy ostatni, który sprawdzałeś, inspect($1) przedostatni, itd.

Czas wykonywania kodu

Konsola JS posiada fajną funkcję - console.time('label'), która w argumencie przyjmuje nazwę timera. Za jej pomocą możemy zmierzyć czas wykonywania kodu. Przykład:

    console.time('zmierz_for');

    for(var i=0; i < 100000; i++){
      2+4+5;
    }

    console.timeEnd('zmierz_for');

    zmierz_for: 1484858361170.580ms

Może się okazać pomocne w przypadku gdy załadujesz sporo skryptów na stronę i będziesz chciał znaleźć ten najbardziej obciążający stronę.

Eventy, przypisane do elementu DOM

getEventListeners($(‘selector’)) przyda się, gdy chcesz zobaczyć wszystkie eventy dla danego selectora. Może uratować tyłek, gdy przejmujesz po kimś projekt i dzieją się dziwne rzeczy :)

Za kilka dni kolejny wpis z serii Vue.js ;)