Chrome Developer Tools, prvi dio

May 15, 2018

Developers-Lab

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 prvom dijelu biće opisana tri osnovna taba i to Elements, Console i Source.

Neophodno predznanje

Poznavanje osnova Developer Tools alata.

Uvod

Chrome Developer Tools je alat koji developeri, posebni 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? U ovom postu pomenućemo i neke mogućnosti koje nudi ovaj alat, a niste imali prilike da ih do sada iskoristite.

Elements Tab

Elements tab je onaj dio koji najčešće koristite kada mijenjate HTML i CSS , često za svrhu testiranja (kako bi izgledao ovaj blok ako bi mu promijenio boju).

Učesnici predavanja vidjeli su da je, osim gore navedenog, u ovom tabu moguće je odraditi i sledeće:

  • Kreiranje vaše palete boja koju možete kasnije da iskoristite za bilo koju web aplikaciju koju razvijate (odaberete element, kliknete na neku boju i onda kliknete na drugu ikonicu strelica gore/dolje, nakon čega će vam se otvoriti Color Palettes i u Custom dijelu dodajete vaš pattern za boje)
  • Razne opcije kada odaberete HTML element i pritisnete desni klik, tada dobijate mogućnost da pozovete operacije kao što su Hide element (isto kao da ste dodali CSS stil visibility:hidden), Force state (da primijeniti neko stanje na element npr. hover ili visited, korisno kada želite da vidite kako taj element izgleda kada pređe u neko drugo stanje), Break on ili DOM breakpoint (korisno kada radite debug elementa iz DOMa, npr. koji dio JS koda izaziva da element konstantno mijenja boju, koristi se najčešće attribute modifications ili subtree modifications), Scroll into view (scroll stranice do elementa nad kojim pozivate ovu operaciju), kao i niz drugih akcija
  • Computed styles, gdje se prikazuju samo oni CSS stilovi koji se primjenjuju nad elementom kao i Box Model
  • Event Listeners, gdje možete provjeriti koji eventi su zakačeni za pojedini element
  • Trik: Projverite šta se dešava dok držite Shift i klinete (lijevi klik) na boju, kada ste u Styles dijelu, tj. u modu kada mijenjate CSS kroz browser

Console Tab

Jedan od najčešće korišćenih tabova. Najčešće ga koristite kad pratite greške, radite debug proces, i slično.

Jedna od interesantnih stvari koju možda do sada niste iskoristili je Preserve log opcija. Ako štriklirate ovu opciju, kada pređete na drugu stranicu vaše web aplikacije log koji se do sada ispisivao u konzoli neće biti izbrisan, tako da ćete moći da pratite sve akcije koje su obavljene i na prethodnim stranicama. Znam da može biti korisno, obradovao sam se kad sam našao ovu opciju 🙂

A da li ste znali da u konzoli možete koristiti $ jQuery selektor? Probajte da se uvjerite i sami u to.

Sources Tab

Koristili ste ga u situacijama kada kroz pretraživač radite debug JSa, ili prosto gledate da li vam se i dalje učitava stari JS fajl, nije se cache obrisao, pa budete sretni ako je baš to problem.

Da li ste znali da CSS koji mijenjate dok ste u Styles (Elements tab) možete direktno da čuvate lokalno? Da, to je moguće, tako što umjesto Page, odabere Filesystem. Nakon toga, samo kliknete na Add folder to workspace, dodate folder vašeg projekta koji je sada direktno dio pretraživača. Probajte sada da mijenjate CSS i provjerite šta se dešava kada osvježite stranicu. A vaš lokalni kod, provjerite šta se dešava sa njim.

Debug kroz pretraživač je moguć. Kod Chrome pretraživača to se radi tako što otvorite sources tab i odaberete fajl gdje želite da dodate breakpoint. Takođe, ako u kodu dodate debugger liniju koda, izvršavanje koda će se zaustaviti na toj liniji.  Sada pogledajte šta pojedini djelovi debug moda znače:

  • Watch za praćenje vrijednosti varijabli, mijenja se tokom izvršavanja koda, postepeno
  • Callstack, tu se vide funkcije koje se stavljaju na stack, na funkciju koja se trenutno izvršava nalazi se strelica koju je lako uočiti
  • Scope, u kom scope-u se nalazi dio koda koji se trenutno izvršava
  • Breakpoints, možete da ih deaktivirate, dodajete nove, i ostalo
  • Stepping,  koračanje kroz debug proceduru, imate više modova (resume script execution, step over next function call, step into next function call, step out of current function, i step)
  • Blackboxing, kada ne želimo da radimo debugging unutar 3rd party paketa
    • Može pojedinačno ili kroz settings, patterni
  • Conditional breakpoint, samo u određenim situacijama da se aktivira debugger(desni klik uz liniju koju debagujete i odabere Add conditional breakpoint…)
  • XHR/Fetch debugging response od servera, obradi zahtjeve koji sadže specifične djelove linka

Nastavak

U drugom i finalnom dijelu blog posta o Chrome Developer Tools biće opisani Network, Performance, Audits i Memory tabovu.

Do tada pozdrav. Želim vam svima što manje bugova 🙂