ugrás a tartalomhoz

Firebug 0.4, immár beépített debuggerrel

Bártházi András · 2006. Május. 24. (Sze), 21.27

Firebug: JavaScript debugger is

Immár elmondható, hogy sorozattá állnak össze a "Firebug" Firefox kiterjesztésről szóló bejegyzéseim - persze nem véletlenül esik szó erről az egyre jobb és jobb kiterjesztésről. Az ezúttal is egy igen érdekes újdonsággal jövő új verzióra ismét érdemes gondolkodás nélkül frissíteni, ugyanis egy igen kézreálló, könnyen használható JavaScript debuggert kapunk bónuszként.

A Firebugról korábbi bejegyzéseim során már leírtam, hogy a Firefoxot használó webfejlesztőnek egy igen kedvező lehetőséget kínál az aktuális oldal HTML és CSS-ének áttekintésére, s bele is lehet segítségével nyúlni az adott oldal adataiba, vagy le tudjuk kérdezni azokat. Eddig is elmondhattuk, hogy egy olyan eszköz, mely egyedülálló a munkánkat támogató lehetőségeink között.

Nos, az új verzió, mely ezúttal új logóval is jelent meg, ezen az úton továbblépett, s megint csak lehet a lehetőségeinek egy külön blogbejegyzést szánni. A kétségkívül legfontosabb újdonsága, hogy immár beépített debuggerrel rendelkezik. A használata rendkívül egyszerű, a Firebug felnyíló interfészén egy új fület kaptunk, ahol az oldalhoz tartozó összes JavaScript kód forrást megtekinthetjük, továbbá az egyes soraihoz töréspontokat rendelhetünk. Következő alkalommal, amikor lefut az adott rész, a végrehajtás meg fog állni, s nekünk utána lehetőségünk lesz akár soronként végrehajtani az adott JavaScript forrás részletet. E mellett az aktuális változókról egy listát is láthatunk. Amilyen egyszerűen hangzik a dolog, olyan hasznosnak bizonyul - eddig a Venkman kiterjesztés segítségével ugyan volt lehetőségünk ugyanerre, de itt a felhasználói interfész sokkal jobban ki van találva, s a hatékonysága is sokkal jobb, mint a Venkman esetén (a Venkmant sohasem sikerült megszoknom - nem is használom -, a Firebug debuggere viszont "szerelem első látásra").

Azért jöttek további újdonságok is, melyek szintén elég hasznosak. Ilyen, hogy ha egy JavaScript hiba történik, akkor nem csak maga a hibaüzenet jelenik meg, hanem le tudjuk kérdezni, hogy mely függvényeken keresztül, hogyan jutott el a program az adott hibáig. Ha bekapcsoljuk a "Break on Errors" szolgáltatást, akkor a debugger az adott hibás sorra fog ugrani, s megtekinthetjük az éppen aktuális változókat is - valószínűleg sok hasznos információhoz jutva ezáltal.

Végül pedig még egy új lehetőség: az eddigi általunk definiálható printfire függvény által biztosított logolási lehetőség le lett cserélve, s immár nem kell deklarálni, hanem egyből meghívható egy console nevű objektumon log, vagy akár debug, info, warn vagy error függvénye, melyek kis ikonnal, vagy nélküle vesznek fel új konzol bejegyzést.

Kisebb további fejlődések is vannak, érdemes elolvasni a bejelentést, illetve a dokumentációt.

A bejelentő blogbejegyzésben azt hiszem, hogy nem véletlenül tettek már többen is "szerelmi vallomást" Joe Hewittnak...
 
1

isten

wiktor · 2006. Május. 24. (Sze), 23.14
Isten a srác, nincs mese... :)
2

Js

tiny · 2006. Május. 27. (Szo), 19.21
A js debugger nem nagy cucc, ugyanis ugyanazt írja ki, mint a Firefox beépített debuggere, csak azzal a különbséggel, hogy az egész sort megjeleníti.
3

Nincs

Bártházi András · 2006. Május. 28. (V), 01.07
A Firefoxnak nincsen beépített debuggere. Ha pedig a Venkmanra gondolsz, akkor felhasználóbarátságban nagyságrendekkel előtte van.
4

Js konzol

tiny · 2006. Május. 28. (V), 18.33
A js konzolra gondoltam. Mire gondolsz, mint felhasználóbarátság?
5

JS konzol vs. JS debugger

Bártházi András · 2006. Május. 28. (V), 22.45
A kettő nem ugyanaz. A konzolon hiba és logüzenetek jelennek meg, a debugger segítségével pedig töréspontokat helyezhetsz el egy élő weblap kódjában, ahol a JavaScript futása megáll, és lekérdezheted a változókat, stb.

A beépített JavaScript konzol, és a Firebug konzola egyáltalán nem ugyanaz. A Firebug segítségével összetett változókat, HTML darabokat is át tudsz tekinteni, próbáld meg beírni például mindkettőbe, hogy document.body - teljesen más lesz a végeredmény. Aztán a Firebug konzola segítségével követni tudod az XMLHttpRequest kommunikációt, hogy mi ment el, s mi jött vissza. Ezen kívül pedig ott vannak a console.log() és társai, melyekkel te magad tudsz a programodból üzenetek, változó értékeket küldeni a konzolra, vagy éppen megmérni egy adott kódrészlet végrehajtási idejét.

A felhasználóbarátság terén pedig arra gondoltam, hogy a Venkman debugger közel sem volt ennyire egyszerűen használható és gyors, mint a Firebug debuggere. Az, hogy a weblap és a debugger ablak egymás mellett, és nem mögött van, már az egy hatalmas segítség: hiszen úgy tudok az oldallal felhasználói interakcióba lépni, hogy közben látom a debuggert is (és ez fordítva is igaz).

Nézted te egyáltalán, hogy mire jó a Firebug? ;)
7

Részben :)

tiny · 2006. Május. 31. (Sze), 13.50
A javascript részével tényleg csak annyit csináltam, hogy megnéztem mit ír ki. A css-ben és az egyéb dolgokban nagyon sokat segített. Itt az inspectorra gondolok, annak vettem legtöbb hasznát. Köszi ezt a hozzászólást, tartalmas is volt és most legalább tudom, hogy utána kéne olvasnom, mielőtt beszólok :)
6

Bemutató

attlad · 2006. Május. 29. (H), 14.37
Flash-es bemutató a kiterjesztésről:
http://www.digitalmediaminute.com/screencast/firebug-js/