Paprasčiausias būdas programos kode ieškoti klaidų yra jų išvedimas vienokiu ar kitokiu būdu. Man toks būdas visai priimtinas, kai išvedamos derinimo (debug) informacijos nėra daug. Tačiau išaugus pranešimų kiekiui tampa sudėtinga atsekti kuri žinutė kuriai kodo sričiai priklauso. Skirtingoms programavimo kalboms naudojamos skirtingos priemonės. Dirbant su JavaScript šių priemonių ieškoti praktiškai nereikia. Dabar beveik kiekviena populiaresnė naršyklė turi analogą JavaScript, CSS ir DOM elementų derinimui realiu laiku. Seniau jau rašiau kaip galima pasinaudoti Firebug API JavaScript derinimui, kad nereikėtų uždarinėti alert() dialogų. Dabar papasakosiu apie Opera Dragonfly naudojimą JavaScript derinimui.
Dragonfly
Opera Dragonfly yra kartu su Opera naršykle pateikiamas įrankis, skirtas JavaScript derinimui, DOM ir CSS elementų keitimui, bei peržiūrai, tinklapio resursų ir tinklo perdavimo sekimui. Jo naudojimas leidžia aptikti klaidas, neatitikimą standartams ir optimizuojamas vietas. Dragonfly galima vadinti Firebug atitikmeniu. Pagrindinis skirtumas tarp Firebug ir Dragonfly yra tas, kad pastarasis yra kraunamas iš Operos serverių, todėl pirmas paleidimas gali veikti kiek lėtokai. Geroji šio dalyko pusė – visada turėsite naujausią versiją.
Pasileisti šį gėrį galima iš naršyklės meniu pasirinktus „Tools > Advanced > Opera Dragonfly“ arba HTML puslapyje paspaudus dešinį pelės mygtuką ir pasirinkus „Inspect element“. Dragonfly atsidarys naršyklės lange, tačiau jį galima iškelti ir į atskirą langą – taip dirbti patogiau turint du monitorius. Atsidarius bus matomas langas, panašus į matomą žemiau esančiame paveikslėlyje.
Dragonfly + JavaScript
Anksčiau pateiktame paveikslėlyje yra atvertas JavaScript derinimo langas. Lango viršuje, šalia derinimo mygtukų esančiame dropdown elemente pateikiamas visų atvertame puslapyje naudojamų skriptų sąrašas. Reikia pastebėti, kad pateikiamas ne tik JS failuose, tačiau kartu ir html’e esantis kodas. Pasirinkus konkretų skriptą, jo turinys bus atvaizduojamas žemiau esančiame lange. Kairėje lango pusėje, apačioje, matoma JS konsolė. Konsolė man asmeniškai yra būtiniausias įrankis dirbant su JavaScript. Joje galima realiu laiku vykdyti kodą ir stebėti kokius pakeitimus jis atlieka. Pvz. į kosole įvedus alert(1); iššoks pranešimo langas. Taip pat, naudojantis konsole, galima peržiūrėti konkretaus objekto turinį. Norint tai padaryti, į komandinę eilutę reikia įvesti objekto pavadinimą, nesikreipiant į jokius metodus ar parametrus. Įvedus atsiras objekto tipas su nuoroda į jį. Paspaudus šią nuorodą, greta esančiame lange „Inspection“ bus atvaizduotas objekto turinys. Žemiau esančiame paveiksliuke pavaizduotas darbas su konsole ir išvestas objekto "document" turinys.
Pats derinimo procesas vykdomas standartiškai, kaip daugumoje IDE: spaudžiant ant eilutės numerio, pažymimos eilutės, ties kuriomis JavaScript vykdymas turi būti sustabdytas (uždedami breakpoint’ai).
Sustojus vykdymui, toliau naviguoti po kodą naudojami viršuj esantys mygtukai:
- Continue – kodo vykdymui iki kito breakpoint’o;
- Step into – kodo vykdymui „įlendant gilyn“ į kitą vykdymo steke esančią funkciją;
- Step over – kitos kodo eilutės vykdymui;
- Step out – „išlipimui“ iš funkcijos aukštyn.
Manau patys puikiai suprantat šių mygtukų reikšmes, nes, kaip jau minėjau, jie yra standartiniai daugumoje derinimo įrankių. Greitesniam derinimui patogu išmokti šių mygtukų iškvietimo klavišus. Tad visgi kokią naudą mes gauname šitaip vaikščiodami po kodą? Pažiūrėję į „Inspection“ langą apatiniame dešiniame Dragonfly kampe, matysime visų šiuo metu naudojamų kintamųjų reikšmes. Dažnai to prireikia atsidūrus situacijoje, kai atrodo jog viskas turi veikti teisingai, tačiau visgi neveikia :-) Vykdant kodą po vieną eilutę ir sekant jo saugomų kintamųjų reikšmes galima lengviau aptikti kurioje vietoje yra klaida.
Jei jums labiau patinka Firebug, analogiškus veiksmus galite atlikti ir su juo. Dragonfly turėjo keletą esminių trūkumų, kurie trukdė dirbti su CSS ir DOM elementais, įpratusiems prie Firebug (pvz. tik neseniai pasirodė konkretaus stiliaus parametro išjungimo galimybė). Tačiau paskutiniu metu didesnių skirtumų tarp šių įrankių nebematau, tad visiems Operos vartotojams siūlau nespjauti ir dar kartą išbandyti šį įrankį.