Firefox dodaci za Web programere

Razvoj aplikacija za Web, naročito onih koje se baziraju na JavaScriptu, može da bude veoma mukotrpan posao ukoliko programer ne koristi dodatne alatke koje mu omogućavaju debagovanje i uvid u strukturu kreiranih dokumenata. Takođe, ograničenja koja sa sobom donosi JavaScript često primoravaju programere da se dovijaju na razne načine kako bi postigli željenu funkcionalnost tako da „pozajmljivanje” tuđih ideja i kôda nije neuobičajena praksa (u tome određene alatke mogu biti od velikog značaja). Firefox, kao besplatna platforma koju razvija veliki broj programera, na radost onih koji se bave razvojem ili onih koji to žele da rade, nudi veliki broj besplatnih ekstenzija i plug-inova koji znatno olakšavaju razvoj aktivnih aplikacija na ovoj platformi.

Firefox, kao i svi moderni Internet pretraživači, stranice zasniva na DOM konceptu (Document Object Model) koji stranicu tretira kao hijerarhijsku strukturu (stablo) elemenata koji se na njoj nalaze te je stoga uvid u hijerarhiju elemenata stranice od veoma velikog značaja prilikom razvoja aplikacija. Prvi alat koji se isporučuje uz sam Firefox jeste DOM Inspector. On nudi odličan uvid u strukturu stranica te ga stoga prilikom instalacije Firefoxa neizostavno treba instalirati. Budući da smo o DOM Inspectoru pisali u jednom od prethodnih brojeva, u tekstu koji sledi nećemo raspravljati o njegovoj (dokazanoj) funkcionalnosti.

S obzirom na to da JavaScript aplikacije izvršavaju (tačnije, interpretiraju) sami browseri, njihovo debagovanje na način na koji su to (na primer, C++) programeri navikli nije moguće ukoliko za to sam browser ne nudi adekvatnu podršku. Firefox u sebi sadrži debug platformu pod nazivom Venkman na kojoj se bazira ekstenzija JavaScript Debugger. Verzija 0.9.87 ovog debagera instalira se kao i svaka druga Firefox ekstenzija, a posle restartovanja browsera moguće je početi sa njegovim korišćenjem. JavaScript Debugger radi u posebnom prozoru, a pokreće se iz menija Tools. Prozor debagera podeljen je na veliki broj manjih delova u kojima je moguće videti spisak učitanih skriptova u otvorenim prozorima ili tabovima, pratiti promenljive skriptova, postavljene break-pointe, videti listu otvorenih prozora, kao i izvorni kôd svakog od učitanih skriptova. Debager omogućava korisnicima da postavljaju break-pointe u bilo koju liniju učitanih skriptova i kada se izvršavanje skripta na datoj liniji zaustavi, moguće je pratiti sadržaje željenih promenljivih skripta. Jedna od veoma korisnih opcija ovog debagera jeste i prikaz steka koji programeru omogućava da isprati redosled pozivanja funkcija koji je prethodio dostizanju break-pointa.

Ponašanje debagera u slučaju pojave grešaka u skriptu, kao i u slučaju pojave izuzetaka (exceptions) veoma je lepo rešeno – moguće ih je ignorisati, informisati korisnika o njima putem loga ili zaustavljati izvršenje skripta kada do njih dođe. Skript je moguće izvršavati liniju po liniju, ulaziti u funkcije ili ih preskakati, a u proizvoljnom trenutku i nastaviti sa normalnim izvršenjem – baš kao što su, na primer, korisnici Microsoftovog Visual Studija navikli. Po završetku rada, korisnik može da snimi trenutno stanje break-pointa i promenljivih čije promene prati tako da rad sledećeg puta može nastaviti bez potrebe za ponovnim podešavanjem okruženja. Nabrojane mogućnosti su neke od najznačajnijih koje ovaj debager pruža, a programerima mogu uštedeti nebrojene sate uzaludnog traženja grešaka u skriptovima. Sa sigurnošću možemo reći da bi JavaScript Debugger trebalo da bude neizostavna alatka svakog JavaScript programera.

Pored JavaScript Debbuggera, koristan alat za debagovanje je i FireBug 0.4.1. Radi se o ekstenziji koja ima gotovo sve funkcije kao i JavaScript Debugger, ali nudi još nekoliko veoma korisnih mogućnosti. Svakako najkorisnija funkcija FireBuga jeste mogućnost praćenja XMLHttpRequest saobraćaja, na kojem se praktično temelji AJAX. FireBug nudi i svoju varijantu DOM Inspectora, a korisnicima omogućava da za tačno određene stranice prate logove HTML, CSS, JS i XML grešaka, umesto da ih jure u uvek prepunoj Firefoxovoj konzoli za greške. Na autora teksta bolji utisak je, ipak, ostavio JavaScript Debugger, ali se može reći da i FireBug predstavlja sasvim upotrebljivo rešenje za debagovanje aktivnih stranica tako da posedovanje obe ekstenzije svakako ne može da škodi.

Čest problem s kojim se autori Web stranica suočavaju, a kojeg obično nisu ni svesni, jeste neispravnost HTML kôda. Naime, browseri su napravljeni dosta fleksibilno tako da greške na stranicama na koje naiđu jednostavno ignorišu težeći da stranicu prikažu maksimalno korektno uprkos greškama, u čemu najčešće i uspevaju. Međutim, sintaksna neispravnost stranica dovodi do niza neželjenih pojava, od kojih je potencijalno slabije rangiranje na pretraživačima samo jedna. Postoji niz alatki čija je svrha validacija kôda stranice, od kojih su veći deo Web aplikacije koje za validaciju zahtevaju Internet konekciju, što u odsustvu permanentne konekcije može da bude problem.

Ekstenzija HTML Validator 0.7.9.5 namenjena je proveri ispravnosti Web stranica bez potrebe za slanjem HTML kôda stranice na server, čime je offline razvoj aplikacija znatno olakšan. Ova ekstenzija se bazira na aplikaciji Tidy čiji je razvoj započeo Web Consortium W3C, a kasnije ga je nastavio veliki broj nezavisnih programera. Ekstenzija deli greške koje pronađe na stranici prema njihovoj ozbiljnosti: na greške, upozorenja i upozorenja trećeg nivoa prioriteta. Detalji grešaka mogu se videti u prozoru za prikaz izvornog kôda stranice, pri čemu su linije koje sadrže greške označene, a za svaku grešku je dat kratak opis i način na koji je treba ispraviti. HTML Validator se može podesiti da vrši validaciju samo određenog skupa stranica ili svih stranica, a moguće ga je i potpuno isključiti. Izuzetno korisna opcija HTML Validatora jeste Clean koji pokušava da ispravi greške na stranici, posle čega nudi prikaz ispravljenog kôda stranice u poređenju sa neispravnim, kao i prikaz originalne i ispravljene stranice. Svima koji imaju potrebu za besprekorno formatiranim Web stranicama najtoplije preporučujemo ovu ekstenziju.

Korišćenjem CSS-a moguće je na stranicama postići izuzetno lepe vizuelne efekte, ali to pored poznavanja CSS-a zahteva i određeni smisao za dizajn. Stoga je ponekad korisno videti kako je neko drugi postigao određeni efekat, u čemu idealno pomaže CSSViewer 1.0.2. Reč je o izuzetno maloj ekstenziji koja po pokretanju kreira mali prozor koji prati pokrete miša i u kojem bivaju prikazani svi atributi elementa nad kojim se miš trenutno nalazi. Element na koji miš pokazuje biva uokviren tako da se na ovaj način dosta lepo moze analizirati struktura neke stranice, iako to nije namena ove ekstenzije.

Korisnih ekstenzija koje mogu olakšati razvoj Web aplikacija ima svakim danom sve više. Cilj nam nije bio da ih sve opišemo, već da sadašnjim, a naročito budućim Web programerima pomognemo da zaobiđu trnoviti put pisanja programa bez adekvatnih pomoćnih alatki. Najbolja početna tačka za pronalaženje željenih ekstenzija jeste Mozillina stranica sa dodacima za Firefox koja se nalazi na adresi addons.mozilla.org/firefox/extensions.

Dejan STEFANOVIĆ