#pracazlogami01-Tryb dewelopera czyli logi przeglądarki

Reading Time: 7 minutes

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

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

Jaram się jak las 😀

1 thought on “#pracazlogami01-Tryb dewelopera czyli logi przeglądarki

Napisz komentarz

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.