Chrome DevTools predstavljaju ključni razlog zbog kojeg mnogi programeri odbijaju da koriste bilo koji drugi internet pretraživač.
Međutim, većina nas koristi samo osnovne funkcionalnosti, ostajući nesvesni brojnih izvanrednih mogućnosti koje se uvode neprimetno.
Hajde da zajedno istražimo neke od tih skrivenih bisera!
Svako ima svoj omiljeni operativni sistem, hardversku platformu, tip uređaja, veličinu ekrana itd. Ipak, jedna stvar je svima zajednička – koriste Chrome pretraživač i to isključivo Chrome! Smatram da se sa sigurnošću može reći da su ratovi pretraživača završeni i da je Chrome odneo ubedljivu pobedu.
Korisnici Windows-a koriste podrazumevani pretraživač samo kako bi preuzeli Chrome, a nakon toga koriste isključivo Chrome, ignorišući sve „preporuke“ Windows-a. Slična situacija je i sa Apple uređajima (posebno MacBook-ovima i uređajima sa većim ekranom), gde korisnici i programeri izbegavaju Safari, uprkos brojnim Apple-ovim argumentima i taktikama za prelazak.
A ako uređaj ne koristi Chrome, velika je verovatnoća da koristi spin-off kompatibilan sa Chrome-om, kao što je na primer Brave ili Vivaldi. Da, znam, tehnički ovi pretraživači nisu zasnovani na Chrome-u, ali to je već druga priča. Prosečan korisnik možda koristi ove druge pretraživače iz ideoloških ili posebnih razloga, ali kada su programeri u pitanju, nema drugog pretraživača u opticaju osim Chrome-a.
Čak se i činjenica da je Chrome pravi „proždirač“ memorije ignoriše. Razlog je jednostavan: Chrome DevTools.
Izvor slike: Zvanična dokumentacija za Chrome DevTools
Ako čitate ovaj članak, sigurno je pretpostaviti da ste ili napredni korisnik, stručnjak, web programer ili nešto slično. Stoga, nikome od nas nije potrebno uvodno objašnjenje o DevTools, kako ga otvoriti, koje su mu osnovne funkcije itd.
Umesto toga, bez daljeg odlaganja, hajde da odmah zaronimo u neke od manje poznatih, ali izuzetno korisnih funkcija Chrome DevTools-a.
Režim Dizajna
Jedan od čestih zadataka programera je da pregledaju element na stranici, a zatim modifikuju njegov HTML kako bi vizuelno proverili ili testirali efekat promene.
Međutim, rad sa HTML-om direktno u DevTools-u nije najprijatnije iskustvo – probijanje kroz gvožđe oznaka, naprezanje očiju u pokušaju da se pronađe odgovarajuća početna/zatvarajuća zagrada i borba sa besmislenom količinom razmaka tokom uređivanja teksta (razmaka koji očigledno nedostaju u dokumentu koji vidite), samo su neki od problema sa kojima se možete susresti. Još je teže ako ste dizajner i ne želite da prolazite kroz ovaj haos.
Evo snimka ekrana sa jedne od stranica ove web stranice (wdzwdz):
Duboko ugnježđen HTML i tajanstvene, zbunjujuće CSS klase su tipične za bilo koju netrivijalnu web lokaciju danas, gde je iskustvo sa DevTools-om, u najmanju ruku, suboptimalno. 🤭
Ali postoji funkcija DevTools-a koja se zove Režim Dizajna, koja u mnogim slučajevima može znatno smanjiti muku. Korišćenjem Režima Dizajna (to nije zvanično ime, već se tako naziva zbog načina na koji se aktivira i onoga što radi – ne brinite, uskoro ćemo videti!), promene na stranici mogu da se vrše vizuelno i uživo, baš kao u uređivaču tabela ili teksta! Jedini „problem“ je što ova funkcija nije podrazumevano uključena, a njeno aktiviranje je malo komplikovano, posebno za one koji nisu programeri.
U svakom slučaju, prilično je jednostavno; sve što treba da uradite je da pratite sledeća uputstva. U zavisnosti od toga gde se nalazite na krivulji sofisticiranosti korisnika, ovo može biti smešno lako ili umereno teško. Evo šta treba da uradite:
- Proverite da li je web stranica koju želite da izmenite učitana i da je trenutno gledate (odnosno, ta kartica je aktivna).
- Otvorite panel DevTools na način na koji to obično radite (prečicom na tastaturi, klikovima mišem, kako god). Ja volim da koristim prečice na tastaturi, a na Mac-u, Opt + Cmd + I radi posao.
- Sada, kada su DevTools otvorene, idite na karticu pod nazivom „Konzola“. Neki od vas možda kolutaju očima zbog toga koliko sve ovo izgleda glupo i očigledno, ali hajde da se setimo i (stotine?) hiljada ljudi koji se muče dok rade sa konzolom pretraživača i JavaScript-om (iz bilo kog razloga).
- Kliknite na prvi red pored kursora, koji će zatim prikazati upit za unos teksta, i sada tamo možete da unesete JavaScript kod (pogledajte snimak ekrana malo niže).
- Sada treba da unesemo JavaScript kod. Ne brinite, jer je ono što treba da napišete/unesete veoma kratko i jednostavno: document.designMode = „on“. Takođe možete da kopirate i nalepite kod sa ove stranice (ako to uradite, proverite da se formatiranje ne kopira – potreban nam je samo običan tekst) ili ako ste samouvereni, sami ga otkucajte.
- Pritisnite Enter/Return.
„To je to??!“
Da, to je sve!
Sada možete slobodno da unosite izmene na stranicu kao da je u pitanju dokument. Pogledajte ovaj kratak video snimak u kojem uživo uređujem Spotify web lokaciju koristeći Režim Dizajna:
Funkcija Režim Dizajna, koliko god uzbudljiva bila, nije čarobno rešenje; ne možete, na primer, lako kopirati i nalepiti dugmad, promeniti njihov izgled i tako dalje. Stvarni broj stvari koje može da uradi u poređenju sa „uređivačem web stranica iz snova“ je veoma mali; međutim, rešava slučajeve upotrebe gde sadržaj treba da se menja vizuelno i u hodu.
Bez obzira na to, nije preterano tvrditi da ljudi iz Chrome-a testiraju koliko je ova funkcija dobro prihvaćena; ako naiđe na dobar prijem i jaku potrebu za njenom upotrebom, razumno je očekivati da će uskoro uslediti moćnije mogućnosti za uređivanje! 🤞🏻🤞🏻
Simulacija Mrežnih Uslova
Kartica „Mreža“ u Chrome DevTools-u je možda najviše korišćena (naravno, nemam podatke o tome, ali kao web programer, obično koristim karticu „Konzola“ možda 20-30% vremena, a karticu „Mreža“ ostatak vremena). Ona nam daje sve vrste informacija o zahtevima koji se šalju sa stranice, njihovom tipu, metapodacima/zaglavljima, statusu, toku preuzimanja resursa (slike, stilovi, itd.), vremenu učitavanja itd. Sa takvom neverovatnom korisnošću, ne čudi što je kartica „Mreža“ najčešće korišćena.
Pa ipak, lako je propustiti funkciju o kojoj ovde govorimo; možda niste primetili bezazlen padajući meni koji navodi očigledno: „Online“.
Ako kliknete na to, videćete padajući meni sa različitim opcijama koje vam omogućavaju da smanjite brzinu mreže: brza 3G, spora 3G, van mreže, itd. Iako mogu da postoje različiti slučajevi upotrebe ove opcije, najčešći je testiranje performansi web lokacije na sporim mrežama ili ponašanje web aplikacije kada ste van mreže (pod uslovom da su takve mogućnosti dodate).
Hajde da ovo testiramo u praksi. Postaviću mrežu na „Spora 3G“ i ponovo učitati istu stranicu sa prethodnog snimka ekrana. Pre nego što to uradim, primetite na ranijem snimku ekrana kako se na mojoj trenutnoj mrežnoj vezi (širokopojasna veza od 40 Mbps) većina resursa preuzima za manje od 100 milisekundi.
A sada je vreme da vidimo šta joj spora 3G radi.
Kakva razlika!
Imajte na umu da je vreme učitavanja resursa sada u rasponu od 5-10 sekundi. Takođe, sajt je završio učitavanje u potpunosti za 17,25 sekundi! Da, znam šta mislite, ali morate uzeti u obzir da će na sporoj 3G mreži bilo kojoj modernoj web lokaciji trebati nekoliko sekundi da se učita. To da li želite brzo učitavanje na sporim mrežama je druga stvar, mada, u suštini, to mora biti poslovna odluka u kojoj dobici opravdavaju uložen trud.
Na slici iznad, primetite i ikonu upozorenja na kartici „Mreža“. To je Chrome-ov način da vas podseti da ste napravili neku nestandardnu, upornu promenu i da, ako ne znate šta radite, možda bi trebalo da je poništite.
Interaktivni Birač Boja
Pregledanje DOM elemenata u DevTools-u je nešto što svi radimo skoro svakodnevno. Takođe smo navikli na odeljak sa CSS detaljima koji se prikazuje pored, i znamo da možemo da ga uredimo i odmah vidimo rezultate.
Jedna mala pogodnost skrivena među svim ovim je to da ako kliknete na svojstvo CSS boje, pojaviće se poznati interfejs birača boja!
Imajte na umu da ovo nije osnovni birač boja. Omogućava vam da kontrolišete transparentnost, menjate sisteme boja koji se koriste, birate boju direktno sa stranice i još mnogo toga.
Dakle, sledeći put kada budete eksperimentisali sa akcentnim bojama sajta, na primer, ne morate da nagađate ili pogađate pravu vrednost za nijansu koju imate na umu! Zapravo, mnogi ljudi vole da dizajniraju web stranice direktno u pretraživaču; za njih su ovakve funkcionalnosti pravi dar!
Praćenje Događaja na Elementima Stranice
Često se nađemo u situaciji u kojoj bismo želeli da znamo šta se dešava sa tim određenim elementom koji nas zanima. Ovo je posebno tačno kada koristite jQuery u kompleksnoj bazi koda – bilo vašoj ili tuđoj; rukovaoci događajima i logika su svuda rasprostranjeni, a praćenje grešaka može biti prava noćna mora.
Srećom, Chrome DevTools ima sjajnu funkciju upravo za to. On će posmatrati naznačeni element umesto vas i beležiti događaje u konzoli. Ali postoji mala začkoljica: ova funkcija ne dozvoljava izbor elemenata na osnovu imena CSS klasa. Dakle, jQuery način $(„email“) nije dostupan. 🙂
Ipak, hajde da vidimo kako se to radi. Počinjemo sa jednostavnom proverom elementa pomoću DevTools inspektora. Da, to je isti alat za inspekciju koji koristimo svakog dana.
Na snimku ekrana ispod, koristio sam alatku inspektora da bih istakao unos teksta. Pod „istaknuti“ ne mislim da je element na stranici obeležen (nije, kao što vidite); umesto toga, kursor inspektora je kliknut na unos teksta, a odgovarajući HTML kod u DevTools-u je istaknut.
Ovo cilja trenutno pregledani element za praćenje događaja, što element čini dostupnim kao posebna JavaScript promenljiva koja se zove $0. Zatim, pazeći da ne kliknem nemarno negde drugde u prozoru pretraživača (posebno deo HTML koda), kliknem na „Konzolu“ i dodelim osluškivač događaja za ovaj unos teksta. Za ovo mi je potreban samo jedan red koda: monitorEvents($0, ‘miš’). Deo „miš“ ovde govori Chrome-u da sam zainteresovan za praćenje samo događaja povezanih sa mišem.
Čim pritisnem Enter/Return, nadzor se aktivira, a ako sada pređem mišem preko ili kliknem na unos teksta, ti događaji se beleže u konzoli kao JavaScript objekti:
Kao što možete videti na snimku ekrana, snimljeno je nekoliko tipova događaja miša dok sam kliknuo na element, uneo svoje ime, a zatim pomerio miša (događaji kucanja, budući da su događaji na tastaturi, nisu zabeleženi). Sami događaji su JavaScript objekti, kao što je jasno na snimku ekrana; svaki objekat događaja sadrži veliku količinu informacija. Na primer, proširio sam objekat događaja „klik“ i broj svojstava nije mogao stati sve u jedan snimak ekrana!
Toplo vas ohrabrujem da odmah isprobate ovu funkciju jer će vam sigurno uštedeti mnogo glavobolje u vašim predstojećim projektima!
Izveštaji o Performansama Web Sajta
U današnje vreme, performanse web sajta predstavljaju odlučujući faktor za uspeh poslovanja/web sajta. Čak i malo poboljšanje performansi znači ogroman napredak u SEO-u, kao i zadovoljstvo korisnika. Ali kako da znate koji delovi vaše web stranice zahtevaju pažnju, a koji su već dobri?
Da li treba da angažujete tim stručnjaka i strpljivo čekate nekoliko dana?
Pa, postoje slučajevi u kojima to treba uraditi, ali na sreću, Chrome DevTools pokriva sve nas. U najnovijim verzijama Chrome-a (kraj 2020) naći ćete karticu „Lighthouse“ u DevTools-u. Pre nekoliko meseci se zvala „Audits“, i dovoljno je zbunjujuće da je to ime koje ćete naći u zvaničnoj dokumentaciji od trenutka pisanja. U svakom slučaju, poenta je da je Lighthouse nekada bio moderan web sajt za besplatnu proveru performansi web sajtova, ali ga je onda Google ukinuo (nisu dati razlozi). Srećom, ista moćna funkcionalnost se kasnije ponovo pojavila u DevTools-u.
Da biste generisali izveštaj o performansama, sve što treba da uradite je da pritisnete jedno dugme nakon što se stranica koja vas zanima učita:
Kao što možete videti na desnoj strani na snimku ekrana, postoji nekoliko opcija za kontrolu količine informacija koje želite (i, naravno, šta želite da testirate). Kada ste zadovoljni podešavanjima, pritisnite to veliko plavo dugme, sedite i opustite se. Nekoliko sekundi kasnije, imaćete koristan izveštaj koji izgleda otprilike ovako:
Brojevi koje vidite na gornjoj slici ekrana pokazuju ukupan rezultat za svaku kategoriju. Kategorija za progresivne web aplikacije (PWA) je zasivljena, verovatno zato što ova web lokacija nema PWA mogućnosti. Takođe, kao što možete zaključiti po veličini trake za pomeranje na snimku ekrana (sa krajnje desne strane), to je dugačak izveštaj.
Evo kako izgleda deo odeljka o performansama:
Neću tvrditi da su Lighthouse i njegovi predlozi sveti gral performansi web stranice, ali oni su od velike pomoći; to je zato što vlasnici web lokacija i programeri retko imaju pojma o tome koji problemi postoje i kako ih tačno rešiti.
Iskreno, čak se i ja osećam izgubljeno kao web programer, jer performanse i testiranje obično budu svojevrsne specijalizacije. Kao takav, Lighthouse je malo poznata, nedovoljno cenjena alatka, sada deo Chrome DevTools-a, koja je od ogromne koristi kako za vlasnike preduzeća, tako i za programere/sistemske administratore.
Veština za Uređivanje Koda
Kartica „Izvori“ u DevTools-u nam omogućava pristup različitim datotekama koje je učitala web lokacija. Takođe ima mogućnosti kao što su uređivanje koda, čuvanje isečaka itd. Ovo ne bi trebalo da bude iznenađenje za web programere. Međutim, DevTools takođe ima nekoliko ugrađenih pogodnosti koje olakšavaju život programerima koji su navikli na svoje omiljene IDE-ove koda.
DevTools koristi neke dobro poznate prečice na tastaturi koje će vam uštedeti vreme i smanjiti frustraciju oko navigacije. Na primer, Ctrl + D (ili Cmd + D na Mac-u) može se koristiti za isticanje višestrukih pojavljivanja reči. Slično tome, držanje Ctrl (ili Cmd na Mac-u) i kliktanje na više mesta u kodu daje vam više kursora. Pogledajte video ispod da biste dobili bolju ideju:
Ako mislite da je ovo kul, obavezno pogledajte zvaničnu dokumentaciju da biste iskoristili sve funkcije za uređivanje koda koje DevTools nudi.
Kontrolišite Stanje DOM Elementa
Ponekad nešto testiramo ili otklanjamo greške, ali ponašanje koje jurimo dostupno je samo u određenom stanju elementa. U zavisnosti od toga u kom je stanju, možda ćete imati problema; za mene je to stanje „lebdenja“, jer se sećam da sam gubio bezbroj minuta pokušavajući da tempiram akciju lebdenja ili da koristim dodatni, privremeni CSS, itd.
Srećom, Chrome DevTools ima jednostavan način da promeni stanje pregledanog elementa. Štaviše, opcija da to uradite je tu odmah ako kliknemo desnim tasterom miša na element (na kartici „Elementi“), ali s obzirom na broj funkcija i pritisak svakodnevnog posla, ovo je lako prevideti:
Da, zaista je tako jednostavno!
Sada ne morate da dodajete logiku uslovnog testiranja u svoj kod, pišete dodatni CSS ili se služite nekim drugim trikovima kada posmatrate element u drugom stanju.
Panel sa Alatima
Poslednje, ali ne i najmanje važno na ovoj listi je panel sa alatima. To je još jedna od onih neverovatno korisnih funkcija koje su dobro skrivene i mogu se videti samo pomoću prečica na tastaturi. Kao što samo ime sugeriše, panel sa alatima nije jedan alat, već svojevrsna kontrolna tabla na kojoj su dostupne skoro sve funkcije DevTools-a. Pošto postoji previše funkcija koje nude celokupnu funkcionalnost DevTools-a, traka za pretragu je dostupna odmah na vrhu.
Da biste aktivirali panel sa alatima, uverite se da ste na panelu DevTools, a zatim pritisnite Ctrl + Shift + P (ili Cmd + Shift + P za Mac korisnike):
Panel sa alatima je pun mogućnosti i iznenađenja. Na primer, da li ste znali da možete da napravite snimak ekrana direktno iz DevTools-a?
Kladim se da ne, jer biste morali da pokrenete panel sa alatima i unesete „snimak ekrana“ u traku za pretragu da biste to otkrili:
Takođe ćete primetiti nekoliko opcija za pravljenje snimaka ekrana, uključujući i onu za odabrani DOM čvor! Istražite panel sa alatima detaljnije i uveravam vas da nećete biti razočarani!
Ako treba da napravite snimak ekrana bilo koje web stranice na daljinu, pogledajte alatku za snimke ekrana wdzwdz.
Zaključak
Sam Chrome pretraživač je bogat funkcijama, ali ono što zaista blista je ponuda DevTools-a. Kao što smo videli u ovom članku, postoji dosta dobro skrivenih funkcija – i drugih koje se kriju naočigled – za koje većina korisnika ne zna. Zašto su ove karakteristike skrivene?
Pretpostavljam da su neke od njih veoma eksperimentalne (kao što je Režim Dizajna), a programeri Chrome-a žele da svakodnevnim korisnicima otežaju pronalaženje ovih funkcija. Što se tiče preostalih funkcija, verujem da je to jednostavno slučaj preopterećenja informacijama: ako postoji, recimo, 120 funkcija, a neke od njih imaju podfunkcije i tako dalje, prilično je nemoguće dizajnirati pravi korisnički interfejs za takav scenario. Takođe, Google istorijski nije imao dobar pristup korisničkom iskustvu svojih proizvoda, tako da postoji i to. 🤷🏻♂
Bez obzira na to, nadam se da vam je neki od ovih saveta bio koristan. Ali, što je još važnije, nadam se da vam je ovaj članak pružio uvid u to šta se gde krije, tako da sledeći put kada budete želeli da istražite ili tražite nešto posebno, znate gde da „kopate“. 😆