Author(s): Chandan Luthra, Deepak Mittal
Published: April 2010
- Chapter 01: Getting Started with Firebug
- Chapter 02: Firebug Window Overview
- Chapter 03: Inspecting and Editing HTML
- Chapter 04: CSS Development
- Chapter 06: Knowing Your DOM
- Chapter 07: Performance Tuning Our Web Application
- Chapter 08: AJAX Development
- Chapter 09: Tips and Tricks for Firebug
- Chapter 10: Necessary Firebug Extensions
- Chapter 11: Extending Firebug
Now an expanded summary for each chapter
Chapter 01: Getting Started with Firebug
The author cover quickly this chapter with concrete theory about the introduction of Firebug, its history and installation, even including something interesting, the installation in two ways with Firebug Lite into other Web Browsers like IE, Safari and Opera.
To end the chapter the author introduce and includes some images about the Firebug modes, Dock view and Window mode.
Chapter 02: Firebug Window Overview
Now we turn to the HTML tab explaining the differents subtabs available and showing how to work with the hierarchy of DOM nodes, you can see in real time the source code and the output result together in a window, it is explained with an image, each option for HTML source panel is explained too, the author teaches us too how edit the HTML source code on the fly like attributes, HTML elements, all this covered with images, something interesting which is cover too is the Logging events for some HTML element.
We follow with the CSS tab covering quickly with an image and theory the CSS inspector and List of CSS files, in case if a web page has many .css files, something interesting is how modify the CSS content, images about how it work is available.
The follow topics are covered quickly with concrete theory and images, but gives you an overview, don’t worry, in other chapters they are explained deeply, they are Script tab, DOM tab, Net tab.
Chapter 03: Inspecting and Editing HTML
Here we start quickly with the section Viewing source live where the author offer us an image where you can see in real time the source code and the output result for a table, even including an example of jQuery to add a last row in the table, you can see the final result output through an image.
The author teaches us quickly how see changes highlighted feature, through an image and concrete theory, we follow with something important about how modify the source on the fly like HTML attribute, add a new attribute to an existing HTML element , delete an HTML element, modify the source for an HTML element, all these features covered with step instructions and images to complement the idea.
The follow covered is the section Inspecting page components, editing, and reloading based in steps instructions and images to see how it work. To end the chapter using the same approach used about steps instructions and images the follow topics are covered.
- Searching within an HTML document
- Finding an HTML element on the page
- Copying HTML source for an HTML element
- Setting breakpoints on HTML element
Chapter 04: CSS Development
This is a short chapter, starting with the section Inspecting cascading rules where the author teaches us with steps instructions and with an image where contains three internal frames, the first in the top is the html web page itself and in the left bottom the second the HTML source code and in the right bottom the CSS rules, you can see if you choice a HTML element immediately in the CSS frame you see the style or rule applied for such HTML element.
An important section is Tweaking CSS on the fly, where the author teaches us with steps instructions and with images an example about how edit a h3 HTML element through its CSS rules applied to it but in the fly, this is very useful for development purposes, in this case changing the color property. Re using the same previous code the author proceed to teaches us Enabling and disabling specific CSS rules where with concrete steps instructions and with two images you see how the author disable a CSS rule and you see the new result changes applied.
Two last sections important are covered quickly with concrete theory and images, the first is Inspecting and tweaking the box model where an image contains a graphic showing in real time the margin, padding, border applied for a HTML element, and Searching under the CSS tab useful in case to have a good amount of css rules.
The approach of this chapter is mostly introduce many methods with its respective concrete theory or description and snippet code and its respective image about the output result. Starting with The command line API which cover useful methods like $(id), $$(selector), dir(object), inspect(object[, tabName]), monitorEvents(object[, types]) and more, the follow covered is The console API which cover many methods but only listed and explained with short theory. If you want to see more methods covered for these sections, see the TOC.
Chapter 06: Knowing Your DOM
Starting quickly with the section Inspecting DOM where with steps instructions and two images you use the DOM tab to see the DOM properties of a HTML element. The follow section is Filtering properties, functions, and constants covered with many images and the author explains too the colors used by Firebug to do difference for many components of the DOM element like user-defined function, DOM-defined property and others.
Chapter 07: Performance Tuning Our Web Application
This chapter has a good amount of images, covering many features and options for each section as follows, starting with the section Network monitoring including a table explaining the Description of information in the Net panel and Load-time bar color significance.
Among many sections covered in this chapter, with the same approach mentioned, some interesting are Examining HTTP headers, Analyzing the browser cache and XMLHttpRequest monitoring.
Chapter 08: AJAX Development
Starting quickly with the section Tracking XmlHttpRequest which works with request/response headers and parameters, it is based with two example codes of jQuery working with JSON one for GET request and the second for POST request, you can see after of the execution code that the author do an analysis and explanation of the return results with the Console Tab which contains three tab pages which are Headers, Response and JSON, many images to get a better understanding are available.
The follow section is Viewing live modifications on DOM which do reference to a previous example which return populate a div element returned by the server after of an ajax call, this is covered with images.
Chapter 09: Tips and Tricks for Firebug
Chapter 10: Necessary Firebug Extensions
This chapter do a good overview about many extensions available for Firebug, covering with valuable concrete information and important amount of images the follow
- Pixel Perfect
- Page Speed
Chapter 11: Extending Firebug
Starting quickly with the section Setting up an extension development environment covered with steps instructions, command instructions, and images, furthermore important preferences need it to set before developing an extension are listed and explained. The author too list and explain a good amount of extensions that would install into Firefox for debugging and development purposes; like Venkman, Console2, Chromebug, SQLite Manager and others.
Then the author follow with Getting started with a small “Hello World!” extension of Firebug which includes an image about the directory structure, following with the introduction of some files need it, including its content like
- install.rdf (explaining important parameters)
Following with Packaging and installation based with many images through the different steps required.
To end the chapter the author add an enhance to the previous source code which consist in attach a drop-down list of options, to do this some new files are included like prefs.js and helloWorld.js (re edited), image of desired result output is available.