#pracazlogami01-Tryb dewelopera czyli logi przegl膮darki

Siemano witam na moim blogu ! 馃榾 #zosta艅wdomu – > kliknij o informacje
Pewna osoba z grupy Testowanie Oprogramowania, pod jednym z moich ostatnich post贸w, napisa艂a pro艣b臋 bym poruszy艂 temat trybu dewelopera.
Tryb dewelopera czyli potocznie wszystkim znane F12 w przegl膮darce.
Dla mnie to 偶aden problem, tak wi臋c zaczynamy !

Na pocz膮tek mem

https://i.imgur.com/donqvfn.png

Czym s膮 narz臋dzia dewelopera ?

Po pierwsze z czym mamy do czynienia ? Czym jest tryb deweloperski przegl膮darki ? To taki zbi贸r narz臋dzi upakowanych w jeden ‘kontener’, s艂u偶膮cy do tego by dowiedzie膰 si臋 technicznych aspekt贸w strony czy aplikacji webowych.

W sk艂ad owego trybu wchodzi mi臋dzy innymi konsola, zak艂adka sie膰 (network) czy np. ca艂a struktura html dokumentu.

Obrazek przedstawia okno narz臋dzia dewelopera czarne Chrome za艣 bia艂e Firefox

R贸偶nice mi臋dzy przegl膮darkami w kwestiach owych narz臋dzi, s膮 niewielkie, dlatego u偶ywajcie, kt贸rej chcecie.

Zak艂adka sie膰 – network

Zacznijmy od zak艂adki sie膰, co kryje si臋 pod t膮 zak艂adk膮 ?
Kryj膮 si臋 tam 偶膮dania wysy艂ane oraz odbierane, mi臋dzy przegl膮dark膮 a serwerem.

Po lewej strona / aplikacja a po prawej DevTools.

Zerknijmy na bardzo prosty pojedynczy przyk艂adowy wiersz 偶膮dania.
Mamy tabele kt贸ra sk艂ada si臋 z kolumny Name, w niej b臋dzie lista 偶膮da艅 posortowana domy艣lnie najnowsze na dole (mo偶na to zmieni膰 klikaj膮c na label name).
Klikaj膮c na dany wpis 偶膮dania mamy po lewej pokazane szczeg贸艂y z sze艣cioma kartami. Najbardziej interesuj膮ce s膮 trzy z nich s膮 to :
Headers czyli nag艂贸wki, przybli偶my troch臋 screena aby zobaczy膰 szczeg贸艂y.

Tab nag艂贸wek sk艂ada si臋 te偶 z sekcji.
Pierwsza sekcja general dotyczy, tego gdzie si臋 dobijamy, jaka jest metoda 偶膮dania (o tym p贸藕niej). Bardzo wa偶ny status code z kolorem, zielony najlepszy kolor sugeruje, 偶e wszystko jest dobrze. 馃檪
Kolejna sekcja responder headers czyli nag艂贸wek odpowiedzi, zawiera cz臋sto mniej wykorzystywane informacje o ustawionym ciasteczku, o kodzie statusu odpowiedzi i takie tam mniej lub bardziej przydatne informacje. Wszystko zale偶y od kontekstu, w kt贸rym wykorzystujemy informacje. Ostatnia sekcja to request headers czyli nag艂贸wki requesta- pytania do serwera.

Karta parametry

Kolejna karta parametry to lista parametr贸w typu mapa czyli klucz – warto艣膰.

S膮 to wszystkie parametry, kt贸re przekazuje przegl膮darka do komunikacji z serwerem lub odwrotnie serwer do przegl膮darki.

Je艣li pracujemy nad aplikacj膮 czy stron膮 kt贸ra posiada, r贸偶norakie interakcje np. z baz膮 danych i frontend strony, jest oparty o tabele.
To b臋dziemy dostawa膰 cz臋sto bardziej z艂o偶one odpowiedzi ni偶 wy艣wietlone wy偶ej.

Parametry mog膮 prezentowa膰 si臋 na przyk艂ad tak 馃檪

Karta odpowiedzi

Ostatnia z interesuj膮cych najbardziej kart, karta s艂u偶y do og贸lne podsumowania danego 偶膮dania w kontek艣cie odpowiedzi.

S膮 te偶 requesty, kt贸re dopiero si臋 przetwarzaj膮 i nie posiadaj膮 jeszcze tego co b臋dzie omawiane za chwile czyli kody status贸w HTTPs.
Ale za nim przeczytacie musz臋 wam przekaza膰 bardzo wa偶n膮 wiadomo艣膰 !

Kody odpowiedzi HTTP

Na ch艂opski rozum do numerek – odpowiada danej odpowiedzi 馃榾
I tak to mo偶na najpro艣ciej interpretowa膰.
Ale do rzeczy owe kody s膮 podzielone w grupy i s膮 to :

  1. Numero uno to 1** – tutaj znajdziemy kody informacyjne
    na przyk艂ad : 111 to odrzucenie po艂膮czenia przez serwer
  2. Numero dos to kody powodzenia sukcesu
    200 najlepszy komunikat ok, 202 przyj臋te i trwa jego realizacja
  3. Numero tres s膮 to kody przekierowania 305 use proxy, 偶e trzeba dobija膰 si臋 przez proxy 301 trwale przeniesiony i pod tym nowym adresem b臋dzie dost臋pny
  4. Numero cuatro kody 400 czyli 藕le 馃榾
    404 – nie znaleziono np. obrazek czy co艣 innego zasobu z url
    401 – nieautoryzowany dost臋p wymagane uwierzytelnienie
    400 – niepoprawne zapytania, serwer u偶ywa z艂ej sk艂adni zapytania
  5. No i numero cinco kody 500 kody b艂臋d贸w ale serwera
    503 – np. my u偶ywamy tomcata i jak go restartujemy to mamy 503
    Czyli serwer jak wstanie to ju偶 503 nie b臋dzie 馃榾 ale te偶 np. je艣li serwer w danej chwili jest przeci膮偶ony
    500 – to co艣 co oznacza, 偶e serwer raczej wywali艂 w kosmos 馃檨 馃榾

Wszystkie kody tutaj (tutaj 艂adniej sformatowane)
http://www.ulos.pl/kody-odpowiedzi-http-czyli-popularne-404-403-301-302-200 lub wiki :
https://pl.wikipedia.org/wiki/Kod_odpowiedzi_HTTP

Typ 偶膮da艅 metody HTTP

Opr贸cz wspomnianych grup i numerk贸w istnieje jeszcze typ 偶膮da艅 HTTP.
A s膮 to :
GET – czyli we藕, pobierz
POST – stw贸rz lub zaktualizuj zas贸b ale dynamicznie tworzy nowy wygenerowany numer id i adres docelowy jest inny
PUT – to samo co POST z t膮 r贸偶nic膮, 偶e bazuje na ‘statycznych’ adresach
najcz臋艣ciej jednak s艂u偶y do aktualizacji zasobu

Metoda HEAD – robi to samo co GET jednak z samym nag艂贸wkiem odpowiedzi
Metoda DELETE – metoda usuwa podany zas贸b np. parametrami
OPTIONS – to metoda informacyjna, mo偶na wydoby膰 dost臋pne metody mo偶liwe do u偶ywania dla danego zasobu lub ca艂ego serwera.
Kolejna metoda ze standardu HTTP to metoda PATCH
Jest to cz臋艣ciowa zmiana element贸w danego zasobu.

O kodach mo偶na poczyta膰 :
https://www.diwebsity.com/2015/10/16/metoda-put/
https://www.ibm.com/support/knowledgecenter/pl/SSFGJ4_7.6.0/com.ibm.mif.doc/gp_intfrmwk/rest_api/c_ctr_put_post_delete.html
https://www.ibm.com/support/knowledgecenter/pl/SSFGJ4_7.6.0/com.ibm.mif.doc/gp_intfrmwk/rest_api/r_rest_get_method.html
https://www.diwebsity.com/2015/10/29/metoda-patch/
https://www.diwebsity.com/2015/10/01/metoda-options/

Bardziej programistyczna ‘gadka’ 馃榾

I par臋 przyk艂ad贸w kod贸w

Jak widzicie aby sobie kody odpowiedzi sprawdza膰 wystarczy zrobi膰 sobie tak p贸艂 monitora, kody b艂臋d贸w lista, drugie p贸艂 monitora strona :
https://httpstat.us/xxx
Gdzie zamiast xxx wpisujecie kod b艂臋du kt贸ry chcecie uzyska膰, otwieracie F12 robicie od艣wie偶enie strony F5 i macie przyk艂ad kod贸w, kt贸re wkli艂em wy偶ej 馃檪

Inne karty opisowo

Musz臋 jednak opisa膰 inne karty kt贸re s膮 dost臋pne w trybie dewelopera.
Inspektor pokazuje ca艂y dokument danej strony, dzieli widok na elementy, model pude艂kowy czy siatk臋.
Klikaj膮c dany element mo偶emy zobaczy膰 jego w艂a艣ciwo艣ci.

Debuger zak艂adka bo tak nazywa si臋 w FF to nic innego jak struktura plik贸w strony.

Zak艂adka arkusz styl贸w czyli plik贸w .css strony, by膰 mo偶e niekt贸re testy wymagaj膮 czego艣 z tego 馃檪

Zak艂adka wydajno艣膰 odpowiada i mo偶e pom贸c w testowaniu wydajno艣ci serwisu lub aplikacji webowej 馃檪

Kolejna zak艂adka pami臋膰 sprawdzanie wykorzystanej pami臋膰 i ev. wyciek贸w. Bez bicia przyznam si臋, 偶e do niczego tego nie u偶ywa艂em nigdy.

Dane czyli pliki ciasteczek i lokalnej pami臋ci etc.
Cz臋sto testy np. logowania czy innych akcji b臋d膮 wymaga艂y podmian, modyfikacji ciasteczek, ale cz臋sto s膮 bardzo fajne wtyczki do tego typu roboty 馃檪

Zak艂adka dost臋pno艣膰 czyli autytor do sprawdzania dost臋pno艣ci strony przez czytniki ekranowe, tego te偶 nie u偶ywa艂em wi臋c si臋 wi臋cej nie wypowiem 馃榾

W chrome dodatkowo jest auditor, taka ala analiza strony pod r贸偶nym k膮tem np. seo czy wydajno艣ci.

Zak艂adka security

W firefoxie trzeba klikn膮膰 w k艂贸dk臋 strony

Po klikni臋ciu wi臋cej informacji mamy pe艂ne info o bezpiecze艅stwie strony.

W chromiaku mamy tak plus view certificate

Podsumowanie

Dzi艣 dowiedzieli艣my si臋 lub usystematyzowali艣my wiedz臋 na temat trybu dewelopera w przegl膮darce, metod http oraz kod贸w odpowiedzi.
Ta wiedza pomo偶e nam w codziennych problemach zwi膮zanych z testowaniem WEBa.

A tutaj bonus, bonus rpk, cz艂owieku !
Takie 膰wiczenie dla was 馃檪
https://duckduckgo.com/ wchodzimy sobie na t膮 stron臋, jest to znana lub nieznana wam alternatywna wyszukiwarka tre艣ci w internecie.
Wciskamy F12 czy艣cimy console najlepiej skr贸t ctrl + l.
Wklejamy do konsoli to :
document.getElementById("search_form_input_homepage").setAttribute("value", 'pogodalublin');
document.getElementById("search_button_homepage").click();

Co zrobi ta akacja ? Wstrzyknie przez javascript ustawienie value pola.
Za pomoc膮 setAttribute robi to wykorzystuj膮c id elementu, nast臋pnie na tego przekazanego stringa, tam wstawia.
Druga linijka kliknie przycisk szukajki za pomoc膮 funkcji click() i tyle.

Aby odnale藕膰 dany element klikamy zbadaj i wtedy otworzy nam si臋 wcze艣niej omawiana przez mnie karta o nazwie Elements i pod艣wietli nam element kt贸ry badamy 馃檪
Znajomo艣膰 badania element贸w to pocz膮tek do test贸w automatycznych.
Je艣li was to interesuje polecam na samym pocz膮tku bez 偶adnych narz臋dzi pobawi膰 si臋 prost膮 konsol膮 java scriptu w chromie.


Wklejacie i dzia艂acie, je艣li kto艣 jest zainteresowany samym g艂臋bszym tematem JSa w konsoli, na razie bez framework贸w narz臋dzi, 偶ebym co艣 wi臋cej pokaza艂 np. przyk艂adow膮 stron臋, 艣mia艂o mo偶ecie pisa膰.

Polecam tak偶e sekcj臋 s艂aw czyli osoby, kt贸re inspiruj膮 :
https://gregkaqa.pl/index.php/sekcja-slaw/

Je艣li chcesz by膰 wo艂any emailowo zapisz si臋 na list臋 newsletter dost臋pn膮 :
https://gregkaqa.pl/index.php/newsletter/

Tym czasem mi艂ego i do nast臋pnego wpisu !
Mosz co艣 艣miesznego

https://www.youtube.com/watch?v=iNA3k3nZ-7c
Jaram si臋 jak las 馃榾

Jeden komentarz do “#pracazlogami01-Tryb dewelopera czyli logi przegl膮darki

Napisz komentarz