Devtools

Potężne narzędzie do zarządzania i monitorowania treści oraz danych na stronach internetowych

Devtools to narzędzie, które w zależności od przeglądarki jest w nią wbudowane lub funkcjonuje jako rozszerzenie. Pomaga przede wszystkim programistom, w ich codziennej pracy. Było ono swego czasu jednym z głównych powodów dla którego programiści zrezygnowali z pracy na Mozilla Firefox na rzecz Google Chrome. Może być również pomocne dla testera jak i zwykłego użytkownika, wystarczy tylko zapoznać się z jego funkcjonalnościami.

 

Dlaczego to narzędzie jest takie niesamowite?

Pierwsze co na myśl przychodzi programiście to “console.logi !”. Faktycznie, jest to metoda debugowania, przez wielu uznawana za niepoprawną, ale chyba wciąż najbardziej popularną. Wiele osób może nie wiedzieć o czym piszę, jednak jeśli któregoś razu otworzycie konsole (wciskając np. F12) na stronach internetowych, zwłaszcza mniejszych firm możecie trafić na napis “test”. 

 

Żeby naświetlić jak duże są możliwości devtoolsów trzeba się zagłębić, ile jest obszarów wśród technologii frontendowych. Programiści zajmują się layoutem, wyglądem, logiką oraz zabezpieczeniami. Strona, którą widzimy jako użytkownicy trafia do nas z serwera, w związku z czym mamy do niej dostęp, “ściągnęliśmy ją z internetu” i mamy dostęp do jej elementów. To właśnie dzięki devtools możemy patrzeć co się na tej stronie znajduje, pooglądać elementy, nazwy, klasy, atrybuty, style… i co najlepsze, możemy je zmieniać. Rodzi to możliwości jak np. wyłączenie nakładki, która każe nam wyłączyć Adblocka, zgodę na cookies czy zobaczyć “zakryte” elementy jeśli takie istnieją. Ot mała ciekawostka jak “oszukiwać” strony internetowe.

 

Usprawnienia pracy programista – tester

Aplikacje webowe to specyficzne strony internetowe. Ich logika jest zazwyczaj dużo bardziej rozbudowana i ma wiele funkcjonalności. Od Twojego jednego wyboru zależy mnóstwo późniejszych zachowań strony, przykładem może być formularz. Jeśli zaznaczysz w nim, że nie masz zwierząt to niekoniecznie dobrym pytaniem do wyświetlenia byłoby czym je karmisz? Jest to tylko jeden przykład a przypadków różnych zależności może być setka, często nawet programista nie jest w stanie tego objąć i wszystkie przypadki obsłużyć. Wtedy właśnie pojawiają się błędy i są one pokazywane w konsoli devtools, która informuje na czym polega błąd. Jeśli tester napotka taki błąd w konsoli może go skopiować lub zrobić screen ekranu, dzięki czemu programista będzie miał dużo więcej informacji niż słowny/pisemny opis osoby nietechnicznej. 

Dodatkowo w zakładce “Network”, można zobaczyć dane, które przychodzą z serwera lub są wysyłane do serwera.

 

Podsumowując

Devtools to potężne narzędzie, które pomoże nam w codziennej pracy. Nawet przeciętny użytkownik może zrobić z nim ogrom ciekawych rzeczy. Devtools przyśpiesza pracę, pomaga znajdować błędy, ma możliwości zmieniania stylu dzięki czemu nie trzeba co chwilę odświeżać strony przy wprowadzanych zmianach. Nie wyobrażam sobie pracy bez niego, jest to “must-have” w znanych narzędziach programisty.

 


Opublikowano:

Mentax na Facebook'u