O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Instant Firebug Starter

Book Description

Monitor, edit, and debug any webpage in real time with this handy practical guide

  • Learn something new in an Instant! A short, fast, focused guide delivering immediate results.
  • Modify HTML on the fly
  • Profile and Debug JavaScript
  • Change the look and feel of any element

In Detail

With the advent of RIAs (Rich Internet Applications), most web pages are driven by a combination of JavaScript, AJAX, CSS, and so on. It is difficult for front end and web developers to debug and fix issues that crop up on client machines. Firebug helps to solve this; it is a wonderful toolkit to help identify and fix issues that would ordinarily take much longer to find and fix.

Firebug Starter is a practical, hands-on guide that provides you with a number of clear step-by-step exercises to help you take advantage of the full power that Firebug offers. This book will give you a great grounding in using Firebug to debug, fix, and optimize your web pages.

From installation to navigating the various panels to edit, inspect, and modify your webpages, this practical guide will help you through the wilds of Firebug without a single bite.

A step-by-step description of key features is provided with the help of simple and concise examples. Each chapter will help you understand the key features of Firebug with tips and tricks that will become the foundation of your knowledge in the future. The Firebug Starter can be used as an end-to-end guide or as a desk reference with sections that deal with all the key aspects of web development like CSS, Javascript, and AJAX.

This Firebug Starter guides you through the basics of Firebug and contains years’ worth of industry knowledge and expertise. This knowledge has been stripped back to 60 pages of useful insights, tips, tricks, and the latest techniques that will get you up to speed in no time.

Table of Contents

  1. Instant Firebug Starter
    1. Instant Firebug Starter
    2. Credits
    3. About the Author
    4. About the Reviewers
    5. www.packtpub.com
      1. Support files, eBooks, discount offers and more
    6. packtLib.packtpub.com
      1. Why Subscribe?
      2. Free Access for Packt account holders
    7. 1. Instant Firebug Starter
      1. So, what is Firebug?
        1. Firebug capabilities
      2. Installation
        1. Installing Firebug on Firefox
          1. Step 1 – what do I need?
          2. Step 2 – downloading Firebug
          3. Step 3 – adding Firebug to Firefox
          4. Step 4 – confirm Firebug installation
          5. Step 5 – restart Firefox
        2. Installing Firebug on non-Firefox browsers
          1. Live link
          2. Local link
        3. Bookmarklet
        4. And that's it!
      3. Quick start – Firebug window overview and inspecting
        1. Console panel
        2. HTML panel
        3. CSS panel
        4. Script panel
          1. Things you can perform under the Script panel
        5. DOM panel
        6. Net panel
        7. Cookies panel
        8. Inspecting page components
          1. Step 1 – open Firebug
          2. Step 2 – activate inspection tool
          3. Step 3 – selecting the element
          4. Quick inspect
        9. Editing page components
        10. Conclusion
      4. Top 17 features you'll want to know about
        1. Executing JavaScript on the fly
          1. Command editor
          2. Smart paste
        2. Using Console API
          1. console.log(object[, object, ...])
          2. console.debug(object[, object, ...])
          3. console.info(object[, object, ...])
          4. console.warn(object[, object, ...])
          5. console.error(object[, object, ...])
          6. console.assert(expression[, object, ...])
          7. console.dir(object)
          8. console.dirxml(node)
          9. console.trace()
          10. console.group(object[, object, ...])
          11. console.groupCollapsed(object[, object, ...])
          12. console.groupEnd()
          13. console.time(name)
          14. console.timeEnd(name)
          15. console.profile([title])
          16. console.profileEnd()
          17. console.count([title])
        3. Modifying an HTML element's attribute on the fly
        4. Adding a new attribute to an existing HTML element
        5. Deleting an HTML element
        6. Setting breakpoints on an HTML element
        7. Inspecting cascading rules
        8. Previewing colors and images
        9. Tweaking CSS on the fly
        10. Enabling and disabling CSS rules
        11. JavaScript profiling
          1. Columns and description of profiler
        12. JavaScript debugging
          1. Applying Script breakpoints
          2. Applying conditional breakpoints
        13. Inspecting DOM
        14. Network monitoring
          1. Description of information in the Net panel
          2. Load-time bar color significance
        15. Examining HTTP headers
        16. Monitoring AJAX requests
        17. Managing cookies
      5. People and places you should get to know
        1. Official Sites
        2. Articles and Tutorials
        3. Community
        4. Blogs
        5. Twitter