Firebug

2,127 views
2,029 views

Published on

An overview of Firebug's features I presented at the July, 2009 meeting of the West Suburban Chicago PHP Meetup. This presentation was followed by at least a 1/2 hour demo, and then another member of the group went into the details of FirePHP for almost an hour.

It was a really intense night of great presentations and fun.

Visit us on the web at http://php.meetup.com/381/ and http://suburbanchicagophp.org

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

No Downloads
Views
Total views
2,127
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
73
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Firebug

  1. 1. Firebug Web Development Evolved Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  2. 2. Let’s Go Back In Time... Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  3. 3. Batch Processing • Input • Process • Output Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  4. 4. December 9, 1968 Doug Englebart’s “Mother of all demos” Interactive computing Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  5. 5. The Web On November 12, 1990, Tim Berners-Lee formally proposed the hypertext system we call “the web”. • Request • Process • Response Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  6. 6. Isn’t that a step backwards? Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  7. 7. Heck yeah it is! Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  8. 8. Problem #1 HTML can be is ugly Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  9. 9. Problem #2 HTML Disconnected From Rendered Page Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  10. 10. Problem #3 External Resources Images, CSS, Javascript... Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  11. 11. Problem #4 Javascript DOM manipulation after the page loads Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  12. 12. Problem #5 CSS only looks easy Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  13. 13. How do you debug something like GMail? Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  14. 14. Firebug. + = Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  15. 15. It slices. It dices. It’s either a Veg-O-Matic or a Swiss Army Knife. Pick your analogy. I’m tired. Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  16. 16. Console • Use console.log(stuff) in your Javascript to output to console • Enter Javascript and see how it behaves in real time Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  17. 17. HTML Inspector • Hierarchical • Search • Highlight element on rendered page • Right click on page to “inspect element” • Inspect what CSS was applied, final layout • Edit elements, text, CSS styles to see effects Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  18. 18. HTML Editor • See & edit HTML for one node or the whole page Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  19. 19. CSS Inspector/Editor • View CSS from any file that makes up the page • Modify CSS, see results in real time Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  20. 20. Script Inspector • View Javascript from any file that makes up the page • Debugger: breakpoints, call stack, watch expressions Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  21. 21. Net Monitor • All HTTP requests (pages, images, CSS, Javascript, Flash, etc.) • Real time • How long & what order • Hey, look! There’s a 404 over there in red. Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  22. 22. Net Monitor • Pick a request • See request & response headers • See raw response data from server • See if the browser cached it and when Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  23. 23. Text Did you hear? Firebug can be extended with its own plugins! Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  24. 24. Firebug plugins • Firecookie • FirePHP • FireQuery • YSlow • Pixel Perfect • Many more! Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  25. 25. Wow! Where can I learn more? Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org
  26. 26. For More Information • Firebug: GetFirebug.com • Best Practices for Speeding Up Your Web Site (understanding • Tutorial: http:// YSlow): http:// www.webmonkey.com/tutorial/ Build_Better_Pages_With_Fireb developer.yahoo.com/ ug performance/rules.html • Firebug Lite: http:// getfirebug.com/lite.html • YSlow: http:// developer.yahoo.com/yslow/ Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

×