Firebug API naudojimas JavaScript derinimui

Šiame įraše supažindinsiu jus su Firebug API komandomis, kurios gali pagelbėti programuojant JavScript. Kas nežino, Firebug yra įskiepis Firefox naršyklei (yra supaprastintos versijos, skirtos IE, Opera ir Safari), leidžiantis interaktyviai redaguoti ir derinti (debug) tinklapio HTML, CSS ir JavaScript kodą. Šį kartą į patį derinimo procesą nesikišiu (galbūt tai tema ateičiai). Rašydami kodą neišvengiame situacijų, kai tenka peržiūrėti, kokias reikšmes įgija kintamieji kodo vykdymo metu. Čia matau du variantus:

• 1. Naudoti debugerius.
• 2. Išvesti informaciją į terminalo/naršyklės langą.

Pirmuoju atveju reikia naudoti programinę įrangą, turinčią šias galimybes, tačiau kiekvienai programavimo kalbai reikalingas atskiras derintuvas. Todėl antrąjį būdą laikau universalesniu, nors gal ne tiek patogiu: tiesiog programavimo kalbos priemonėmis išvedame kintamųjų informaciją į ekraną, ir (jeigu reikia) galime nutraukti programos vykdymą. Programuodamas C++, rašydavau "std::count << info << endl;", Java: System.out.println(info);, PHP: print_r/var_dump/echo, na o JavaScrip tiesiog paprastą alert(); Tačiau funkcija alert() nėra itin patogi: kol yra rodomas pranešimo langas, skripto vykdymas būna sustabdytas. Taip pat pranešimo uždarymui reikalingas vartotojo įsikišimas - ne itin patogu kai deriname ciklą ar tiesiog išvedinėjame didelį kiekį informacijos. Firebug'as suteikia galimybę išvesti informaciją į jo konsolės langą, pasinaudojant API funkcijomis. Pats Firebug'as yra ne kas kita, kaip JavaScript programa. Kiekvienam atvertam naršyklės tinklapiui yra sukuriamas globalus console objektas, skirtas išvedinėti informacinius pranešimus į konsolę. Norėdami išvesti kokį nors pranešimą, į JavaScript kodą turime įrašyti: console.log(kintamasis); Įvykdžius šią eilutę bus išvedama kintamojo reikšmė. Metodą "log" taip pat galime naudoti aprašant išvedimo formatą, pvz.: console.log("Pirmas kintamasis: %s, antras kintamasis: %d", "PIRMAS", 2); Kas įvyks toliau, manau nereikia aiškinti. Yra ir daugiau metodų, skirtų pranešimų išvedimui:

• console.info(data) - išvedamas pranešimas su informacine piktograma.
• console.error(data) - pranešimas su klaidos piktograma.
• console.warn(data) - pranešimas su perspėjimo piktograma.
• console.dir(data) - objekto su visomis savybėmis išvedimas.
• console.trace() - vykdytų funkcijų steko iki trasuojamos vietos išvedimas.
• console.time(name) ir console.timeEnd(name) - vykdymo laiko stebėjimas.
• console.count() - išveda kiek kartų vykdyta konkreti kodo vieta (kiek kartų iškviestas šis metodas).

Pilnas metodų sąrašas ir aprašymas pateikiamas oficialiame Firebug tinklapyje. Dirbant su šia priemone teko susidurti su problema testuojant JavaScript veikimą skirtingose naršyklėse. Jei naršyklėje nėra įdiegtas Firebug, tai console objektas gali neegzistuoti, o kreipimasis į jo metodus iššauktų klaidas. Kita problema - kai kuriose naršyklėse console objektas jau gali būti apibrėžtas (pvz. Safari). Tokiu atveju sukuriamas firebug objektas, o API iškvietimui naudojamas toks kodas:

firebug.d.console.cmd.log("test");
firebug.d.console.cmd.dir([ "test" ]);

Jei planuojate palikti derinimo kodą JavaScript failuose, siūlyčiau apsirašyti papildomą klasę, skirtą derinimui su Firebug. Joje turėtų būti realizuotas aukščiau aprašytų problemų tikrinimas ir sprendimas. Firebug konsolę galima panaudoti ir klaidų ar pranešimų išvedimui iš PHP pusės. Tam yra sukurtas įskiepis FirePHP. Pačiam neteko išbandyti, tačiau paskaičius dokumentaciją, principai atrodo tokie patys. Na, o Zend Framework taip pat turi Zend_Log_Writer_Firebug. Sėkmės kovojant su bugais!