Presentation by Anthony Hortin @maddisondesigns at WordCamp Sydney 2012 #wcsyd

2. What is Firebug?
“ Firebug integrates with Firefox to put a
wealth of web development tools at
your fingertips while you browse. You
can edit, debug, and monitor CSS,
”
HTML, and JavaScript live in any web
page.

3. Put simply...
Firebug is an awesome website
administrators secret weapon!

4. Why would I use it?
✓ To find errors in your web page
✓ Experiment with and preview changes without
breaking your site
✓ Make simple updates yourself without having
to pay a developer

5. What can it do?
Inspect
View the HTML source
on the fly

6. What can it do?
Inspect
Inspect HTML tags
and CSS properties

7. What can it do?
Inspect
Edit HTML and CSS
and see those
changes instantly

8. What can it do?
Layout
Visualise your page
layout with Box Model
shading

9. What can it do?
Layout
Visualise breakdown
of each box in the
Box Model

10. What can it do?
Layout
View rulers and
guides for pixel
perfection layout

11. That’s not all...
Log - Log events to the console
Profile - Measure site performance
Debug - Provides a powerful debugger
Analyse - Monitor network activity

12. Where can I get it?
http://getfirebug.com
You can also get a lite version for Chrome
http://getfirebug.com/releases/lite/chrome/

13. Enabling Firebug
The Firebug panel will open at the bottom of the browser

14. WTF is this Box Model?
Every element on your
page is a box that
consists of Width,
Height, Padding,
Border & Margin

15. Firebug’s Box Model
Get a visual breakdown of
each box in the Box Model
It shows you the width and
height of the innermost box,
along with the size of the
padding, border & margin

16. Where’s the code?
The Inspect button lets you select any element
on your page using your mouse

17. Your new best Friends!
The HTML panel displays the generated HTML
The Style panel displays the CSS styles for the
currently selected tag

18. Selecting your HTML
Click the HTML tag and the element will be highlighted
Padding is purple Margins are yellow

19. The Quick Info box
Gives you all the important
info at a quick glance
If it gets in the way, just drag
it
If you don’t want it, hide it

20. Hiding Quick Info
If you don’t want the Quick Info box, simply hide it

21. Editing your HTML
Click the HTML
attributes or text to
change them
Use the Tab key to
move to the next
attribute

22. Editing your HTML
You can also use the Edit button to change the HTML
HTML & CSS changes appear as you type
Messed things up? Just refresh the browser window

23. Editing your CSS
Click a property to change it
When a Property is struck out, it means it’s
been overridden by another style

24. Editing your CSS
Use the Up/Down arrow keys
to...
Cycle through properties
Increment or decrement numbers
Increment or decrement by ten with Shift key

25. Editing your CSS
Preview images and colours
Disable CSS properties by clicking the icon next to it

26. Adding to your CSS
Add new Properties by...
Double-clicking the white area
Editing the last value and hitting Tab
Right-clicking and selecting "New Property..."

27. Useful CSS Styles
Text Color
color: #hexcode;
color: #123456;
Important points:
Each property needs to end in a semi-colon ( ; )
Use American English (color NOT colour. center NOT centre)

28. Useful CSS Styles
Padding
padding: top right bottom left;
padding: 10px 0 20px 0;
padding-left: length;
padding-right: length;
padding-top: length;
padding-bottom: length;
padding-right: 10px; padding-bottom: 10px;

29. Useful CSS Styles
Margin
margin: top right bottom left;
margin: 10px 0 20px 0;
margin-left: length;
margin-right: length;
margin-top: length;
margin-bottom: length;
margin-left: 5px; margin-bottom: 5px;

30. Useful CSS Styles
Background Color
background: color image repeat attachment position;
background: #fff url(image.jpg) no-repeat fixed left top;
background-color: color;
background-image: url(path/filename.ext);
background-repeat: repeat;
background-position: position;
background-attachment: scroll;
background-color: #abc123;

31. Useful CSS Styles
Borders
border: width style color;
border: 2px solid #2233FF;
border-left: width style color;
border-right: width style color;
border-top: width style color;
border-bottom: width style color;
border-left: 1px dotted #000; border-right: none;

32. Useful CSS Styles
Type
font: style variant weight font-size/line-height font-
family;
font: bold 15px/18px Georgia, "Times New Roman", Times, serif;
font-family: family-name;
font-size: size;
font-weight: weight;
font-style: style;
font-size: 16px; font-weight: bold; font-style: italic;

33. Common Questions
How do I change the background colour?
How do I change the menu colour?
How do I change my font or heading sizes?
All of these are easy, using Firebug!

34. Demo

35. Useful Links
Firebug FAQ’s - http://getfirebug.com/wiki/index.php/FAQ
Firebug Documentation - http://getfirebug.com/wiki/index.php/Main_Page
Handy online Color Picker - http://www.colorpicker.com
The CSS Box Model explained - http://css-tricks.com/the-css-box-model
List of CSS properties - http://reference.sitepoint.com/css/propertyref
Font families - http://line25.com/articles/semi-web-safe-fonts-to-spice-up-your-web-
designs
Font sizing - http://css-tricks.com/css-font-size
WordPress and CSS - http://codex.wordpress.org/CSS

36. Questions?

37. Thank You!
http://maddisondesigns.com
@maddisondesigns