Pripomolčki za splet

Splet in z njim povezane tehnologije so del vsakdana skoraj vsakega uporabnika računalnikov. Med njimi pa se najdejo tudi spletni razvijalci, a to je sila široka definicija, predvsem zaradi kopice protokolov, označevalnih in programskih jezikov ter razvojnih orodij, ki jih lahko uporabljajo pri delu.

Splet je res kopica precej različnih tehnologij. Vse skupaj deluje v internetu, povezuje pa ga nekaj označevalnih jezikov, ki se jim pri odjemalcih (brskalnikih) pridružuje še programski jezik javascript, na strežnikih pa je vse skupaj še bolj raznovrstno. Za pričujoči prispevek bomo spletne razvijalce poizkusili omejiti nekako na skupino, ki pri svojem delu tudi od blizu opazuje spletni protokol HTTP, obenem pa se pri delu ubada tudi s katerim od programskih jezikov (npr. z javascriptom) in ne le z označevalnimi (kot sta npr. CSS in HTML).

Spletni brskalnik je seveda ključno orodje in tudi ciljna podlaga, za katero se razvijajo spletni programi. Na žalost pa so si med sabo kar precej različni, čeprav se stanje z leti izboljšuje, predvsem zaradi vse bolj jasnega spoznanja, da je prav sodelovanje na skupnih temeljih (standardih) ključ uspeha spleta. Poizkusi najrazličnejših lastniških razširitev so se do zdaj izjalovili - oglejmo si le aktualno dogajanje z vsadkom flash - in pomen standardov je vse bolj jasen tudi laični javnosti.

Na srečo razvijalcev so prevladujoči spletni standardi omogočili tudi razvoj raznovrstnih pripomočkov, ki nam pomagajo pri spoznavanju delovanja spletnih programov, predvsem pri odkrivanju in odpravljanju težav in napak. Čedalje večja zmogljivost in razširljivost spletnih brskalnikov je pripeljala do današnjega stanja, kjer bomo večino res kakovostnih orodij našli kar neposredno vgrajene v brskalnike ali pa jih vanje lahko dodamo s pomočjo številnih razširitev (extensions).

Kot omenjeno, so te razširitve res namenjene predvsem razvijalcem, prav nič pa nas ne stane, če jih preizkusimo tudi kot zgolj radovedni uporabniki spleta. Na srečo je večina spletnih tehnologij odprtih in jih lahko brez težav analiziramo, s tem pa na najbolj neposreden način spoznavamo, kako reč sploh deluje, in najdemo navdih tudi za lastne poizkuse. Vodilni spletni brskalniki, ki podpirajo razširitve, nam ponujajo spletišča, kjer si lahko v posebni rubriki ogledamo tudi izbor razširitev za razvijalce. Galerije dodatkov tako najdemo za Firefox (addons.mozilla.org), Chrome (chrome.google.com/webstore), Opero (addons.opera.com) in Safari (extensions.apple.com), Internet Explorer je z verzijo 8 prinesel lastna naprednejša orodja za pomoč razvijalcem, v spletu pa je na voljo tudi nekaj dodatkov, razvitih zunaj Microsofta.

Brskalniki

Sodobni spletni brskalniki med sabo tekmujejo tudi v možnostih za razvijalce. Zlati standard, ki ga je dosegel dodatek Firebug za Firefox (predstavljen v nadaljevanju), je vzor tudi programerjem pri Applu, Googlu, Microsoftu, Operi in drugje in številne zmožnosti Firebuga so zdaj standardni del ponudbe. Tipično nam razvijalska orodja prikliče tipka F12 ali kombinacija Ctrl+Shift+I, ponekod pa so na voljo tudi preko menuja, vse pogosteje tudi skozi priročni menu (običajno desna tipka miške) nad izbranim elementom strani.

Zastavonoša pri orodjih za razvijalce je odprtokodni projekt WebKit, ki ga uporabljata Apple za Safari (tudi za i-naprave) in Google za Chrome. Poglavitna izboljšava v teh orodjih je podpora za natančno sledenje prenosu datotek in profiliranje skriptne kode, vse seveda za to, da bi naredili strani čim bolj odzivne in hitre.

Internet Explorer nima ekosistema dodatkov kot večina konkurenčnih brskalnikov, se pa zato toliko bolj trudijo v samem Microsoftu. Od osme različice Internet Explorerja naprej so sestavni del brskalnika tudi zmogljiva orodja za razvijalce, ki so vizualno in funkcionalno nadvse podobna Firebugu. Tako je za osnove dobro poskrbljeno, nekaj dodatkov (dva predstavljamo v nadaljevanju) pa lahko izkušnjo še izboljša.

Ne mirujejo tudi v Mozilli, ki preseneča z inovativnimi dodatki (v nadaljevanju), obenem pa je vse več orodij za razvijalce vgrajenih tudi v sam brskalnik. Nedavno predstavljeni Firefox 10 je prinesel številne novosti, ki se zgledujejo po Firebugu, vendar so narejene nekoliko drugače in še niso tako zmogljive. Navdušuje predvsem nov način analize spletne strani, saj lahko ob pomoči priročnega menuja takoj prikličemo prikaz HTML in CSS kode, ki določa izbrani element.

Firebug

Firebug (FB, getfirebug.com, mimogrede - po naše tem rdečim stenicam pravimo šuštarji) je kot dodatek za Firefox nastal že daljnega 2006, napisal pa ga je Joe Hewitt, eden od soavtorjev izvirnega Firefoxa. Danes je ključno orodje za spletnega razvijalca, v katerem so našla navdih tudi števila druga orodja. FB je vmes prilezel že zelo daleč, med drugim podpira celo lastne razširitve, s katerimi mu še razširimo že tako bogat nabor zmožnosti. Izvirno je sicer na voljo le za Firefox, vendar se razvija v splošno orodje, namenjeno tudi drugim brskalnikom. Za večino je že na voljo nekoliko manj zmogljiva različica Firebug Lite (IE6+, Firefox, Opera, Safari in Chrome).

Po namestitvi lahko FB aktiviramo s tipko F12, to so povzeli tudi številni drugi podobni dodatki. Zadnje različice Firefoxa dodatke za razvijalce ponujajo tudi prek posebnega menuja Web Developer. FB se lahko prikaže kot del glavnega okna brskalnika ali pa ga uporabljamo v ločenem oknu.

Osnovna funkcija orodja je spremljanje izvirne kode HTML. Na izbranem elementu strani lahko s priročnega menuja (tipično ga prikliče desni gumb miške) izberemo možnost Inspect Element, kar nam v zamaknjeni izvirni kodi izbere želeni element spletne strani. FB omogoča tako pregled atributov kot njihovo spreminjanje, spremembe pa se v živo pokažejo na strani. Posebni del okna FB je namenjen atributom CSS, ki jih prikaže po hierarhiji, kot so določeni skozi različne datoteke. Spet jih lahko po želji dopolnjujemo in spreminjamo. FB nam zna jasno prikazati mere določenega elementa, skupaj z nevidnimi lastnostmi, kot je rob (margin) in podlaganje (padding). To pa še ni vse. FB ima poseben modul, namenjen natančnemu spremljanju omrežnega prometa. Najdemo lahko seznam vseh potrebnih datotek, čas njihovega nalaganja, za vsako izmed njih pa si lahko ogledamo tudi podrobnosti zahtevka (request) in odgovora (response). FB znatno razširja tudi konzolo za javascript, ki je precej izboljšana in omogoča razvijalcem, da v lastno kodo vstavijo stavke, s katerimi je mogoče med izvajanjem natančno spremljati, kaj se dogaja (npr. console.log()). Konzola FB natančno opiše morebitne napake v kodi in nam omogoča, da jih globoko raziščemo (drill down). Za povrh lahko v konzoli izvajamo lastne programske stavke, s katerimi v živo vplivamo na naloženo spletno stran. FB omogoča tudi podrobno analizo predmetnega modela spletne strani ali DOM.

Skratka - Firebug je nepogrešljiv dodatek za vsakogar, ki ne le razvija spletne strani, temveč ga malo bolj podrobno zanima, kaj se v resnici dogaja v ozadju.

HttpFox

Firebug je skoraj popolno orodje za spremljanje spletnih strani, vendar mu manjka podrobnejša analiza samega protokola HTT. To zna biti v določenih primerih silno pomembno. Na srečo si lahko pomagamo z dodatkom HttpFox (HF, code.google.com/p/httpfox/), ki zna izvrstno dopolniti obstoječe dodatke za razvijalce v brskalniku Firefox.

Kot omenjeno, je dodatek HF namenjen analizi protokola HTTP. Z njim torej ne bomo odkrivali podrobnosti same spletne strani, temveč bomo izvedeli vse o tem, katere datoteke spletno stran sploh sestavljajo in kako natančno jih je brskalnik naročil, strežnik pa je na naročila odgovoril. HF moramo aktivirati in zagnati živo spremljanje prometa. Zabeležil bo podrobnosti vsake izmenjave, kar lahko kasneje pregledujemo. Vmesnik ima na vrhu seznam vseh zahtevkov, spodaj pa dva okvirja s podrobnostmi vprašanja in odgovora. Spremljamo lahko resnično vse, od surovega zaglavja (headers) prek piškotkov (cookies), parametrov (query string in post data) do same vsebine (content).

HF ima torej nekoliko manjši nabor zmogljivosti od FB, vendar je v svojem delokrogu izvrsten.

WebDeveloper

Zmogljiv dodatek za spletne razvijalce, ki je na voljo za Chrome in Firefox, je WebDeveloper (WD, chrispederick.com/work/web-developer/). Brskalniku doda novo orodno vrstico, ki ponuja številne možnosti analize spletnih strani.

Ena izmed zanimivih možnosti WD je spremljanje slogov CSS poljubnega elementa, ki ga kliknemo z miško. Posebnost WD so orodja, s katerimi preverimo veljavnost označevalnih jezikov (ponuja validacijo s storitvami, kot sta W3C CSS Validator in Web Content Acessibility Report) in sposobnost spletišča, da se prilagodi okrnjenim odjemalcem - izklapljamo lahko podporo prikazu slik, slogom CSS ali javcascriptu in spremljamo, kako se stran znajde v takšnih okoliščinah.

WD omogoča tudi podrobno analizo delovanja spletnih obrazcev (forms), ki znajo dostikrat povzročati preglavice. Poleg tega ima tudi možnosti vizualizacije pomembnih atributov CSS, npr. različnih dimenzij. WD je sicer v rabi precej izpodrinil Firebug, a še vedno ponuja nekatere zanimive možnosti, zaradi katerih ga velja preizkusiti.

DebugBar

Internet Explorer je sicer za številne spletne razvijalce vir vsega zla v spletu, a tudi ti ne morejo mimo tega, da ga še vedno uporabljajo (pre)številni obiskovalci spleta. Zato pač ne gre drugače, kot da lastne stvaritve preizkusimo tudi v čim večjem številu različic IE. Od različice 8 sicer IE vsebuje nekatera zmogljiva orodja za razvijalce, še precej uporabnejši pa postane z dodatkom DebugBar (DB, www.debugbar.com), ki je za ljubiteljsko rabo na voljo brezplačno.

DB ima številne uporabne zmožnosti, med drugim ponuja uporabniku s težavami, da z lahkoto pošlje zaslonski posnetek težave po e-pošti. Ponuja tudi preprosto odčitanje barve poljubne izbrane točke na spletni strani (color picker). Zanimiva zmožnost je vpogled v dejansko (kot se je prenesla) in že tolmačeno (kot se izvaja) kodo javascript. Z dodatno namestitvijo knjižnice (companion.js) lahko tudi v IE uporabljamo "vsemogočno" sledenje izvajanju, kot ga ponuja Firebugova metoda console.log().

Če bomo morali spletne strani preizkušati tudi v IE, je namestitev dodatka DB nadvse priporočljiva.

Tilt

Mozilla ne počiva in vztrajno potiska meje možnega v spletu naprej. Njihov trenutno še preizkušani dodatek Tilt (blog.mozilla.com/tilt/) ponuja trirazsežno vizualizacijo prikazane spletne strani. Razširitev XPI lahko prenesemo z navadne spletne strani, potem pa preneseno datoteko z miško povlečemo v okno Firefoxa, kar nam bo omogočilo namestitev. Nameščeni dodatek aktiviramo s kombinacijo Ctrl+Shift+M in že lahko občudujemo 3D model vseh elementov spletne strani.

Vizualizacija, kot jo ponuja Tilt, je neprecenljiva za spoznavanje osnov postavljanja elementov in nam vsako spletno stran predstavi v luči, kot je še nismo videli. Z razvojem nameravajo pri Mozilli v Tilt vgraditi še številne možnosti, ki bodo dodatek iz vizualizacijske vloge prestavljale vse bolj tudi v praktični svet razvoja za splet, Tilt naj bi celo postal standardni del Mozille. Vsekakor pa je Tilt že danes nekaj, kar si preprosto moramo ogledati.