Razvoj Web aplikacija ponekad ume da bude mukotrpan posao zbog nedostatka kvalitetnih alata koji omogućavaju uvid u način na koji browser „shvata” strane. Debagovanje Java Script aplikacija ili debagovanje stranica u pokušaju da u browseru izgledaju onako kako je autor zamislio često se svodi na mukotrpno pregledanje koda iznova i iznova, a sve zbog toga što browseri ne daju preterano mnogo informacija o problemima na koje su naišli prilikom prikazivanja stranice. Ovo je, opet, posledica činjenice da su browseri napravljeni tako da „ćute i trpe” svakakve gluposti u kodu, prikazujući što je moguće bolje stranice koje u sebi sadrže greške. Razvoj nove generacije Web aplikacija koje se baziraju na AJAX-u čini stvari još komplikovanijima tako da je potreba za razvojnim alatima danas veća nego ikada.

Probleme s kojima se suočavaju programeri prvo su uočili ljudi iz open-source zajednice. Kao rezultat nastao je Web Developer Extension (chrispederick.com/work/webdeveloper, 219 KB), toolbar koji je raspoloživ za Firefox/Flock i Mozillu/Seamonkey, a delo je samo jednog čoveka iz zajednice, Krisa Pederika (Chris Pederick). Toolbar postoji u vidu ekstenzije i posle jednostavne instalacione procedure prikazuje se kao nova toolbar linija u browseru. Iako Web Developer Extension postoji već dosta dugo, Microsoft je tek ovog meseca predstavio beta verziju svog Internet Explorer Developer Toolbara (www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en, 344 KB) koji u sebi sadrži većinu esencijalnih mogućnosti svog prethodnika namenjenog konkurentskim browserima. Microsoftov toolbar se isporučuje u vidu standardnog instalacionog fajla koji vodi korisnika kroz proces instalacije u nekoliko jednostavnih koraka. Po startovanju Internet Explorera, toolbar neće odmah biti prikazan, već ga je potrebno izabrati u view meniju. Ukoliko u Exploreru imate instaliran i Alexa toolbar, odmah ćete primetiti da se Developer Toolbar ne prikazuje, a jedino rešenje koje je autor teksta uspeo da pronađe jeste deinstalacija Alexa toolbara.

U tekstu ćemo se pozabaviti zajedničkim mogućnostima oba toolbara, kao i razlikama između njih, budući da Web Developer Extension poseduje daleko više mogućnosti od Microsoftove verzije koja je trenutno u beta fazi i, po svemu sudeći, kod nje još puno toga mora da se uradi (iako je dobar deo ključnih mogućnosti već funkcionalan).

Kod testiranja Web stranica velika pažnja se posvećuje ispitivanju funkcionalnosti u različitim okruženjima – počevši od različitih verzija browsera, preko različitih operativnih sistema, do različitih rezolucija ekrana. Dobar deo opcija oba toolbara namenjen je upravo simuliranju različitih radnih okruženja i gotovo da potpuno eliminiše potrebu za instaliranjem velikog broja različitih browsera koji se u tu svrhu često koriste.

Oba toolbara omogućavaju isključivanje pojedinačnih funkcionalnosti browsera kao što su izvršavanje Java Scriptova, prihvatanje „kukija”, korišćenje keša, aktivnost pop-up blokera i slično. Među opcijama, IE Developer Toolbar nudi još i isključivanje slika koje ne radi uvek kako bi trebalo (pokušaj onemogućavanja slika na Google stranici, na primer, ne uspeva). Web Developer Extension nudi još niz dodatnih opcija u meniju za onemogućavanje funkcionalnosti browsera, poput onemogućavanja Java apleta, redirekcije strana, prikaza boja na strani. Kod Web Developer Extensiona opcije za onemogućavanje funkcionalnosti browsera nisu smeštene samo u meniju Disable, već se mogu naći i u drugim menijima. CSS meni tako sadrži opcije kojima se mogu onemogućiti svi stilovi na strani, pojedinačni stilovi, stilovi koji su smešteni u određenim datotekama, stilovi prema tipu medija kojima su namenjeni i slično. Onemogućavanje prikaza slika kod Web Developer Extensiona vrši se u Images meniju, gde je moguće isključiti prikaz svih slika, samo slika koje se povlače sa drugih sajtova ili samo animiranih slika.

Još jedna od korisnih stavki kod testiranja jeste simuliranje različitih rezolucija ekrana. To se kod toolbarova postiže promenom dimenzija prozora browsera tako da odgovaraju različitim ekranskim rezolucijama. Oba toolbara u startu nude predefinisane tipične ekranske rezolucije, ali omogućavaju i proizvoljno zadavanje netipičnih rezolucija.

Kada je analiziranje sadržaja stranica u pitanju, oba toolbara nude mogućnost označavanja različitih tipova elemenata na stranicama: tabela, pojedinačnih ćelija u tabelama, slika, formi, DIV elemenata. Pobrojane stavke su uglavnom sve što IE Developer Toolbar nudi, dok Web Developer Extension nudi još niz mogućnosti za selektovanje specifičnih elemenata. Boljoj analizi stranice pomažu i mogućnosti oba toolbara da prikažu dodatne informacije o elementima stranice. Kada su slike u pitanju, ova mogućnost se svodi na prikazivanje dimenzija slika, njihovih veličina u kilobajtima, alternativnih tekstova i putanja do slika. Moguće je još prikazati i informacije o linkovima, tabelama, skrivenim elementima stranice i još puno toga. Kao i kod ostalih funkcionalnosti, IE Developer Toolbar i ovde nudi daleko manje opcija nego što je slučaj sa Web Developer Extensionom.

Svi vodeći browseri u poslednje vreme podržavaju DOM (Document Object Model), pristup kod kojeg se stranica tretira kao stablo hijerarhijski raspoređenih elemenata, na kojem se zasniva većina novijih Web aplikacija. Oba toolbara podržavaju DOM inspector koji prikazuje stablo stranice i karakteristike elemenata stabla. Kretanje kroz stablo stranice je brzo i jednostavno kod oba inspektora – klikom na pojedinačne elemente oni bivaju uokvireni trepćućim okvirima što ih čini lako uočljivim na stranici, a detaljan skup karakteristika elementa prikazuje se u prozoru inspektora. IE-ov DOM inspektor deluje nešto funkcionalnije pošto se lako uklapa u stranicu (docking), a i karakteristike selektovanog elementa su preglednije prikazane, na način sličan onome iz Microsoftovog Visual Studija. S druge strane, Web Developer Extension koristi usluge DOM inspektora koji je posebna ekstenzija browsera pa treba voditi računa o tome da i on bude instaliran.

Jedna od izuzetno korisnih stavki koju oba toolbara nude jeste prikaz lenjira koji omogućava merenje dimenzija elemenata na stranicama. Lenjir kod IE Developer Toolbara, pored merenja horizontalnih i vertikalnih dimenzija, omogućava merenje dimenzija u proizvoljnim pravcima, ali i fiksiranje rulera za pojedine elemente stranice (na primer, ćelije tabele), što je kod viših rezolucija veoma korisno. Ruleri u oba slučaja prikazuju koordinate svojih početnih i krajnjih tačaka, kao i dimenzije selektovanog dela.

Opcije za validaciju stranica uključene su u oba toolbara. Tako je moguće proveriti ispravnost HTML i CSS koda, RSS feeda, linkova, kao i izvršiti WAI i 508 validaciju. Oba toolbara koriste osvedočene online alate za proveru validnosti elemenata stranica tako da je provera moguća samo ukoliko je korisnik toolbara konektovan na Internet.

Mogućnosti toolbarova pobrojane u ovom tekstu su samo deo onoga što opisani nude. Web Developer Extension je bez sumnje daleko kompletniji i stabilniji od IE Developer Toolbara, dok je očigledno IE Developer Toolbar nastao kao njegova kopija, još uvek neusavršena. Bez obzira na to, oba toolbara se mogu smatrati nezaobilaznim alatom za ljude koji se bave razvojem Web strana jer pružaju odličan uvid u sve aspekte Web stranica i često umnogome skraćuju vreme potrebno za otklanjanje grešaka u procesu njihovog razvoja.

Dejan STEFANOVIĆ