Za koga je namijenjen ovaj blog post

Ovaj blog post namijenjen je za one koji se bave programiranjem i često koriste alat koji posjeduje Chrome web pretraživač, a to je Chrome Developer Tools. U ovom dijelu biće opisani sledeći elemeti i to Networking, Audits, Performance, Memory i Profiling.

Neophodno predznanje

Poznavanje osnova Developer Tools alata.

Uvod

Chrome Developer Tools je alat koji developeri, posebno oni koji se bave frontend-om, tj. interfejsom same web aplikacije, svakodnevno koriste. Pretpostavljam da velika većina čitalaca već zna osnovne funkcionalnosti ovog alata. Sigurno znate šta je Console tab, znate da mijenjate HTML i CSS kada nešto testirate, da pratite Network tab i slično.

Ali da li ste radili do sada nešto van toga? Ukoliko to do sada niste odradili, predlažem da prvo pročitat prvi dio našeg blog posta.

Networking

Jedan od najbitnijih elemenata Developer Tools. Tu ste sigurno bar jednom kliknuli ako ste provjeravali zašto se vaš sajt sporo učitava. Vrlo vjerovatno da ste kroz ovaj tab provjeravali odgovor sa servera ili zahtjev koji šaljete ka serveru. Ali da li ste išli dalje od toga?

Pogledamo samo redom šta koji dio predstavlja:

• Dio 1 sadrži dvije bitne komponente
  • U prvoj komponenti možete da simulirate način učitavanja sadržaja za stranicu, npr. ako stavite check na opciju Disable cache vidjećete kako se stranica učitava kada je cache onemogućen. Primijetićete da će učitavanje stranice u tom slučaju biti sporije. To obično bude prvo učitavanje vaše stranice, tj. kada korisnik prvi put uđe na vašu stranicu. Već sledeći put učitavanje obično bude brže. Takođe, možete da promijenite protok interneta, kliknete na Online, i možete da vidite razne opcije za setovanje protoka interneta koji će da se koristi za učitavanje stranice.
  • U drugoj komponenti možete da birate koje fajlove želite da vidite u listi koja čini Dio 3. U dijelu Filter možete da unesete naziv fajla koji tražite ili čak regularni izraz (npr. želim sve fajlove sa ekstenzijom png). Sa desne strane klikom na neku/e od opciju (XHR, Img, CSS, itd) možete da odaberete koji tip fajlova želite da prikažete u dijelu 3.
• Dio 2 sadži dijagram koji prikazuje kako se resursi na stranici učitavaju, u kom redosledu, koliko traje učitavanje, i ostalo. Horizontala osa prikazuje vrijeme u ms koje se odnosi na učitavanje resursa
• Dio 3 sadrži sve resurse koji su potrebni za prikaz stranice. U dijelu 1 opisano je kako možete da filtirate prikaz tih resursa. Resursi mogu da budu media fajlovi, html stranice, JSON response, itd.
• Dio 4 sadrži vrijeme potrebno da se resurs prikaže na stranici. Kada kliknete na jedan od resursa pomenutih u dijelu 3, sa desne strane ćete vidjeti detalje o tom resursu. Po default-u prikazaće vam se tab Headers. U ovom blog postu ovaj tab neće biti analiziran jer se pretpostavlja da čitaoci ovog blog dobro znaju šta se tu nalazi. Takođe, nećemo analizirati ni Preview ni Response (oni sadrži samo odgovore sa servera). Tab koji na koji ćemo se ostvrnuti: Timing. Ako pogledate pažljivo sliku iznad, vidjećete da je ukupno vrijeme učitavanje selektovanog resursa oko 830ms. Šta se sve ubraja u to vrijeme? Kao što vidite na ukupno vrijeme učitavanja utiče više stavki, a svaka od njih je definisana sa nekom bojom. Šta ako vam kažem da svaka od tih boja nešto znači? Pogledajte sledeću sliku (preuzeto sa link)
• 
• Dio 5 sadrži informacije o broju resursa koji su učitani, koliko je vaša aplikacija teška (koliko memorije uzima), koliko vremena je bilo potrebno da se učita sav sadržaj na stranici (napomena da je ovo inicijalno učitavanje, jer smo ugasili cache). Da li vam je jasno da što imate veći broj requestova to će se česće dešavati da resurs upada u Queuing (navedeno je gore da pretraživač, ovo važi za Chrome, prihvata do 6 istovremenih TCP konekcija, što znači da će sve ostale da se smještaju u queue) što dovodi do sporijeg očitavanje stranice. Eto jedan od razloga zašto se radi JS bundling, ili CSS bundling.

Audits

Da li ste znali da je u jednom momentu Google procijenio da je imao 20% manji saobraćaj, tj. manji broj pretraga, zato što se učitavanje stranice smanjilo za samo pola sekunde? Kako da se to vama ne desi, i kako možete da kontrolišete provjerite da li je vaš sajt dovoljno brz, to ćete vidjeti u ovom i narednim sekcijama ovog posta.

Nakon što odaberete opcije koje vas zanimaju i kliknete na Run audits nakon par sekundi dobićete kompletan izvještaj o detaljima za stranicu koju testirate. Ovo možete pokrenuti na bilo kojoj stranici, i vidjeti prednosti i mane same stranice. Na internetu možete naći razne varijacije sajtova koji vam omogućavaju da testirate vaš sajt, a jedna od takvih je https://www.webpagetest.org/. Problemi koji se obično javljaju: na serveru nije uplaljen gzip, nije aktivirana kompresija slika, nije dobro podešen cache, itd. Uvijek je dobro da održavate vašu stranicu tako da ima što bolju ocjenu, ali isto tako često i nije moguće dovesti sve na preko 95%. Ako testirate i sami Facebook vidjećete da njihove performanse nisu ni približno dobre u odnosu na ono što možda mislite.

Performance

Da li znate šta se dešava sa JS kodom i šta browser radi sa njim? Na sledećoj slici možete vidjeti dosta grub slikovit prikaz šta browser radi sa JS kodom

Kako možemo da izračunate koliko traje izvršavanje nekog dijela koda?


performance.mark('start');
// Do some work...
performance.mark('end');
performance.measure('Our Measurement', 'start', 'end');
performance.getEntriesByType('measure');

Kako ovo nije blog post o JSu, nećemo se fokusirati na ovaj dio koda, samo je važno navesti da pomoću ovog koda možete lako da provjerite performanse vaše funkcije.

Sada pogledajmo kako nam može pomoći Performace tab pri detekciji problema sa performansama stranice. Ukoliko otvorite Performace tab, vidjećete bijeli screen sa uptstvom da kliknete mali kružić da započnete snimanje performansi sajta. Nakon što to i odradite (ne snimajte duže od 3 sekunde), pogledajmo šta se dobija na sledećoj slici (mi smo testirali našu stranicu).

U ovom dijelu možete pratiti ponašanje vašeg sajta, kako se puni memorija, koji JS kod pravi probleme (usporava učitavanje stranice). Ključna uloga ovog taba je da detektujete koji dio koda izaziva problem (na slici označeno sa red flag). Takođe, kao što vidite sa slike, možete vremenski da ispratite kako sajt izgleda u određenim vremenskim intervalima. Ukoliko želite da nađete još detalja, pročitajte zvaničnu Google dokumentaciju: link

Memory i Profiling

Ukoliko želite da vidite koji dio koda vam puni memoriju, onda koristite Memory tab i profiling.

Kao i za Performance tab i ovdje je prvo potrebno da snimite memoriju (mali kružić). Poželjno je da snimanje traje oko 15-20 sekundi da biste dobili pravu sliku o memoriji. U ovom tabu možete lako da detektujete koji dio koda vam puni memoriju (npr. stavili ste da punite niz, a zaboravili ste da zaustavite dodavanje elemenata, memorija se u tom slučaju konstatno puni). Razlika između Shallow i Retained size je u tom što Shallow size predstavlja memoriju koja će biti oslobođenja ukoliko obrišete samo tu varijablu (gdje se čuvaju neki podaci), a Retained size se odnosi na memoriju koja može biti oslobođenja ukoliko uklonite varijablu koja se veže za Shallow size i sve varijable koje samo zavise od nje. Uvijek je Retained size > Shallow size. Ukoliko želite da saznate više o ovom tabu, pričitajte oficijalni Google članak: link.

Zaključak

Kao što ste vidjeli, Chrome Develop Tools je jedan od veoma moćnih alatki koja svakom web developeru može drastično da pomogne u svakodnevnim taskovima. Hvala vam ukoliko ste stigli do ove rečenice 🙂

Srećno programiranje, želim vam što manje bugova i što više interesantnih projekata.