Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages
eBook: $20.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $55.98    Print cover: $34.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters


  • Expand your toolkit by learning to use Firebug to help you monitor, debug, develop and edit web pages on the fly
  • Create your own Firebug extensions and learn about popular third-party extensions
  • Covers JavaScript, AJAX, and CSS development
  • Covers all of Firebug's features
  • Clear explanations with easy-to-follow examples of HTML and JavaScript

Book Details

Language : English
Paperback : 224 pages [ 235mm x 191mm ]
Release Date : April 2010
ISBN : 1847194966
ISBN 13 : 9781847194961
Author(s) : Chandan Luthra, Deepak Mittal
Topics and Technologies : All Books, Web Development, AJAX, Open Source, Web Development

Table of Contents

Chapter 1: Getting Started with Firebug
Chapter 2: Firebug Window Overview
Chapter 3: Inspecting and Editing HTML
Chapter 4: CSS Development
Chapter 5: JavaScript Development
Chapter 6: Knowing Your DOM
Chapter 7: Performance Tuning Our Web Application
Chapter 8: AJAX Development
Chapter 9: Tips and Tricks for Firebug
Chapter 10: Necessary Firebug Extensions
Chapter 11: Extending Firebug
Appendix: A Quick Overview of Firebug's Features and Options
  • Chapter 1: Getting Started with Firebug
    • What is Firebug?
    • The history of Firebug
    • The need for Firebug
    • Firebug capabilities
    • Installing Firebug on different browsers
      • Installing Firebug on Firefox
      • Installing Firebug on non-Firefox browsers
    • Opening and closing Firebug
    • Firebug modes
      • Dock view
      • Window mode
    • Summary
  • Chapter 2: Firebug Window Overview
    • Console tab
      • Command line JavaScript
      • Errors and warnings
        • Status bar error indicator
        • Errors can be descriptive and informative
        • Executing JavaScript commands
    • HTML tab
      • The hierarchy of DOM nodes (the HTML source panel)
        • Options for HTML source panel
      • Editing HTML on the fly
        • Editing an existing attribute of HTML element
        • Editing an HTML element
      • Logging events
    • CSS tab
      • CSS inspector
      • List of CSS files
      • Modifying CSS
    • Script tab
    • DOM tab
    • Net tab
    • Summary
  • Chapter 3: Inspecting and Editing HTML
    • Viewing source live
    • Seeing changes highlighted
    • Modifying the source on the fly
      • How to modify the value of an HTML attribute
      • How to add a new attribute to an existing HTML element
      • How to delete an HTML element
      • How to modify the source for an HTML element
    • Inspecting page components, editing, and reloading
    • Searching within an HTML document
    • Finding an HTML element on the page
    • Copying HTML source for an HTML element
    • Setting breakpoints on HTML element
    • Summary
  • Chapter 4: CSS Development
    • Inspecting cascading rules
    • Preview colors and images
    • Tweaking CSS on the fly
    • Enabling and disabling specific CSS rules
    • Inspecting our stylesheet
    • Modifying CSS from Firebug's UI
    • Inspecting and tweaking the box model
    • Searching under the CSS tab
    • Summary
  • Chapter 5: JavaScript Development
    • The command line API
      • $(id)
      • $ $$(selector)
      • $x(xpath)
      • dir(object)
      • dirxml(node)
      • clear()
      • inspect(object[, tabName])
      • keys(object)
      • values(object)
      • debug(fn) and undebug(fn)
      • monitor(functionName) and unmonitor(functionName)
      • monitorEvents(object[, types])
      • unmonitorEvents(object[, types])
      • profile([title]) and profileEnd()
        • Columns and description of the profiler
    • The console API
      • console.log(object[, object, ...])
      • console.debug(object[, object, ...])
      •[, object, ...])
      • console.warn(object[, object, ...])
      • console.error(object[, object, ...])
      • console.assert(expression[, object, ...])
      • console.dir(object)
      • console.dirxml(node)
      • console.trace()
      •[, object, ...])
      • console.groupCollapsed(object[, object, ...])
      • console.groupEnd()
      • console.time(name)
      • console.timeEnd(name)
      • console.profile([title])
      • console.profileEnd()
      • console.count([title])
    • JavaScript debugging
      • Steps to debug JavaScript code with Firebug
      • Conditional breakpoints
    • Summary
  • Chapter 6: Knowing Your DOM
    • Inspecting DOM
      • Filtering properties, functions, and constants
    • Modifying DOM on the fly
      • Auto-complete
      • Losing the starting element
    • Adding/removing the DOM elements' attributes
      • Removing attributes
      • Adding attributes
    • JavaScript code navigation
    • Summary
  • Chapter 7: Performance Tuning Our Web Application
    • Network monitoring
      • Description of information in the Net panel
      • Load-time bar color significance
        • Browser queue wait time
    • Breaking down various requests by type
    • Examining HTTP headers
    • Analyzing the browser cache
    • XMLHttpRequest monitoring
    • How to find out the download speed for a resource
    • Firebug extensions for analyzing performance
    • Summary
  • Chapter 8: AJAX Development
    • Tracking XmlHttpRequest
      • Request/response headers and parameters
      • GET/POST request
    • Viewing live modifications on DOM
    • Debugging AJAX calls using properties of a console object
      • console.debug(object[, object, ...])
      • console.assert(expression[, object, ...])
      • console.dir(object)
    • Summary
  • Chapter 11: Extending Firebug
    • Setting up an extension development environment
      • Setting up the development profile
      • Development preferences
    • Getting started with a small "Hello World!" extension of Firebug
      • The chrome.manifest file
      • The install.rdf file
      • The helloWorldOverlay.xul file
      • The helloWorld.js file
      • Packaging and installation
    • Taking "Hello World!" to the next level
      • The "prefs.js" file
      • The "helloWorld.js" file revisited
    • Summary
  • Appendix: A Quick Overview of Firebug's Features and Options
    • Keyboard and mouse shortcuts reference
      • Global shortcuts
      • HTML tab shortcuts
      • HTML editor shortcuts
      • HTML inspect mode shortcuts
      • Script tab shortcuts
      • DOM tab shortcuts
      • DOM and watch editor shortcuts
      • CSS tab shortcuts
      • CSS editor tab shortcuts
      • Layout tab shortcuts
      • Layout editor shortcuts
      • Command line (small) shortcuts
      • Command line (large) shortcuts
    • Console API reference
    • Command line API reference
    • Firebug online resources
    • Features expected in future releases of Firebug
      • Firebug 1.6
        • Some improvements in this version
      • Firebug 1.7
        • Separate modules and panels
        • Components replaced by SharedObjects
        • Recode TabWatcher/DOMWindowWatcher
        • Sandboxed extension loading
        • Memory panel

Chandan Luthra

Chandan Luthra is an agile and pragmatic programmer, and an active participant at the local open source software events, where he evangelizes about Firebug, Groovy, Grails, and JQuery. He is a Linux and open source enthusiast. He also involves himself in writing blogs, articles, and is an active member on various tech-related mailing lists. He has developed web apps for various industries, including entertainment, finance, media and publishing, as well as others. He loves to share his knowledge and good coding practices with other team members in order to perfect their development skills. In his free time, he loves to contribute to open source technologies. He also loves to code in JQuery with Firebug, which makes development very easy for him. He is a fond lover of Firebug and has been using it since 2007 and co-authored a book on Firebug 1.5 with Packt Publishing in the year 2010.

Deepak Mittal

Deepak Mittal is a software developer based in New Delhi, India, and he has been involved with software engineering and web programming in Java/JEE world since the late 1990s. Deepak is a Linux and open source enthusiast. He is an agile practitioner and speaks about open source, agile processes, and free software at various user group meetings and conferences. He has designed and built web applications for industries including pharmaceutical, travel, media, and publishing, as well as others. He loves to explore new technologies and has been an early-adopter of quite a few mainstream technologies of today's world. In early 2008, he co-founded IntelliGrape Software, an agile web application development company focused on Groovy and Grails. At IntelliGrape, he has been occupied with building world class applications on Grails and also mentors and trains other team members. Deepak is a veteran user of Firebug and has been using it since 2006.
Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 4 submitted: last submission 07 Apr 2014

Errata type: Typo | Page number: 68 | Errata date: 19 June 10

Title "$ $$(selector)" should be "$$(selector)"


Errata type: Others | Page number: 33 | Errata date: 19 June 10

Please ignore this line: Please note the difference between the old and new CSS styles in the previous and next screenshot.


Errata type: Technical | Page number: 177 | Errata date: 30-10-13

In the section "Packaging and installation", the content should be

Now we are done with this small example of Hello World! extension; it is ready to be packaged and installed. Packaging the extension is very simple, we only need to compress (ZIP) the contents (files and folder) of the root directory into a single zippy file with .XPI as the file extension.
In our example, the root directory is helloWorld.

    On Ubuntu:

                 $ cd helloWorld
                 $ zip –r myExtension.xpi *

    On Windows:
  1. Select all contents of the root directory.
  2. Right-click on the selected content and select Send to… | Compressed (Zipped) folder.
  3. Rename the new zipped file and change the file extension from .zip to .xpi.

After packaging the extension, open the zippy file with Firefox by dragging the zippy (.xpi) file into the Firefox window. Firefox will then check the version compatibility and after that a small window will open asking to install the extension.


Errata type: Typo | Page number: 186 | Errata date: 05-11-13

In the last table "HTML inspect mode shortcuts", the Task/operation called "Insect child" should be "Inspect child".

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages +    phpList 2 E-mail Campaign Manager =
50% Off
the second eBook
Price for both: $30.90

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book


  • Explore Firebug's tabs and their functions
  • Understand how to use Firebug to inspect, edit, search, and play with the HTML source of the document
  • Get to grips with useful tools and utilities provided by Firebug for CSS development
  • Learn the command-line API and console API of Firebug and debugging JavaScript
  • Modify the values of properties and constants of any DOM object using Firebug
  • Discover various ways to analyze the performance of your web application on the browser
  • Learn how to track XmlHttpRequest and Response as well as debugging AJAX calls
  • Tips and tricks to experiment with the features that Firebug provides
  • Explore Firebug extensions like YSlow, FireCookie, and Page Speed that are useful for development and Performance tuning
  • Develop a Firebug extension and learn how to set up a development environment, file, and directory structure for it

In Detail

With the advent of RIA (Rich Internet Applications), most web pages are driven by a combination of JavaScript, AJAX, CSS, and so on. Web developers and designers find it hard to debug and fix the issues that crop up on the client side. Firebug is a wonderful toolkit to have in your arsenal for handling all such issues. This book covers all of Firebug's features and will help you utilize its capabilities with maximum efficiency. AJAX development and debugging is not one of the easiest tasks; this book explains step-by-step, how to develop and debug AJAX components in your web page in a very easy way, thereby increasing your productivity. Topics like performance tuning of the web page are covered in detail.

This book discusses how to become more efficient in various aspects of web development by using Firebug. It is a very easy-to-understand, step-by-step guide that explains all the features of Firebug with concise and simple examples. With this book in hand, you will be able to deal with the painful areas of web development like JavaScript and AJAX debugging using Firebug.

The book takes you from the basics of Web Development like editing HTML and CSS on the fly to advanced features like AJAX, JSON, Monitoring, and Performance Tuning of web pages. It assumes that you have some very basic knowledge of HTML and JavaScript. For those of you with a sound knowledge of these technologies, this book can help you increase your productivity by using Firebug effectively, taking full advantage of its rich and powerful features and the console API. Towards the end, the book explains how to create your own powerful extensions for the Firebug community. 

This practical guide will equip you with the skills to edit, debug, and monitor web pages using Firebug


A step-by-step description of each key feature is provided with the help of simple, easy-to-understand examples. There are plenty of useful screenshots in each chapter. Every chapter contains information as well as tips and tricks to draw your attention towards some useful information or reference. Each aspect of web development like CSS or JavaScript is handled independently so that you can refer to those modules in which you are interested.

Who this book is for

This book is written for frontend web developers building software and pages using HTML, CSS, JavaScript, and AJAX, who want to learn Firebug for the reasons outlined above. The book assumes that readers have a very basic knowledge of HTML, JavaScript, and CSS. The examples in the book can be understood by someone who has just been introduced to web development.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software