Firebug: Javascript Development Made Easier

6,395 views

Published on

An introduction to firebug and how to use it for CSS Designing and JavaScript Development

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,395
On SlideShare
0
From Embeds
0
Number of Embeds
1,214
Actions
Shares
0
Downloads
163
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Firebug: Javascript Development Made Easier

  1. 1. Firebug: JavaScript Development made easier Binny V A http://www.openjs.com/
  2. 2. Firebug: An Introduction <ul><li>Firefox plugin </li></ul><ul><li>JavaScript Debugger </li></ul><ul><li>DOM Viewer </li></ul><ul><li>JavaScript Profiler </li></ul><ul><li>JavaScript Logging Engine </li></ul><ul><li>And a LOT more... </li></ul>Its a... getfirebug.com
  3. 3. Disadvantages of Firebug <ul><li>Big(relatively) – causes firefox to be slower </li></ul><ul><li>Might make firefox unstable </li></ul><ul><li>Makes you hate IE even more </li></ul><ul><ul><li>No firebug for IE </li></ul></ul>
  4. 4. Firebug
  5. 5. Finding an Element <ul><li>Inspect </li></ul><ul><ul><li>Right Click > Inspect </li></ul></ul><ul><ul><li>Firebug Toolbar > Inspect > Click on Element </li></ul></ul><ul><li>HTML Tab > Find </li></ul><ul><ul><li>Find hidden elements this way. </li></ul></ul>
  6. 6. Firebug, the CSS Editor <ul><li>Ability to locate CSS rules </li></ul><ul><li>Live updation of CSS Values </li></ul><ul><li>Disable rules individually </li></ul><ul><li>See inheritance of CSS rules </li></ul>
  7. 7. CSS Editor <ul><li>Special handling of margin/padding – useful for designers </li></ul><ul><ul><li>Shows the 'Box Model' in Layout Tab </li></ul></ul><ul><ul><li>Shows Computed Style(final style)‏ </li></ul></ul>
  8. 8. HTML Viewer Highlights the element under the mouse.
  9. 9. HTML Viewer <ul><li>Highlight changes in DOM </li></ul><ul><li>Delete Nodes </li></ul><ul><li>Edit the HTML </li></ul><ul><li>Add/Edit/Delete attributes </li></ul><ul><li>'Scroll into View' </li></ul>
  10. 10. DOM Viewer <ul><li>See the element's DOM Properties </li></ul><ul><li>Editing Possible(double click)‏ </li></ul><ul><li>See all the functions for that DOM node </li></ul>
  11. 11. Net View <ul><li>See load times for all items </li></ul><ul><li>See Headers </li></ul>
  12. 12. Console <ul><li>Log Ajax Calls </li></ul><ul><li>Log Events </li></ul><ul><li>The Profiler </li></ul><ul><li>Live execution of JS Code </li></ul>
  13. 13. Console API <ul><li>Logging Engine </li></ul><ul><ul><li>console.log(“We are at point A”); </li></ul></ul><ul><ul><li>console.info(“We are at point B”); </li></ul></ul><ul><ul><li>console.warn(“At point C!”); </li></ul></ul><ul><ul><li>consele.error(“We reached point D :-(“); </li></ul></ul><ul><li>You don't have to use alert for debugging any more </li></ul>
  14. 14. JavaScript Debugger <ul><li>Everything expected from a debugger </li></ul><ul><ul><li>Breakpoints </li></ul></ul><ul><ul><ul><li>Run </li></ul></ul></ul><ul><ul><ul><li>Step Into </li></ul></ul></ul><ul><ul><ul><li>Step Over </li></ul></ul></ul><ul><ul><ul><li>Line by line execution </li></ul></ul></ul><ul><ul><ul><li>Variable value on hover </li></ul></ul></ul><ul><ul><li>Watches </li></ul></ul><ul><ul><li>Stacks </li></ul></ul>
  15. 15. Other Web Development Plugins for Firefox <ul><li>Web Developer </li></ul><ul><li>HTML Validator </li></ul><ul><li>Greasemonkey </li></ul><ul><li>Yslow </li></ul><ul><li>ColorZilla </li></ul><ul><li>MeasureIt </li></ul><ul><li>Live HTTP Headers </li></ul>
  16. 16. Non-Firefox Browser Helpers <ul><li>Firebug Lite </li></ul><ul><li>IE </li></ul><ul><ul><li>DebugBar </li></ul></ul><ul><ul><li>Dev Toolbar </li></ul></ul>
  17. 17. Thank You - Questions?

×