Firebug is a free and open source tool, available as a Mozilla Firefox extension, which allows debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript. Firebug 1.0 beta was released in December 2006. Firebug usage has grown very quickly since then. Approximately 1.3 million users have Firebug installed as of January 2009. It is a very popular tool among web developers to aid during web application development.
The book begins with the steps to install Firebug, followed by an overview of the Firebug window. We will get the basic idea of Firebug and movement across the different panels and tabs within Firebug.
From there, we will make our way towards more advanced usages of each tab, such as CSS development, JavaScript development, and DOM modification. This will aid us during client-side development and debugging of RIAs. We will also learn to use Firebug for performance tuning our application on the browser. We have also dealt with the tracking of XMLHttpRequest and XMLHttpResponse during AJAX development, which is also an integral part of RIAs. We will also learn a few tips and tricks for Firebug that will help us in configuring Firebug according to our taste and make it a pleasurable experience to work with it.
Once we are comfortable with the usage of Firebug, we will learn to install and use some popular Firebug extensions. This will be followed by a discussion on how to develop our own Firebug extension.
Chapter 1: Getting Started with Firebug gives a quick introduction to Firebug, its origin and history, who should use Firebug, and a glimpse of Firebug's main features, hoping that this will spark your interest in both Firebug and the rest of this book.
Chapter 2: Firebug Window Overview explains Firebug's tabs and what they are used for.
Chapter 3: Inspecting and Editing HTML provides an understanding of using Firebug to inspect, edit, search, and play with the HTML source of the document.
Chapter 4: CSS Development aims to help the reader to understand the useful tools and utilities provided by Firebug for CSS development.
Chapter 5: JavaScript Development explains command line API, console API of Firebug, and debugging JavaScript in detail.
Chapter 6: Knowing your DOM gives a small introduction to DOM as well as discussing how to modify/edit values of properties and constants of any DOM object using Firebug.
Chapter 7: Performance Tuning Our Web Application explains various ways to analyze the performance of your web application on the browser.
Chapter 8: AJAX Development discusses how to track XmlHttpRequest and XmlHttpResponse as well as debugging AJAX calls.
Chapter 9: Tips and Tricks for Firebug discusses a few tips and tricks that can be very useful while debugging and developing. We have explained how to play with the features that Firebug provides and what other things you should know about Firebug.
Chapter 10: Necessary Firebug Extensions explains some of the Firebug extensions, such as YSlow, FireCookie, Page Speed, and so on. They are useful for development and performance tuning.
Chapter 11: Extending Firebug discusses the steps to develop a Firebug extension. We have also discussed how to set up a development environment, along with file and directory structure for the extension.
Appendix, A Quick overview of Firebug's features and options gives a quick reference for various Firebug features and options.
We will need Mozilla Firefox v 3.5 - 3.6 installed on our systems. We also need Firebug 1.4 - 1.5 installed on top of it. The latter is not a prerequisite as we will discuss how to install it during the course of the book.
Having an Internet connection would be an added advantage as the examples provided run on top of live websites. This will also help us in learning to install and use Firebug extensions.
The target audience is front-end web developers who are building software and pages using HTML, CSS, JavaScript, and AJAX, and want to learn Firebug. The book assumes that the reader has 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.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "We can include other contexts through the use of the include directive."
A block of code will be set as follows:
<body> <font face="monospace"> Enter a number to calculate its factorial <input type = "text" name="searchBox"onkeyup="calculateFactorial(this.value,event)"/> </font> </body>
When we wish to draw your attention to a particular part of a code block, the relevant lines or items will be shown in bold:
initialize: function() {
Firebug.Panel.initialize.apply(this, arguments);
},
getOptionsMenuItems: function(context)Any command-line input or output is written as follows:
/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in our text like this: " If we want the information to persist, then we can click Persist button on the Console tab.
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply drop an email to <[email protected]>, and mention the book title in the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Visit http://www.packtpub.com/files/code/4961_Code.zip to directly download the example code.
Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in text or code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration, and help us to improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to any list of existing errata. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.