Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney
1.
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.
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/
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
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;
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!
Firebug is a Firefox add-on that you can use to edit, debug & monitor CSS, HTML & Javascript\n
Firebug is an awesome website administrators secret weapon\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Click the icon in the toolbar at the top of your browser window.\nThis panel can be changed to either side of the browser or even detached completely.\n
Why is this important? It helps you to space out and align each element on your page.\nHelps you to work out the overall width & height of your element\nWidth = width + padding-left + padding-right + border-left + border-right\nHeight = height + padding-top + padding-bottom + border-top + border-bottom\n
Moving your cursor over the Box Model will show you rulers and guides over the selected HTML element\n
No need to go searching through the HTML code to find the relevant element. Simply use the inspect button\nThe relevant HTML will be highlighted along with the CSS styles\n
Basically, click on something on the left and styles are displayed on the right\n
Blue area is the inner “box”\nPadding is highlighted in purple\nMargins are highlighted in yellow\n
Provides info like height, width, margins, padding, colour etc.\n
The firebug menu lets you enable or disable a bunch of other features also\n
Right-clicking provides options to copy HTML or add new attributes \n
Changes you make to the HTML or CSS aren’t permanent so make a note of what you change.\nWhen you refresh the browser, any changes you’ve made within Firebug will return to their default styles.\nFirebug addon called Backfire will allow you to save your changes\n
Firebug will autocomplete when you start typing\nOn the right of the Style window, it will also tell you name of the CSS file (and even the line number) where it’s located\n
You can also use the page-up/page-down arrow keys to increment or decrement in tens.\nReally handy to fine tune elements on your page\n
\n
Three different ways to add a new property to your style definition\n
There’s a handy online Color Picker at http://www.colorpicker.com\n
Padding is the space inside your “box” between the border and the actual contents.\nMargins are the spaces outside the “box”, between the border and the other elements surrounding the object.\n
Padding is the space inside your “box” between the border and the actual contents.\nMargins are the spaces outside the “box”, between the border and the other elements surrounding the object.\n