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 ;)