The document discusses the evolution of web development with a focus on the Firebug tool, presented by Dave Ross at the West Suburban Chicago PHP Meetup in July 2009. It highlights challenges in HTML, CSS, and JavaScript debugging and introduces various features of Firebug such as the console, HTML and CSS inspectors, and network monitoring. Additionally, it mentions available plugins for Firebug and resources for further learning.

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