Chrome DevTools

Uvod

U ovome članku je napravljen pregled specijalizovanih alata u okviru “Chrome” browsera, pod nazivom “DevTools”. Chrome DevTools su nezamenjivi set alatki namenjeni web developerima kao pomoć u svakodnevnom radu. Kroz DevTools je omogućen pregled HTML stranice i rad sa DOM elementima, kao i pristup svim CSS svojstvima elemenata.
U ovom paketu alata je naručita pažnja posvećena delu za debagovanje JavaScript koda. Koristeći ovoj alat je omogućeno definisanje raznih načina prekidanja izvršavanja progamskog koda (tzv. breakpoint), što znatno olakšava rad web developerima pri otklanjanju bagova na vebsajtovima. Pri svakom prekidu je omogućen uvid u vrednosti promenjiva kao i njenih oblasti definisanosti.
Pored ovoga postoje sekcije vezane za praćenje performansi web aplikacije, kao i pregled razmene podadaka izmedju klijenta i servera.

General

Global shortcuts

Pretraga svih fajlova

Pretraga prema ključnoj reči kroz sva dokumenta je omogućena prečicom Ctr + Shift + F, nakon čega se otvara sekcija za pretragu. Nakon zahteva za pretragu po nekoj ključnoj reči u sekciji se pojavljuju izlistani rezultati. Dovoljno je kliknuti na neki od rezultata i otvoriće se odgovarajući fajl.

Inspector settings

Otvaranje settings prozora

Settings prozor se najlakše prikazuje sa F1 ili klikom na tri vertikalne tačkice u gornjem desnom uglu prozora inspektora.

Čuvanje koda i nakon reload-a

Ako želimo da sačuvamo kod unutar console i nakon reload-a stranice, potrebno je da se u settings sekciji “čekira” opcija “Preserve log upon navigation” pod tabom Console.

Blackboxing script

Blackboxing script je postupak sa kojim pri debug-ovanju “step by step”, možemo da naglasimo Chrom DevTools-u koje fajlove da ne proverava, jer verovatno greška nije tamo već u našim fajovima. Fajlovi koje treba ubaciti u blackbox su obično to third part library kao što je jQuery… Kada se neki fajl stavi u black box, onda se pri “stepping into/out/over” debuger neće zaustavljati na tim fajlovima.

I način

Potrebno je otvoriti Chrom DevTools settings (F1) i izabrati tab Backboxing nakon čega treba napisati ime fajla ili napraviti odgovarajući Regex patern.

Primer za često korišćene paterne je:

• /jquery\.js$
• \.min\.js$ — for all minified sources
• node_modules and bower_components — for dependencies
• ~ — home for dependencies in Webpack bundle
• bundle.js — it’s a bundle itself (we use sourcemaps, don’t we?)
• \(webpack\)-hot-middleware — HMR

II način

Dok smo u debuger-u desni klik na skriptu prikazanu u okviru “Call Stack”, nakon čega izaberemo “blackbox script”

Definisanje break point-a

Postoje više načina za postavljanje breakpoint-a:

1) Breakpoint na liniji JavaScript koda

Ovaj breakpoint se aktivira kada označimo mesto u kodu gde želimo da zaustavimo JS, tako što u okviru editora klikom na redni broj linije koda obeležimo gde da se zaustavi izvršavanje programa. Više o ovome pročitajte na pficijalnoj stranici

Uslovni brakpoint

Medjutim postoji opcija da se izvrši “uslovni breakpoint” koji zavisi od zadatog uslova. Desnim klikom na break point se otvara prozor gde možemo da izaberemo opciju “edit breakpoint”. Nakon čega se prikazuje polje za unos odredjenog uslova. Breakpoint će se aktivirati samo ako je uslov zadovoljen. Više o uslovnomom brakpointu pročitajte na oficijanoj stranici

2) Breakpoint na elementu DOM-a

Breakpoint možemo dodati obeležavajući HTML kod. Da bi mogao da zaustavi izvršavanje programa taj deo HTML koda treba da je povezan sa JavaScript kodom (obično je to neki dinamički generisan element). Ovaj breakpoint se aktivira kada dodje do promene na označenom HTML elemenatu (pa čak i kod njegove dece).

Na sam elemenat uradimo desni click, nakon čega izaberemo opciju Break on…, pa onda neku od podopcija. (Pogledaj sliku) Opcija “subtree modification” prati promene nad decom tog elementa. (changes to child elements). Ukoliko se izabere opcija “attributes Modifications” onda se prate promene na atributima tog elementa. Dok pri izboru opcije “node removal” se prati trenutak kada dolazi do uklanjanja označenog elementa.
Kada dodje do promene na tom HTML kodu, izvršavanje javascript-a se zaustavlja i otvara se JS fajl odgovoran za tu promenu, sa obeleženim mestom u kodu zaslužnim za tu promenu. Više o ovome možete pogledati ovde

3) Breakpoint pri XHR zahtevu

Postoji mogućnost da napravimo brakpoint koji će se aktivirati pri svakom ajax zahtevu. Za aktiviranje ovakvih breakpoint-a je potrebno da u sekciji “XHR breakpoints” ne definišemo uslov, nakon čega će se pojaviti opcija “Any XHR”.
Takodje može da se filtriraju brakpoint-i, ako definišemo odredjeni string patern za specifičnu XHR url adresu. Više o ovome pročitajte na oficijelnoj stranici

5) Breakpoint pri exception

Ovaj brekpoint se aktivira na liniji koda koji je izbacio exeption. Više o ovome pročitajte na oficijelnoj stranici

Elements TAB

Shortcuts

Event listeners za debagovanje dogadjaja

U okviru Elements Panel-a, možete da pregledate dogadjaje na nekom elementu, jednostavnim izborom tab elementa “Event listeners”, dok klikom na link možete da vidite i samu handler funkciju.
Klikom na “remove”, možemo da privremeno uklonimo registrovani event handler, što je korisno za brzo proveravanje da li je event handler uzrok neočekivane greške.
Ako vaš kod koristi i neku biblioteku kao što je jQuery, DevTools može da sakrije event handlere biblioteke a da prikaže samo naše (ovo nije uvek izvodljivo). Ovo se dobija tako što se selektuje polje za potvrdu “Framework listeners”.

Filtriranje CSS svojstava

Dok se nalazimo u “Styles” sekciji, mozemo da brzo pretražujemo CSS svojstva. Jednostavnim upisom naziva svojstva unutra input-a za filter na vrhu sekcije (pogledaj sliku). Odmah po unosu filtera se fitrirana svojstva istaknu, aktivana malo jačnom bojom.

Console TAB

Shortcuts

Console loging levels

Izbor sadržaja koji želimo da vidimo u konzoli se vrši u padajućem meniju loging levels. Ovaj padajući meni se nalazi na vrhu konzole sa desne strane filtera. Naručitu pažnju privlači opcija Verbose, koja je “najšira” opcija i prikazuje čak i tekstualni opis odredjenih problema.

Filtriranje izveštaja konzole

Ukoliko se u konzoli javljaju greške ili upozorenja od “third party” izvora na koje ne možete da utičete pa vas zbog toga i ne interesuju izveštaji o njima, možete da ih filtirate. Izbor opcije za fitriranje se dobija desnim klikom na izveštaj u konzoli. Nakon toga se dobija sekcija gde se pojavljuje opcija za filter izveštaja na koji smo kliknuli.
U koliko posle nekog vremena ipak želimo da vidimo sve izveštaje, dovoljno je da se ponovo izabere desnim klikom sekcija za filter, nakon čeka je potrebno izabrati “unhide all”.

Štampanje u konzoli

consoloe.log()

Najčešći način za štampanje bez nekog formatiranja:

console.table()

Primer

Ova metoda štampa pregledno objekat sa svim svojstvima:

Medjutim ukoliko objekat ima puno svojstava tabela može da bude nepregledna, tada je dobro izabrati kolone koje nas interesuju. Izbor svojstava koje želimo da prikažemo se definiše kroz drugi argument:

console.dir()

Štampa željeni objekat u stilu direktorijuma:

console.trace()

Console.trace() izraz se stavlja unutar koda, a u konzoli ispisuje ceo call Stack koji je pozvao taj kod.

Primer

U ovome primeru je stavljena funkcija console.trace() u okviru funkcije sumFunction(), tako da će u konzoli ispisati creo call stack koji pozvao funkciju sumFunction():

U konzoli se ispisuju funkcije prema obnutom redu pozivanja, a pored svake funkcije je link do nje:

console.error()

Štampa poruku isto kao console.log(), stim što je formatiran kao error

console.assert()

Funkcija koja izbacuje grešku ako se ne zadovolji odredjeni uslov:

console.time()

Ova funkcija se koristi za merenje vremena izvršavanja nekog dela koda. Potrebno je pre početka koda dodati:

cosnole.time(‘nekiNazivTajmera’)

nakon ovoga sledi kod kome merimo vreme izvršavanja, a posle njega:

console.timeEnd(‘nekiNazivTajmera’)

Monitoring dogadjaja iz console

monitorEvents()

Metoda monitorEvents() daje podatke o elementu koji je targetiran sa event-om.

Primer

Ili čak:

Za prekid monitoringa koristimo naredbu:

Monitor funkcije

Ako želimo da pratimo pozivanje odredjene funkcije koristimo metodu monitor(nazivFunkcije). Ova metoda nam ispisuje u konzoli svaki put kada je pozvana funkcija i koji argumenti su joj prosledjeni.
Npr.
function nazivFunkcije called with arguments: [object MouseEvent]  // funkcija je event handler

Za prekid monitoringa koristimo naredbu:

Source TAB

Shortcuts

Ovaj TAB se sastoji od tri sekcije: Source/Snippets section, Editor section i Debuging section.

a) Source – “Snippets section”

Add local source files to workspace

“Add local source files to workspace” ustvari znači da je omogućen direktan pristup lokalnim fajlovima iz samog browser-a. Povezivanje je moguće za JS i stylesheet fajlove, dok za DOM tj. HTML fajl nije primenjiv. Da bi povezali fajlove iz “sources” tab-a unutar Chrom DevTools-a sa lokalnim fajlovima i tako sačuvali promene na JS fajlovima i nakon ponovnog učitavanja browser-a, potrebno je uraditi sledeća dva koraka:

1. Add Folder to Workspace

   

   Sledeći postupak ukazuje browseru gde se nalazi na naš lokalni folder sa fajlovima.

   1. Right-click in the left-side panel.
   2. Select Add Folder to Workspace. Alternativa ovome postupku je da se iz explorer-a prevuče (drag and drop) folder u inspektor
   3. Choose location of local folder that you want to map.
   4. Click Allow to give Chrome access to the folder.

2. Map to File System Resource

   
   Drugi deo postupka je vezan za fajlove pojedinjačno. Koristeći sledeći postupak povezujemo odredjeni fajl sa browser-om. Nakom toga svi fajlovi mogu da se modifikuju iz source panela, pa čak i css fajlovi direktno iz Elements/Styles panela.

   1. Right-click or Control+click on a file in the Sources left-side panel.
   2. Choose Map to File System Resource.
   3. Select the local file in the persistent workspace.
   4. Reload the page in Chrome.

   NAPOMENA:
   Fajlovi sa .scss ekstenzijom se ne mogu editovati iz Elements/Styles panela već samo css!

Da bi se sačuvale promene napravljene u browseru u okviru Sources panela potrebno je nakon desnog klika izabrati opciju Save.
Pored ove funkcionalnosti iz workspace može da se kreiraju novi fajlovi, brišu stari kao i da se prave backup kopije fajlova direktno na hard disku.

NAPOMENA:
Ovaj ceo postupak će omogućiti da se iz browsera menjaju lokalni fajlovi na disku, stoga ukoliko želite da sačuvate postojeće stanje NAPRAVITE KOPIJU FAJLA PRE PROMENA!

Snippet u browseru

U sklopu Chrome DevTools može da se sačuva deo koda i nakon refresh-ovanja stranice. Sačuvani kod kao snippets može da se samostalno pokrene dok smo na bilo kojoj stranici.

Online snippets baza

Bazu korisnih snippets-a možete pronaći na https://bgrins.github.io/devtools-snippets/. Ukoliko sačuvamo neki od pripremljenih snippeta, kasnije možemo da ih pokrenemo na bilo kojoj stranici. Jedan od korisnih snippeta je vezan za pregled perfomansi web aplikacije:

b) Source – “Editor section”

Postavljanje kursora na više mesta odjednom sa CTRL + levi klik mišem. Višestruko biranje istog sadržaja sa CTRL + D. Odlazak na zatvarajući ili otvarajući tag sa CTRL + M.

c) Source – “Debuging section”

a) Watch expression (Praćenje vrednosti nekog izraza)

b) Call Stack

Call Stack je sekcija u kojoj je prikazano kako se došlo do trenutno zaustavljenog reda pri debug-ovanju, koje su sve funkcije bile pozvane do tada. Ukoliko očekujemo da pratimo i asihrone pozive potrebno je da čekiramo input Async. Desnim klikom na Call Stack sekciji otvaramo dropdown na kome možemo da izaberemo:

• Restart Frame – restartovanje koda i svih vrednosti tik ispred brakpoint-a
• Copy Stack trace – kopiramo ceo Stack koji je u tom trenutku
• Blackbox script – drugi način da naglasimo Chrom DevTools-u koje fajlove da ne proverava

c) Scope promenjivih

Dok je program pauziran na nekoj liniji koda, u delu “Scope” se mogu pregledati koje su trenutne promenjive u lokalnom, globalnom i closure opsegu (domenu).

d) Breakpoints

U ovoj sekciji su prikazani svi breakpoint-i .

e) XHR Breakpoints

U ovome delu se se definišu ali i pregledaju postojeći brakpoint-i koji su vezani za AJAX zahteve. Ukoliko postoji AJAX zahtev sa zadatom url adresom, browser će zaustaviti izvršavanje programa kada se pošalje zahtev. Možemo na[praviti breakpoint-e na svaki AJAX zahtev ukoliko napravimo novi breakpoint ali polje gde se unosi url adresa ostavimo prazno.

d) DOM Breakpoints

Ova sekcija prikazuje sve brakpoint-e definisane na DOM-u.

f) Event Listener brakpoint

U ovome delu su izlistani svi mogući dogadjaji, potrebno je samo da označimo na koju vrstu dogadjaja želimo da napravimo brakpoint. Ovaj brakpoint se aktivira na delu koda gde se nalazi event listener koji treba se izvrši odmah po dogadjaju.

Network Tab

Network tab se bavi vremenom i redosledom učitavanja svih fajlova koji dolaze sa mreže. Nakon učitavanja stranice ispisuju se svi fajlovi koji su stigili, kao i detalji o njima: headers, vreme učitavanja. Možemo da vidimo tzv. “waterfall” prikaz, kao i capture filmstrip u toku vremena. Učučivanjem neke od opcija za filtriranje možemo jednostavno da izaberemeo koji nas fajl interesuje. Postoji mogućnost imitacije nekog drugo tipa mreže (npr.3G, 2G…) i rezultata koji bi se dobili da su te mreže izabrane.

Tips & Tricks

Editovanje sadržaja iz browsera

Dodavanjem atributa contenteditable="true" bilo kom HTML elementu, taj elemenat postaje editabilan iz samog browser-a. Da bi ste “na brzaka” isprobali sadržaj možemo dodati atribut kroz elements tab ili čak koroz konzolu:

document.body.contenteditable = true