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

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

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

December 9, 1968
Doug Englebart’s
“Mother of all demos”
Interactive
computing
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

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

Isn’t that a step
backwards?
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

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

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

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

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

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

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

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

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

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

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

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

HTML Editor
• See & edit HTML
for one node or
the whole page
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

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

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

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

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

Text
Did you hear?
Firebug can be extended
with its own plugins!
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

Firebug plugins
• Firecookie
• FirePHP
• FireQuery
• YSlow
• Pixel Perfect
• Many more!
Dave Ross :: West Suburban Chicago PHP Meetup :: July 2, 2009 :: suburbanchicagophp.org

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

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