Inspect element to the rescue

U ovom dokumentu opisaću vam kako mozete koristiti opciju Inspect element za testiranje.

Šta je Inspect element?

Web testing, jednostavno rečeno, jeste provera da li web aplikacija ima neke greške (bugove) pre nego
što se ona da široj publici na korišćenje. Kad se testiraju veb aplikacije, postoji mnogo toga što možete
koristiti prilikom testa i sebi tako olakšati taj proces. Nešto što je od velike pomoći jeste tzv. Browser
developer tool: Inspect element.

Ovaj pomoćni alata vam omogućava da vidite kod koji se nalazi iza svakog svojstva aplikacije/sajta, u
smislu front-end dela.

Zašto ga koristiti?
Dizajner: Želite li da vidite kako bi sajt izgledao na mobilnom? Kako bi izgledao tekst da se koristi font A
ili font B? Kako izgleda dugme ako se koristi boja A ili boja B?

Osoba za prodaju/marketing: Zanima vas koje sve reči konkurencija koristi u hederu sajta ili da proverite
da li se sajt učitava presporo

Pisac: Dosta vam je da blurujete ime/mejl u screenshotovima? Sa ovim alataom možete izmeniti veb
stranicu u sekundi

Agent za podršku (support): Treba vam način da pojasnite programerima šta da se popravi na sajtu.

Tester: Treba vam način da lakše prijavite bug ili proverite ponašanje veb stranice pod raznim
okolnostima ili da proverite postoe li neki errori prilikom učitavanja određenih delova stranice

Za sve ovo a i za mnogo više, Inspect element je vrlo koristan alat. Obuhvata razne super stvari: konzolu
gde se pušta kod, View Source- da se vidi sirovi kod iza sajt, Sources page sa listom svakog fajla koji se
load-uje na sajtu itd.

1
Kako se pokreće?
U Chrome-u:

1. Otvorite neki veb-sajt

2. Kliknite bilo gde na strannici i kliknite desni klik na miš i videćete opciju u meniju zvanu „Inspect“
3. Kliknite tu opciju
4. Otvoriće vam se prozor preko kojeg možete da proveravate razna ponašanja vaše aplikacije
(nešto od toga biće spomenuto u ovom dokumentu)

Još jedna način je da preko tastature jednostavno kliknete na taster F12. Rezultat je isti.

Takođe, možeze kliknuti na hamburger meni (ikonica sa 3 tačke) gore desno u Google Chrome toolbar-u,
klik na More Tools, klik na Developer Tools.

2
Slika 1: Pokretanje Inspect elementa preko miša

Slika 2: Prozor Inspect elementa

Opcije Inspect elementa

Pokazivač- selektor

Može se naći na vrhu ovog alata i izgleda kao strelica u kvadratu )na slici obeleženo žutom bojom):

3
Koristi se kako bi se pronašao neki element na stranici tj. Njime možete bukvalno stati, kliknuti na neki
element i tako dobiti njegove detalje u prozoru sa strane.

Primer:

Kliknite na pokazivač

Kliknite na bilo šta na stranici (ja sam kliknula na logo)

Primetićete da je loog kao dobio neku plavu pozadinu kako ste miš stavili preko njega

Kad ste kliknuli na logo, na prozoru desno obeležen je deo koda koji se odnosi na logo (deo koda dobio je
sivu pozadinsku boju)

Ovako je taj element stranice iskodiran

Tu možete videti i stil koji je korišćen tokom programiranja tj. Kako je element stilizovan (tab se zove
Styles). Tu se nalaze atributi veb stranice sa svojim vrednostima. Npr. Atribut je font-style, color,
displaz... Prikazane su koje su boje korišćene, koji razmaci (paddings, margins), koji font i njegov stil(ako
je tekst upitanju) itd, itd:

4
Bukvalno, korišenjem selektora, možete odabrati element sa stranice i videti njegove pojedinosti. Time
npr. možete testirati da li je prava boja iskorišćena prilikom programiranja, jer se boje obeležavaju
određenim kombinacijama slova i brojeva, tzv Hex kod (npr. Jedna nijansa ljubičaste se obeležava sa
EE82EE. Klijent može tražiti određeni hex kod za ljubičastu koji na oko može biti sličan ali kod je kod)

Kad selektujete element levo (Elements panel), možete dakle videti CSS pravila koja su korišćena za taj
element na desnoj strani (Styles panel). Možete stopirati stil koji se koristi tako što kliknete checkbox
pored njega i ukinete ga (disable) odtštiklirate checkbox:

5
Takođe možete da editujete elemente i promenite im stil.

Što se tiče teksta, tako možete proveravati koji font stil je korišćen (font-family: Arial, Helvetica... itd itd),
veličina fonta (font-size: 20..30..), da li je italik ili sl (font-style: normal/italic/oblique) itd.

Možete editovati elemente preko ovog alata. To znači da ih možete izmeniti i videti kako se stranica
ponaša kad je element veći ili manji. To to radite nije izmena koda pa da će je i drugi videti. To vidite
samo vi na vašem okruženju i čim osvežite stranicu, sve se vraća na onako kako je i bilo, na onaj izvorni
kod.

Na primer, možete proveriti kako se stranica ponaša ako ubacite neku ogromnu količinu teksta.

6
Slika 1: Originalni tekst sa vebsajta:

Slika 2: Editovan i izmenje tekst:

7
Možete npr i boju teksta da izmenite, smao treba da nadjete odgovarajući atribut u Styles sekciji.

Slika 3: Izmena boje teksta iz crne u crvenu:

Tab: Elements

Ovaj tab omogućava da vidite stil vaše stranice. Ima određene pod-tabove (Styles, Computed, Event
Listeners, DOM Breakponts, Properties, Accesability).

Neke od njih opisaćem u sledećim poglavljima.

8
Styles

U ovom sekciji možete videti sve u vezi sa HTML, CSS i Javascript jezicima koji su korišćeni za veb sajt.
Skoro kao da gledate pravi (source) kod sajta, sa jednom glavnom razlikom: možete da imzenite bilo koji
deo koda (opisano gore u pirmerima) i vidite promene u realnom vremenu (odmah ispred sebe) ali čim
učitate opet istu stranicu, izmene se gube.

Ovde dakle vidite sve stilove koji su korišćeni za stilizovanje (CSS) vaše starnice a možete i sami dodati
neko stilsko pravilo (style rule) tj, kao iskodirati deo i videti kako se stranica ponaša.

S opcijom check/uncheck atribut, možete da ukinete neko pravilo i opet vidite kako se stranic aponaša
bez njega.

Kad koristite selektor i stavite miš preko nekog elementa stranice, možete videti nekoliko boja oko
elementa: kao na slici:

Ove tri boje predstavljaju tzv.spacing properties elementa. Skrolujte desno na dno CSS sekcije i možete
videti dijagram sa jasnijim merama u pikselima:

9
Ovde je prikazano koliko je element udaljen putem atributa padding and margin, kakav mu je border itd.

Ovo takođe možete videti i bolje u pod-tabu Computed

Ovaj pod-tab se koristi da bi se lakše videli detalji određenog elementa stranice.

10
Kao što primećujete, elementi imaju ovaj znak:

Uz pomoć te opcije, možte da raširite element i vidite više njegovih detalja:

Event Listeners

Event Listener je procedura/funckija u programu koja čeka da se događaj/event pojavi. Primer event-a je
klik ili pomeranje miša, klik na tastaturi... Listener je programiran da reaguje na input ili signal tako što
zove tzv. Event handler. Specifičan je jezike Java i Javacript.

Event-ovi su koristan način da se prikupe podaci o korisnikovoj interakciji sa elementima aplikacije.

11
U ovom tabu možete videti koji listeneri se koriste na stranici i kako reaguju na određenu akciju (npr klik)
kao i vrmee reakcije:

DOM Breakpoints

DOM, Document Object Model, definiše strukturu vaše stranice. Svaki DOM node (čvor) jeste jedan
element stranice.

Ovim modelom se prikazuju objeki strukture i sadrđaja nekog dokumenta na vebu. To je interfejs za html
i xml dokumente koji prikazuje čvorove/nodes i objekte/objects stranice. Tako se programski jezik
povezuje sa stranicom.

Dakle wb stranica je dokument. Može da se prikaže i prozoru browser-a ili kao HTML izvorni kod. U
svakom slučaju, to je isti dokument. DOM je objektno orijentisana reprezentacija veb stranice koji se
modifikuje preko npr. Javascript jezika.

U prevodu: znate sve one cool animacije koje vidite na nekoj veb stranici? Prave se tako što se
manipuliše DOM-om. Njime se omogućava čitanje HTML i XML dokumenata u browser-u. Omogućava se

12
jeziku (Javascript) da manipuliše, pravi stukturu i stil vaše veb stranice. DOM izgleda kao drvo u kom su
predstavljeni delovi veb stranice (slika dole):

Više o tome:

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

https://www.freecodecamp.org/news/whats-the-document-object-model-and-why-you-should-know-
how-to-use-it-1a2d0bc5429d/

https://bitsofco.de/what-exactly-is-the-dom/

13
DOM Breakpoints predstavlja način da se pauzira javascript kod. Ima mnogo načina za to ali to već
iziskuje znanje programiranja I javascripta.

https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

Properties

Ovde možete videti informacije o DOM-u u vezi sa elementom stranice koji ste odabrali preko selektora.
Ovo je posebno važna stvar za npr Javascript programera.

Ovde vi, kao testeri, možete videti šta je child a šta parent element i time računati relacije među
elementima (dobra stvar za automation testing) preko tzv. DOM tree/DOM stabla.

14
15
Tab: Console

16
Ovim alatom možete da uđete u Javascript ili Jquey komande koje imaju dodira sa veb strabicom na
kojoj se trenutno nalazite.

Preko ovog alata možete da vidite ima li nekih grešaka u vezi sa npr javascript fajlom (toga ne sme
biti).

Primer grešaka uhvaćenih u Console tabu:

Takođe, možete videti i logove.

Šta to znači?

Svaki put kad učitate/loadujete stranicu, i konzoli se sve briše. Ako treba da vidite logove sranice,
uključite opciju Preserve logs:

17
Zašto?

Jednostavno, veb programeri često loguju poruke u Console da porvere da im Javascript radi kako treba.
Kad browser učita Javascript i vidi to nešto što je programer napravio (stručan naziv je expression), on
zna da treba da loguje poruku u console.

Više o tome:

https://developers.google.com/web/tools/chrome-devtools/console

Bez Preserve log:

18
Sa Preserve log:

Tab: Sources
Koristi se da:

1. Vidite fajlove
2. Editujete CSS i Javascript
3. Kreirate i sačuvate Snippete javascripta koje moćete puštati na bilo kojoj starnici
4. Debug Javascript
5. Postaviti radno okruženje- Workspace

Vidi fajlove

Sources:Pages

19
Preko ove opcije možete videti sve resurse koje je određena stranica učitala

Kako je Page panel organizovan?

 Top level (top na screenshotu) predstavlja HTML okvir/frame. To ćete naći na svakoj stranici koju
posetite o to je glavni/main frame stranice. (više o frame:
https://www.w3.org/TR/html401/present/frames.html)
 Second level (elanwave.com na screenshotu) predstavlja origin (više o tome:
https://html.spec.whatwg.org/multipage/origin.html#origin)
 Third level, fourh level itd, predstavljaju direktorijume I resurse koji se učitavju od određenog
origina. Npr. Pun path za resurs sa stranice je:
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css

Ako klinete na neki fajl u Page panelu, desno u Editor mode-u ćete videti njegove detalje:

20
Za npr, slike, možete videti image preview:

U Editor panelu, možete editovati i menjati CSS i Javascript i pormeniti neku vrednost atributa
(npr.izmeniti boju elementa na stranici, objašnjeno je u prethodnim poglavljima)

Kreiranje Snippets

Snippets su skripte koje možete run-ovati/pustiti na bilo kojoj stranici. To je izraz koji se koristi sa mali
deo koda koji s emože iznova koristiti- re-usable code.

Ovo je uglavnom rezervisano za programre a više o tome:

https://developers.google.com/web/tools/chrome-devtools/sources#edit

21
Debug Javascript

Koristi se da se otkrije šta nije u redu sa Javascript fajlom. Prkeo njega se setuju tzv. Breakpoints kojima
će se stopirati deo u kodu namerno kako bi se korak po korak pronašla greška.

Više o ovome: https://developers.google.com/web/tools/chrome-devtools/javascript/

Postavite radno okruženje- Workspace

Kad se edituje fajl u Sources panelu, te se izmene gube čim se stranic aopet učita. Workspace
omogućava da se sačuvaju te promene zarad nekog daljeg rada sa njima.

Više na: https://developers.google.com/web/tools/chrome-devtools/workspaces/

Tab: Network
Ovde se snimaju sve informacije u vezi sa svakom operacijom na sajtu, uključujuži I podatke u vezi sa
vremenom/tajmingom, HTTP zahtevima/requests, odgovorima/response, cookies itd.

Rekli smo da se na webu sve svodi na slanje zahteva I prihvatanje odgovora.

Možete koristiti filtere u ovom panelu, da vidite kako se ponašaju javascript (JS) fajlovi, slike (Img), CSS,
Media itd.

Na slici dole možete videti primer za koliko su se učitale stranica About Us I slike na njoj na sajtu
elanwave.com:

22
 Preko ovog panela ćete se postarati da su resursi zaista upload-ovani ili downloaded sa stranice i možete
inspektovati određene resurse pojedinaćno i videti njihovu veličinu, vreme učitavnaj, cookie itd.

Network panel loguje/beleži sve aktivnost sa mreže a u vezi sa određenom stranicom u tzv. Network
logu:

Svaki red u Network logu predstavlja RESURS stranice. Svi resursi su defoltno poređani hronološki.
Resurs na vrhu je obično glavni HTM dokument. Resursi na dnu je sve ono za šta je zahtev/request
poslat kao poslednji.

Svaka kolona predstavlja informacije o resursu. Kolone su:

 Status- HTTP response code.

 Type- Tip resursa

 Initiator- šta je uzrokovalo da se resurs zahteva. Klikom na link u

Initiator koloni bižete odvedeni na source kod koji je uzrokova request/zahtev

 Time- koliko je bilo potrebno da se zahtev pošalje

 Waterfall- grafički prikaz različitih stadijuma zahteva/requesta.

Postavite miš na Waterfall da vidite detalje, kao naslici dole:

23
Kolone se mogu konfigurisati. Desni klik na Network Log tabelu I dobićete meni sa opcijama:

Šta god da odaberete, dobićete novu kolonu u tabeli I nove podatke I vezi sa resursima.

24
Hoćete da simulirate sporiju konekciju na mrežu?

Koristićete nešto što se zove throttling the page da bi npr simulirali ponašanje na mobilnom.

Kliknite Throttling padajući meni koji je setovan da bude Online defoltno:

Odaberite Slow 3G opciju

Kliknite desnim klikom na Reload opciju u gornjem levom uglu:

Odaberite: Empty cache and hard reload:

25
Kad se poseta stranici ponovi, browser će iskoristiti neke fajlove iz svoje cache memorije koje ubrzaju
učitavanje stranice. Opcija koju ste iskoristili za brisanje ovog cache-a nateraće browser da ide na mrežu sa
svim resursima.

Ovde možete naći više o Network panelu: https://developers.google.com/web/tools/chrome-

devtools/network

Tab: Application
Ovaj tab vam je koristan da vidite šta je sve sačuvano za Cookies I Cache.

Takođe, ovde sve to možete I obrisati kako biste bolje testirali.

Npr. Kad se radi neka CSS izmena (UI izmena), često browser ume da zakešira te vi kao tester ne vidite to
nešto novo već vidite I dalje staru implementaciju.

U tom slučaju, uvvek brišite cookies I cache I uradite Hard reload (objašnjeno gore)

26
Cookies brišete tako što kliknete Cookies desnim klikom I kliknete Clear:

Sa Clear storage opcijom I klikom na dugme Clear site data, brišete podatke sajta:

27
Opcija: Emulator
U Inspect element izgleda kao ikonica mobilnog telefona pored tablet a:

Koristi se kako bi se simulirale razne rezolucije I tako proverilo kako se aplikacija ponaša na raznim
uređajima- desktop, mobilni, tablet, ipad, iphone…

Time se proverava koliko je sajt RESPONSIVE

28
U padajućem meniju možete odabrati neke uređaje:

Takođe, preko opcije Edit možete naži I dodatne uređaje. Kad kliknete ovu opciju u padajućem meniju,
otvoriće vam se ovaj prozor I tu ćete odabrati još uređaja:

29
Emulator ima opciju da se izabere portrait ili landscape mode uređaja:

Portrait:

Landsape:

30
Primetićete da se vaš miš na sad pokazuje kao mali krug na stranici. Ovo vam omogućava da se ponašate kao
da korsitite pravi mobilni telefon/tablet.

Ako kliknete dok npr vučete stranicu dole, ovo neće obeležiti tekst kao što bi se inače desilo u vašem
browser, već će ekran biti povučen dole kao što to biva na touchscreenu.

Možete učiniti da se browser ponaša kao telefon-

Pritisnite ESC da otvorite search sekciju u Inspect element I ovaj put kliknite 3 meni 3-tačke u levom delu za
meni ocpije. Pojaviće se More tools

31
Odaberite Sensors I dobićete tri nova alata: Geolocation, Orientation I Touch.

32
Touch vam omogućava da uključite/isključite selector koji je sad u obliku kruga I koji se ponaša kao prst a ne
normalan miš.

Orientation vam omogućava da interakciju obavljate sa osetljivijim vebsajtovima poput online igricama.

Geolocation vam simulira zazličite lokacije.

Preko Networks koji je spomenut u gornjim poglavljima, možete simulirati različite brže/sporije mreže:

------------------------------------------------------------------------------------------------------------------------------------------------

Više za čitanje:

https://openclassrooms.com/en/courses/3523321-optimize-your-website-with-devtools/3885306-console

https://www.quora.com/How-is-inspect-element-useful-for-a-QA-engineer

https://community.optimizely.com/t5/Developers/Using-Chrome-Developer-Tools-to-QA-and-Test-
Experiments/td-p/11684

https://blog.scottlogic.com/2015/12/16/devTools.html

http://anti-code.com/devtools-cheatsheet/

https://zapier.com/blog/inspect-element-tutorial/

33