Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney
Upcoming SlideShare
Loading in...5

Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney



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

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



Total Views
Views on SlideShare
Embed Views



8 Embeds 220 183 17 13 2 2 1 1 1


Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • \n
  • 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\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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney Presentation Transcript

  • 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.
  • Put simply...Firebug is an awesome websiteadministrators secret weapon!
  • 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
  • What can it do? InspectView the HTML sourceon the fly
  • What can it do? InspectInspect HTML tagsand CSS properties
  • What can it do? InspectEdit HTML and CSSand see thosechanges instantly
  • What can it do? LayoutVisualise your pagelayout with Box Modelshading
  • What can it do? LayoutVisualise breakdownof each box in theBox Model
  • What can it do? LayoutView rulers andguides for pixelperfection layout
  • That’s not all...Log - Log events to the consoleProfile - Measure site performanceDebug - Provides a powerful debuggerAnalyse - Monitor network activity
  • Where can I get it? You can also get a lite version for Chrome
  • Enabling FirebugThe Firebug panel will open at the bottom of the browser
  • WTF is this Box Model?Every element on yourpage is a box thatconsists of Width,Height, Padding,Border & Margin
  • Firebug’s Box ModelGet a visual breakdown ofeach box in the Box ModelIt shows you the width andheight of the innermost box,along with the size of thepadding, border & margin
  • Where’s the code?The Inspect button lets you select any element on your page using your mouse
  • Your new best Friends! The HTML panel displays the generated HTML The Style panel displays the CSS styles for the currently selected tag
  • Selecting your HTMLClick the HTML tag and the element will be highlighted Padding is purple Margins are yellow
  • 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
  • Hiding Quick InfoIf you don’t want the Quick Info box, simply hide it
  • Editing your HTML Click the HTML attributes or text to change them Use the Tab key to move to the next attribute
  • Editing your HTMLYou can also use the Edit button to change the HTML HTML & CSS changes appear as you typeMessed things up? Just refresh the browser window
  • Editing your CSS Click a property to change itWhen a Property is struck out, it means it’s been overridden by another style
  • Editing your CSSUse the Up/Down arrow keysto... Cycle through properties Increment or decrement numbers Increment or decrement by ten with Shift key
  • Editing your CSS Preview images and coloursDisable CSS properties by clicking the icon next to it
  • Adding to your CSSAdd new Properties by... Double-clicking the white area Editing the last value and hitting Tab Right-clicking and selecting "New Property..."
  • Useful CSS StylesText Colorcolor: #hexcode; color: #123456;Important points:Each property needs to end in a semi-colon ( ; )Use American English (color NOT colour. center NOT centre)
  • Useful CSS StylesPaddingpadding: 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;
  • Useful CSS StylesMarginmargin: 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;
  • Useful CSS StylesBackground Colorbackground: 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;
  • Useful CSS StylesBordersborder: 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;
  • Useful CSS StylesTypefont: 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;
  • Common QuestionsHow 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!
  • Demo
  • Useful LinksFirebug FAQ’s - Documentation - online Color Picker - http://www.colorpicker.comThe CSS Box Model explained - of CSS properties - families - sizing - and CSS -
  • Questions?
  • Thank You! @maddisondesigns