Kada otvorimo web sajt u Google Chrome-u, većina ljudi vidi samo ono što se nalazi na ekranu. Međutim, iza tog izgleda postoji HTML, CSS, JavaScript, slike, fontovi i još mnogo toga.
Ako se bavite web dizajnom, postoji alat koji vam omogućava da zavirite iza svega toga.
To je Chrome DevTools.
DevTools je ugrađen direktno u Google Chrome i omogućava da pregledamo, testiramo i analiziramo gotovo svaki deo web stranice.
Kako otvoriti DevTools?
Najjednostavniji način je da kliknete desnim tasterom miša na neki element stranice i izaberete Inspect.
Možete koristiti i prečicu:
F12 ili Ctrl + Shift + I na Windows-u.
Odmah ćete dobiti panel sa velikim brojem opcija.
Na prvi pogled može delovati komplikovano, ali kada naučite nekoliko osnovnih funkcija, DevTools postaje jedan od najkorisnijih alata za web rad.
Elements – pogledajte HTML i CSS
Jedna od najvažnijih sekcija je Elements.
Ovde možete videti HTML strukturu stranice i CSS pravila koja se primenjuju na određene elemente.
Na primer, ako želite da proverite zašto je neko dugme preveliko, možete ga pronaći u Elements panelu i odmah videti koje CSS osobine utiču na njegov izgled.
Još zanimljivija stvar je što možete privremeno menjati CSS direktno u browseru.
Promenite boju, veličinu fonta, marginu, padding ili bilo koju drugu osobinu i odmah ćete videti rezultat.
Važno je zapamtiti da te izmene nisu trajne.
Kada osvežite stranicu, vraćaju se originalne vrednosti.
Ali upravo zato je ova funkcija odlična za testiranje ideja.
Responsive dizajn
Ako radite web dizajn, verovatno već znate koliko je važno da sajt izgleda dobro na različitim ekranima.
DevTools ima odličan alat za testiranje responsive dizajna.
Možete simulirati različite veličine ekrana i proveriti kako se stranica ponaša na telefonu, tabletu ili desktop računaru.
Možete menjati širinu prozora i brzo proveriti da li se elementi pravilno pomeraju, da li tekst ostaje čitljiv i da li navigacija funkcioniše kako treba.
To je mnogo praktičnije nego da za svaku malu izmenu fizički uzimate drugi uređaj.
Console – gde JavaScript govori
Console je posebno važan ako radite sa JavaScript-om.
Ako postoji greška u JavaScript kodu, browser je često može prikazati upravo ovde.
Na primer, možete videti poruku koja ukazuje na problem sa određenom linijom koda.
Console nije samo mesto za greške. Može se koristiti i za testiranje JavaScript naredbi i proveru vrednosti tokom razvoja.
Čak i ako se prvenstveno bavite dizajnom, osnovno razumevanje Console-a može biti veoma korisno.
Network – šta se učitava?
Još jedan veoma koristan panel je Network.
On prikazuje šta browser učitava kada otvorite stranicu.
Možete videti:
HTML fajlove, CSS fajlove, JavaScript, slike, fontove, API zahteve, vreme učitavanja pojedinačnih resursa
Ako je sajt spor, Network panel može pomoći da pronađete šta usporava učitavanje.
Možda je problem velika slika, nepotreban JavaScript ili neki resurs koji se učitava predugo.
Lighthouse – brza analiza sajta
DevTools sadrži i Lighthouse, alat koji može analizirati web stranicu iz nekoliko različitih uglova.
Možete dobiti izveštaje koji se odnose na:
Performance – performanse stranice
Accessibility – pristupačnost
Best Practices – dobre razvojne prakse
SEO – osnovne SEO provere
To ne znači da Lighthouse predstavlja kompletnu SEO analizu, ali može biti veoma koristan kao početna kontrolna lista.
Zašto je DevTools važan dizajneru?
Možda na prvi pogled deluje kao alat namenjen samo developerima.
Ali web dizajneru omogućava da proveri kako se njegov dizajn ponaša u stvarnom browseru.
Možete proveriti:
razmak između elemenata, veličine fontova, responsive ponašanje, boje, dimenzije slika, učitavanje resursa, osnovne SEO probleme, accessibility probleme
Drugim rečima, DevTools povezuje dizajn sa stvarnim web sajtom.
Alat koji vredi naučiti
Chrome DevTools možda izgleda zastrašujuće kada ga prvi put otvorite.
Ne morate odmah znati svaku njegovu funkciju.
Za početak je dovoljno naučiti Elements, Console, Network, Device Toolbar i Lighthouse.
Kasnije možete istraživati naprednije mogućnosti.
Ako se bavite web dizajnom, poznavanje DevTools-a će vam pomoći da ne gledate web sajt samo kao vizuelni dizajn, već kao strukturu HTML-a, CSS-a, JavaScript-a i resursa koji zajedno čine jednu web stranicu.
A kada jednom počnete da koristite DevTools, vrlo brzo ćete se zapitati kako ste uopšte radili web bez njega.
Desni klik → Inspect → dobrodošli iza scene weba.