Firebug 1.0 - a webfejlesztők jobbkeze
Régota használom a firebugot és találkoztam is az 1.0-ás béta hírével de nem igazán foglalkoztam vele, gondolván, hogy nagy újdonságot nem hozhat, de ORIÁSIT tévedtem.
Amióta viszont fenn van és használom szinte minden részében olyan újításokat és funkciókat találok, hogy az állam leesik. Nos akkor szemezgessünk:
- külön lehet siteonként állítani hogy aktív legyen-e (mint az extensions install) illetve van backlist és whitelist
- a használatához egy külön monitort javasolnak :)
- HTML
- továbbfejlesztett source tree: már nem csak az attributumok értekeit de magukat az attributumokat is módosíthatjuk, sőt akár újat is vihetünk fel
- jobbklikkre további lehetőségek: editálhatjuk, törölhetjük az adott HTML részt, kimásolhatjuk a HTML-t vagy csak az innerHTML-t
- a módosítások kis JS highlighttal vannak 1-2 másodpercig jelölve
- az IMG tageknél megjelenik a kép
- jobbra azonnal látható a hozzá tartozó style - erről mindjárt
- CSS
- az url() kép hivatkozásoknál itt is kis thumbnailt mutat - #EFEFAB kódoknál a színt mutatja
- a style beállításokat soronként inaktiválhatjuk ami azonnal látható!
- egyes attributumoknál (font, méretek, típusok, stb) ha kurzorral belekattintunk a billentyűzettel + / - irányba változtathatóak a számok, fontok, típusok (pl: scroll, no-repeat, repeat-y,… stb.)
- jobbklikkre itt is: új, töröl, editál, inaktivál, kimásol
- CSS layout
- box model megjelenítés: box, padding, border, margin
- jobbra vizuálisan is megtekinthető és az értékek azonnal változtathatóak
- + egy vonalzó is bekapcsolható
- HTTP
- a net fülön megnézhetjük, hogy az adott oldal miket és mennyi idő alatt és milyen sorrendben tölt be (html, js, css, képek, minden) a végén összesítve a méret és az idő - kapcsolható, hogy mit akarunk figyelni (minden, html, css, js, xhr - ajax kérések, képek, flash)
- minden ilyen HTTP kérésnek megvan a request és respond tartalma
- a színeknek is van jelentőségük: világos szürke cacheből jön a sötét újratöltődik
- az ajaxos kérésekné a POST adatokat is megnézhetjük
- JS
- soronként kapcsolható breakpoint, akár feltételesen is! (pl: status = “error”)
- a konzolon megjelenő hibákhoz egyből tudunk breakpointot rendelni
- változófigyelés (watch)
- a futó kódban a változók felett tooltip-ben értékek, információk
- profilerrel (konzolon kapcsolható be) lemérhetjük a scriptek futási idejét (saját idő, min, max, átlag), függvényhívások számát, százalékos “fogyasztását”
- jobbklikkre beállíthatjuk, hogy loggolja a függvény hívásokat vagy kimásolhatjuk az egész függvényt
- DOM
- a saját függvényeket, változókat a lista tetejére teszi
- 1-1 noderól részletesebb információkat kapunk (kiemel 1-2 fontosabb atrributumot)
- az értékeket kedvünkre szerkesztgethetjük
- autocompleter
Továbbfejlesztett console.* parancsok és hozzájuk js lib amivel a többi böngészőn is működnek és még egy csomó miden amit valószínűleg kihagytam.
Engem meggyőzött, beleraktak mindent, hogy a kezünk alá dolgozzon! Menjetek és azonnal telepítsétek, rakjátok be a karácsonyfa alá és köszönjük meg Joe Hewittnek, hogy megcsinálta és rendületlenül fejleszti tovább.
Elgondolkodott, hogy fizetőssé teszi, de a közösség reagálását megfogadva a donate (támogatás) mellett döntött, ha tehetitek küldjetek neki!