firebug: javascript development made easier
TRANSCRIPT
![Page 1: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/1.jpg)
2005-12-31
Your NameYour Title
Your Organization (Line #1)Your Organization (Line #2)
Firebug: JavaScript Development made easier
Binny V A
http://www.openjs.com/
![Page 2: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/2.jpg)
2
Firebug: An Introduction
Firefox pluginJavaScript DebuggerDOM ViewerJavaScript ProfilerJavaScript Logging EngineAnd a LOT more...
Its a...
getfirebug.com
![Page 3: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/3.jpg)
3
Disadvantages of Firebug
Big(relatively) – causes firefox to be slowerMight make firefox unstableMakes you hate IE even more
No firebug for IE
![Page 4: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/4.jpg)
4
Firebug
![Page 5: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/5.jpg)
5
Finding an Element
InspectRight Click > InspectFirebug Toolbar > Inspect > Click on Element
HTML Tab > FindFind hidden elements this way.
![Page 6: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/6.jpg)
6
Firebug, the CSS Editor
Ability to locate CSS rulesLive updation of CSS ValuesDisable rules individuallySee inheritance of CSS rules
![Page 7: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/7.jpg)
7
CSS Editor
Special handling of margin/padding – useful for designersShows the 'Box Model' in Layout Tab
Shows Computed Style(final style)
![Page 8: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/8.jpg)
8
HTML Viewer
Highlights the element under the mouse.
![Page 9: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/9.jpg)
9
HTML Viewer
Highlight changes in DOMDelete NodesEdit the HTMLAdd/Edit/Delete attributes'Scroll into View'
![Page 10: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/10.jpg)
10
DOM Viewer
See the element's DOM PropertiesEditing Possible(double click)See all the functions for that DOM node
![Page 11: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/11.jpg)
11
Net View
See load times for all itemsSee Headers
![Page 12: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/12.jpg)
12
Console
Log Ajax CallsLog EventsThe ProfilerLive execution of JS Code
![Page 13: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/13.jpg)
13
Console API
Logging Engineconsole.log(“We are at point A”);console.info(“We are at point B”);console.warn(“At point C!”);consele.error(“We reached point D :-(“);
You don't have to use alert for debugging any more
![Page 14: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/14.jpg)
14
JavaScript Debugger
Everything expected from a debuggerBreakpoints
RunStep IntoStep OverLine by line executionVariable value on hover
WatchesStacks
![Page 15: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/15.jpg)
15
Other Web Development Plugins for Firefox
Web DeveloperHTML ValidatorGreasemonkeyYslowColorZillaMeasureItLive HTTP Headers
![Page 16: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/16.jpg)
16
Non-Firefox Browser Helpers
Firebug LiteIE
DebugBarDev Toolbar
![Page 17: Firebug: Javascript Development Made Easier](https://reader033.vdocuments.mx/reader033/viewer/2022042519/55d50616bb61eb50338b462f/html5/thumbnails/17.jpg)
17
Thank You - Questions?