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

1. Firebug
Web Development Evolved
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

2. Let’s
Go
Back
In
Time...
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

3. Batch Processing
• Input
• Process
• Output
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

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. 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. Isn’t that a step
backwards?
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

7. Heck yeah it is!
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

8. Problem #1
HTML
can be
is ugly
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

9. Problem #2
HTML Disconnected From
Rendered Page
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

10. Problem #3
External Resources
Images, CSS, Javascript...
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

11. Problem #4
Javascript
DOM manipulation after the page loads
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

12. Problem #5
CSS only looks easy
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

13. How do you debug
something like
GMail?
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

14. Firebug.
+ =
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

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. 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. 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. 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. 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. 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. 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. 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. 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. Firebug plugins
• Firecookie
• FirePHP
• FireQuery
• YSlow
• Pixel Perfect
• Many more!
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

25. Wow!
Where can I
learn more?
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

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