Downloaded 166 times
Uploaded byBinny V A
Firebug: Javascript Development Made Easier
Firebug is a Firefox plugin that aids JavaScript development. It provides tools like a JavaScript debugger, DOM viewer, and CSS/HTML editors. While it can slow down Firefox, Firebug allows inspecting page elements, setting breakpoints, and logging for debugging. It helps locate issues faster than using alerts. Similar helper plugins exist for other browsers as well.
More Related Content
Similar to Firebug: Javascript Development Made Easier
Firebug: Javascript Development Made Easier
- 1. Firebug: JavaScript Developmentmade easier Binny V A http://www.openjs.com/
- 2. Firebug: An IntroductionFirefox plugin JavaScript Debugger DOM Viewer JavaScript Profiler JavaScript Logging Engine And a LOT more... Its a... getfirebug.com
- 3. Disadvantages of FirebugBig(relatively) – causes firefox to be slower Might make firefox unstable Makes you hate IE even more No firebug for IE
- 4.
- 5. Finding an ElementInspect Right Click > Inspect Firebug Toolbar > Inspect > Click on Element HTML Tab > Find Find hidden elements this way.
- 6. Firebug, the CSSEditor Ability to locate CSS rules Live updation of CSS Values Disable rules individually See inheritance of CSS rules
- 7. CSS Editor Specialhandling of margin/padding – useful for designers Shows the 'Box Model' in Layout Tab Shows Computed Style(final style)
- 8. HTML Viewer Highlightsthe element under the mouse.
- 9. HTML Viewer Highlightchanges in DOM Delete Nodes Edit the HTML Add/Edit/Delete attributes 'Scroll into View'
- 10. DOM Viewer Seethe element's DOM Properties Editing Possible(double click) See all the functions for that DOM node
- 11. Net View Seeload times for all items See Headers
- 12. Console Log AjaxCalls Log Events The Profiler Live execution of JS Code
- 13. Console API LoggingEngine console.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
- 14. JavaScript Debugger Everythingexpected from a debugger Breakpoints Run Step Into Step Over Line by line execution Variable value on hover Watches Stacks
- 15. Other Web DevelopmentPlugins for Firefox Web Developer HTML Validator Greasemonkey Yslow ColorZilla MeasureIt Live HTTP Headers
- 16. Non-Firefox Browser HelpersFirebug Lite IE DebugBar Dev Toolbar
- 17. Thank You -Questions?