Firefox_vs_Chrome_logos

DEV Tools – Chrome ili Firefox?

11 фебруара, 2020

Kao veb-developer imate potrebu da svakodnevno koristite DevTools u vašem pretraživaču. Znamo da većina još uvek koristi Chrome DevTools jer je Chrome uvek prednjačio u alatima za veb-developere.

Takođe znamo da je ovo često predmet polemisanja u developerskoj zajednici i to je tako već godinama unazad. Međutim, sa novim verzijama Firefox pretraživača, Mozila se potrudila da znatno unapredi DevTools ugrađen u ovaj pretraživač, pa smo malo uporedili jedan i drugi DevTools i evo nekih naših zapažanja na tu temu.

Napomena: Poredili smo pretraživače na Windows 10 OS i u njihovim poslednjim verzijama koje su dostupne u trenutku pisanja teksta. Chrome u verziji 80 i Firefox u verziji 72. Verzija Firefox-a sa kojom smo radili je regularna verzija, a ne Firefox Developer Edition, koja u trenutku pisanja teksta takođe postoji na tržištu kao zasebni pretraživač.

Pre svega važno je da napomenemo da nismo upoređivali detalje niti smo radili uporednu analizu svih funkcionalnosti ova dva DevTool-a u njihovim najnovijim verzijama. Uporedili smo one delove gde po nama postoji neka značajnija razlika u intuitivnosti i funkcionalnosti tokom rada u dev modu.

U pitanju su dva pretraživača koja su bez sumnje i najpopularnija na tržištu i kod korisnika i kod developer-a, pa je logično da smo se bavili upravo sa njihovim Dev alatima.

Verujemo da će svako od vas imati svoje mišljenje na ovu temu i verovatno još mnogo toga da doda, pa budite slobodni da ostavite svoj komentar ispod teksta i kažete nam vaše iskustvo i koji pretraživač vi više koristite u svom radu.

Samo još da napomenemo da cilj ovog teksta nije promocija bilo koje od ove dve verzije, nego samo pokušaj da istaknemo neke funkcionalnosti koje su developerima potrebne u svakodnevnom radu, a za koje smatramo da ih obrađuju bolje u okviru svoje verzije DevTools-a.

Pa da polako krenemo:

CSS Flexbox

Po nama Firefox dosta prednjači u osnosu na Chrome kada je u pitanju rad sa CSS Flexbox-om. Tako je već godinama i čini nam se da će tako i ostati. Ako često koristite CSS Flexbox, onda znate da Chrome ne raspolaže tako detaljnim prikazom flex elemenata kao Firefox. Ukoliko obeležite flex element nećete imati opciju da dodatno označite ceo element. Primer sa slike 1 prikazuje izgled flex elementa u Firefox-u. Za isti element DevTools u Firefox-u nudi i opciju da uključite i iskučite dodano označavanje Flexbox elemenata, što itekako zna da bude od koristi kada radite sa dosta elemenata ili child-elemenata za koje je potrebno imati što više opcija na raspolaganju (slike 2 i 3).

Po nama je ovde Firefox u prednosti u odnosu na Chrome, jer bolje označava elemente i daje vam mogućnost da ih lakše izdvojite sa svim njihovim pojedinačnim vrednostima. Sa Firefox DevTools ćete lakše uočiti margine, padding-e i imati bolju vizuelnu predstavu samih elemenata na strani.

Slika 1

Slika 2

Slika 3

Možemo slobodno reći da sve rečeno za Flexbox važi i za CSS Grid, gde opet Firefox nudi više opcija i bolju preglednost elemenata, pa samim tim i olakšava rad sa njma.

Slike 4 i 5 pokazuju kako izgleda pregled Grid elemenata na stranici u Firefox DevTools, bez i sa uključenog Grid dugmeta za pregled elemenata.

Slika 4 (bez uključenog Grid dugmeta)

Slika 5 (sa uključenim Grid dugmetom)

Chrome nudi nešto slično kada je u pitanju CSS Grid (slika 6), ali po nama je to nešto siromašnija opcija od onogo što nudi Firefox.

Slika 6

Neki opšti zaključak, bar kada je u pitanju pomenuta dva CSS modula, jeste da se Firefox ovde bolje snašao i da developerima nudi nešto više alata sa kojim je lakše raditi i manipulisati Flex i Grid elementima.

CSS Animacije

Ovde je situacija po nama dosta izjednačena i oba pretraživača imaju dobar tool za rad sa CSS animacijama.

Ono gde ipak vidimo razliku jeste što DevTools opcija u Firefox-u omogućava malo bolju interakciju i upravljivost animacijama, u smislu prikazivanja toka animacije i pomeranja animacije na željenu tačku u vremenu/frejmu.

Takođe, sam tool za rad sa animacijama se kod Firefox-a nalazi na dosta pristupačnijem mestu u odnosu na isti tool u Chrome-u.

Ne smatramo ovo nekom prednošću Firefox-a, ali napominjemo kao još jednu zanimljivu informaciju.

Slike 7 i 8 prikazuju Animation Tool u okviru Chrome-a.

Ono što po nama Chrome-u nedostaje za rad sa animacijama jeste nešto veća upravljivost animacijom, što u nekim situacijama može da utiče na proces debagovanja. U Chrome verziji ovog tool-a, generalno ima manje informacija na ovu temu, što je po nama mali minus u odnosu na verziju tool-a koju nudi Firefox.

Slika 7

Slika 8

Za razliku od Chrome-a, Firefox nudi bolju upravljivost animacijom u samom procesu debagovanja, odnosno u toku animacije od njenog početka do kraja. Pomenuti tool ima nekoliko elemenata koji ne postoje u verziji Chrome-a, kao na primer dijagram koji prikazuje boje elementa u animaciji. Ovo nije neka značajna razlika, ali može biti itekako korisno prilikom rada sa dizajnerskim elementima na sajtu, gde je boja važan element.

Slike 9 i 10 prikazuju Animation Tool u okviru Firefox-a.

Slika 9

Slika 10

Po nama pomenute funkcionalnosti Firefox DevTools-a daju malu prednost ovom pretraživaču u odnosu na Chrome kada je u pitanju rad sa CSS kodom.

Javascript

Kada je u pitanju rad sa Javascript-om oba pretraživača imaju odlične Javasript endžine. Tu pre svega mislimo na brzinu izvršenja koda.

Ovo naravno nosi sa sobom i veliku potrošnju memorije od strane oba pretraživača. Ovde napominjemo da pomenuta protrošnja više dolazi od izražaja kod pregledanja sadržaja na internetu, pogotovo kada je aktivan veliki broj tabova, pa to ovde spominjemo samo kao jednu zanimljivu informaciju, jer samo po sebi nije tema ovog teksta.

U smislu preglednosti i efikasnosti rada u konzoli u okviru DevTools-a oba pretraživača imaju po nama podjednake alate, pa ne možemo napraviti neku značajniju razliku.

Verujemo da ako često radite sa Javascript-om možda možete da primetite neku razliku, pogotovo kada su u pitanju neki složeniji grafički zahvati. Chrome važi kao pretraživač koji bolje izlazi na kraj sa takvim kodom. Ukoliko imate takvog iskustva bilo bi zanimljivo čuti šta vi mislite na ovu temu.

Fontovi

Kada su u pitanju fontovi i manipulacija njima, Chrome definitivno nema dovoljno alata kao Firefox. Možemo slobodno reći da je u tom pogledu dosta siromašniji. Ovo samo po sebi ne znači da je u ovom segmentu Firefox Definitivno bolji, ali su se ljudi iz Mozila projekta očigledno više bavili razvojem alata za fontove nego Google.

Pre svega, Chrome nema dedicated alat za fontove. Možete ih menjati pod alatkom Styles, dodavati CSS silove, ali to nije ono što olakšava rad. Ovo je nadomešteno sa nekoliko popularnih ekstenzija, koje i sami možete pronaći na Chrome Web Store-u.

Sa druge strane Firefox ima alat ugrađen u DevTools i on se nalazi u sklopu panoa sa desne strane DevTools-a između alata Changes i Animations. Po nama ovo je veoma koristan alat jer nudi mogućnost za manipulaciju veličinom, visinom, razmakom i debljinom fonta. Sve pomenute vrednosti se mogu menjati uz pomoć klizača, što omogućava veoma lako i intuitivno igranje sa fontovima na stranici. Slike 11 i 12.

Slika 11

Slika 12

Iz svega prethodno napisanog nameće se zaključak da Firefox u svom DevTools-u ima nekoliko zanimljivih alata koji su po nama bolji od verzije DevTools-a koje nam nudi Google Chrome.

Svesni smo toga da je sve ovo samo deo alata koje nam nude oba pretraživača, ali u ovom tekstu smo se bavili kratkim uporednim pregledom sa ciljem da malo podsetimo na neke poznatije razlike. U zavisnosti od toga kojom vrstom veb razvoja se bavite, one vam mogu biti manje ili više važne i u određenoj meri uticati na kvalitet i brzinu vašeg rada.

Takođe smo svesni da mnogo veći deo veb-dev zajednice koristi Chrome DevTools, tako da će možda neki deo ovog teksta biti od koristi za bolje upoznavanje sa Firefox alatima.

Voleli bismo da čujemo i vaše mišljenje na ovu temu. Koji je vaš omiljen DevTool i koje biste vi prednosti i mane jednog ili drugog tool-a ovde dodali?

Bez komentara

Оставите одговор

Ваша адреса е-поште неће бити објављена. Неопходна поља су означена *

mCloud mailing lista
Da li želiš da se prijaviš na mCloud mailing listu i svake nedelje dobijaš informacije o našim tekstovima na blogu i novostima iz mCloud-a?
Nemoj više prikazivati