Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney


Published on

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

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • \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

    1. 1. 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.
    2. 2. Put simply...Firebug is an awesome websiteadministrators secret weapon!
    3. 3. 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
    4. 4. What can it do? InspectView the HTML sourceon the fly
    5. 5. What can it do? InspectInspect HTML tagsand CSS properties
    6. 6. What can it do? InspectEdit HTML and CSSand see thosechanges instantly
    7. 7. What can it do? LayoutVisualise your pagelayout with Box Modelshading
    8. 8. What can it do? LayoutVisualise breakdownof each box in theBox Model
    9. 9. What can it do? LayoutView rulers andguides for pixelperfection layout
    10. 10. That’s not all...Log - Log events to the consoleProfile - Measure site performanceDebug - Provides a powerful debuggerAnalyse - Monitor network activity
    11. 11. Where can I get it? You can also get a lite version for Chrome
    12. 12. Enabling FirebugThe Firebug panel will open at the bottom of the browser
    13. 13. WTF is this Box Model?Every element on yourpage is a box thatconsists of Width,Height, Padding,Border & Margin
    14. 14. 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
    15. 15. Where’s the code?The Inspect button lets you select any element on your page using your mouse
    16. 16. Your new best Friends! The HTML panel displays the generated HTML The Style panel displays the CSS styles for the currently selected tag
    17. 17. Selecting your HTMLClick the HTML tag and the element will be highlighted Padding is purple Margins are yellow
    18. 18. 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
    19. 19. Hiding Quick InfoIf you don’t want the Quick Info box, simply hide it
    20. 20. Editing your HTML Click the HTML attributes or text to change them Use the Tab key to move to the next attribute
    21. 21. 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
    22. 22. Editing your CSS Click a property to change itWhen a Property is struck out, it means it’s been overridden by another style
    23. 23. Editing your CSSUse the Up/Down arrow keysto... Cycle through properties Increment or decrement numbers Increment or decrement by ten with Shift key
    24. 24. Editing your CSS Preview images and coloursDisable CSS properties by clicking the icon next to it
    25. 25. 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..."
    26. 26. 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)
    27. 27. 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;
    28. 28. 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;
    29. 29. 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;
    30. 30. 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;
    31. 31. 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;
    32. 32. 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!
    33. 33. Demo
    34. 34. Useful LinksFirebug FAQ’s - Documentation - online Color Picker - http://www.colorpicker.comThe CSS Box Model explained - of CSS properties - families - sizing - and CSS -
    35. 35. Questions?
    36. 36. Thank You! @maddisondesigns