Chrome DevTools

Jak powszechnie wiadomo, każda praca wymaga specyficznych dla tej pracy narzędzi. W przypadku hydraulika jest to klucz francuski, w przypadku nauczyciela jest to tablica, a przypadku web developera są to tzn. ‘DevTools’. Osobiście, do tej pory, jako ‘DevTools’ używałem narzędzi dostępnych w Internet Explorer (od wersji 8.0). Owszem, byłem świadomy “firebuga” występującego w ‘mozilla firefox’, jednak siła przyzwyczajenia była zbyt silna, aby się przemóc.‘Narzędzia developerskie IE’ pokazał jeden z kolegów z pierwszej pracy i… tak jakoś zostało. Do dzisiaj.

Pod wpływem kilku ost. wykładów Gutka (więcej info w moim poprzednim wpisie), postanowiłem poszerzyć moją wiedzę o to, co zaserwował nam Gutek podczas swoich wykładów.

Jednym z miłych zaskoczeń są narzędzia developerskie dostarczone nam przez firmę Googledla ich przeglądarki Chromeo nazwie “Chrome DevTools”.

To co jest naprawdę fajne, to fakt, iż google, oprócz dostarczenia nam porządnych narzędzi udostępnia również mini-tutorial, w którym oprócz “wykładów” (filmiki) mamy też do wykonania część praktyczną (ponieważ jak to mówi miły pan na filmiku “nic nie zastąpi praktyki” ;)).

To co mnie najbardziej urzekło w “Chrome DevTools”, to możliwość sprawdzania wydajności stron i sposób konkretnego wyszukiwania “wąskiego gardła” (tzw. “bootle neck”), z dokładnością do linii kodu, zarówno przy ładowaniu strony do przeglądarki, jak i późniejsza obsługa tego kodu w przeglądarce.

Link do samouczka z Chrome DevTools

p.s. W kursie jest również odnośnik do innej strony hostowanej przez google (closure-compiler), służącej do minimalizowania objętości plików js (w celu zwiększenia wydajności stron, które tworzymy).