Czy znasz te możliwości Chrome DevTools?

W ostatnim tygodniu żaliłam ci się, że nie umiem w Webstorma i muszę się go nauczyć. A potem opisałam jego 3 funkcjonalności, z których często korzystam. Dziś będzie podobnie, tylko że w kontekście Chrome. Często mam wrażenie, że korzystam zaledwie z kilku zakładek. Aby okazać choć odrobinę szacunku dla developerów Chrome – postanowiłam DevToolsów się systematycznie uczyć. Chciałabym i ciebie do tego zachęcić, a na dobry początek dzielę się z tobą 4 trickami, które z pewnością ułatwią ci codzienną pracę.


CEL: szybkie mockowanie danych

Czy zdarzyło ci się szybko, doraźnie edytować stronę w zakładce Elements, a następnie ją przeklinać, kiedy ta brutalnie wróciła do pierwotnej postaci po odświeżeniu apki? No właśnie. Never again! Za pomocą narzędzia Local Overrides możesz wprowadzać zmiany na stronie, które przetrwają każdy reload. 

Otwórz DevToolsy np. za pomocą F12. Sources -> Overrides -> Select folder for overrides. Wybierz folder, w którym DevToolsy będą lokalnie zapisywać twoje zmiany. Upewnij się, że masz zaznaczony checkbox „Enable Local Overrides”. Teraz możesz wejść w zakładkę Network i wybrać request, którego odpowiedź chcesz edytować. Klikasz na niego prawym przyciskiem myszy i wybierasz „Save for overrides”. Równie dobrze możesz po prostu wybrać plik w zakładce Sources -> Page i analogicznie zapisać go do overrides.

Chrome DevTools mockowanie danych 1
Chrome DevTools mockowanie danych 2

Teraz baw się dobrze ? Edytuj zarówno pliki źródłowe w zakładce Sources, jak i CSS w zakładce Elements. Pamiętaj tylko, że DevToolsy nie zapisują zmian w DOM naniesionych w zakładce Elements. HTML możesz edytować tylko w zakładce Sources! Swoje zmiany możesz śledzić w zakładce Changes (otwórz ją w menu obok zakładki Console – upewnij się, że masz aktywną opcję „Show console drawer” w menu głównym pod 3 kropeczkami). Aby cofnąć zmiany – usuń pliki z zakładki Overrides z wybranego przez siebie folderu lub po prostu wyłącz możliwość nadpisywania źródeł (odznacz checkbox „Enable Local Overrides”).

Chrome DevTools mockowanie danych 3

CEL: zrzut ekranu bez pluginu

Otwórz DevToolsy np. za pomocą F12. Następnie kliknij Ctrl + Shift + P (ew. Cmd + Shift + P). Zobaczysz okienko z tak jakby dodatkową konsolą. Umożliwia ona szybkie dobranie się do wielu ukrytych możliwości chrome, między innymi zrobienie screenshota! 

Chrome DevTools zrzut ekranu

Wpisz >screenshot i wybierz jedną z 3 opcji zrzutu ekranu:

  • capture screenshot -> zrzut ekranu dokładnie tego, co jest widoczne na ekranie
  • capture full size screenshot -> zrzut całej strony
  • capture node screenshot -> zrzut konkretnie wybranej gałęzi dokumentu (najpierw zaznaczasz ją w inspektorze – potem wykonujesz zrzut).
  • capture area screenshot (dostępne od v73) -> zrzut wybranego obszaru (klikasz, a następnie kursor zamienia się w krzyżyk do zaznaczania obszaru)

CEL: ładowanie tylko tego kodu, który jest potrzebny (zmniejszenie wagi strony)

Czy ty też masz przed oczami fajerwerki?

Otwórz DevToolsy np. za pomocą F12. Upewnij się, że opcja „Show console drawer” w menu głównym pod 3 kropeczkami jest aktywna. Następnie wejdź na Sources -> 3 kropeczki obok Console -> Coverage i na tej zakładce kliknij np. ikonę przeładowania strony.

Chrome DevTools zmniejszanie wagi strony 1

Co widzisz? ? Jaka część kodu została wykorzystana podczas ładowania strony! Możesz nawet podglądnąć konkretne pliki źródłowe, aby sprawdzić, które fragmenty były przydatne, a które nie! Od v.73 możesz też eksportować te dane.

Chrome DevTools zmniejszanie wagi strony 2

CEL: czytelne przeglądanie plików źródłowych

O co tu chodzi? A no mianowicie o to, że w zakładce Sources pliki źródłowe nie są przedstawiane w przyjaznej dla oka postaci. Chrome próbuje załagodzić owy ból rzeszy developerów poprzez umożliwienie zwijania kodu. 

Otwórz DevToolsy np. za pomocą F12. Następnie kliknij Ctrl + Shift + P (ew. Cmd + Shift + P). Wpisz >folding a następnie wybierz z listy „Enable code folding”.  Możesz też poszukać tej opcji w Settings -> Preferences -> Sources. Super, prawda? Pamiętaj tylko, że takie rzeczy dopiero od v73.

Chrome DevTools przegladanie plików źródłowych 1
Chrome DevTools przegladanie plików źródłowych 2

Macie swoją listę tajnych opcji w Chrome DevToolsach? Piszcie w komentarzach!

Artykuły, które mogą Ci się spodobać...

Wpisz hasło, którego szukasz i naciśnij ENTER, aby je wyszukać. Naciśnij ESC, aby anulować.

Dawaj na górę