Firebug 1.5: Editing, Debugging, and Monitoring Web Pages


Author(s): Chandan Luthra, Deepak Mittal
ISBN: 1847194966
Published: April 2010
Relevance: 5/5
Readability: 5/5
Overall: 4/5

More Packt Publishing Books Reviews …

This book provides a comfortable way to learn quickly how to work with Firebug with many importants languages like HTML, DOM, JavaScript, CSS and Ajax. Through steps instructions and not overhelming heavy theory. The content offers a good basis for beginners with Firebug. Below the TOC of this book:

  • Chapter 01: Getting Started with Firebug
  • Chapter 02: Firebug Window Overview
  • Chapter 03: Inspecting and Editing HTML
  • Chapter 04: CSS Development
  • Chapter 05: JavaScript 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

Starting quickly with an introduction for Console tab following with the Command line JavaScript, explaining its internal components like Clear, Profile, Persist, following with the section Errors and warnings explaining how they are useful for our development, the author teaches us too about the JavaScript commands which is related with >>>, including the differents levels of message that we can use with console like debug, info, warning, and error. An image about this features is available.

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.

Chapter 05: JavaScript Development

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.

The last section is JavaScript debugging, well covered, including JavaScript code and many images about how debug, explanation about the buttons like Continue,Step Into, Step Over, and Step Out under the Script tab. Well covering too for Conditional breakpoints working with other JavaScript code which uses an array and we iterate each element through of a for loop but with the intention to go more position that the size array, therefore we have the problem of a null element, then the author teaches us how add a condition, when we run the code again, we will notice that the execution of the JavaScript is paused on the line where we inserted a conditional breakpoint; all these features and steps are shown with images.

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.

We follow with Modifying DOM on the fly based with descriptive theory and an image, be aware that the DOM editor is a miniature JavaScript command line. Other important features offered by Firebug is Adding/removing the DOM elements’ attributes covered practically in five pages with many images and concrete theory.

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.

We follow with Debugging AJAX calls using properties of a console object covering with javaScript snippet code and images the follow sub topics console.debug, console.assert, console.dir.

Chapter 09: Tips and Tricks for Firebug

The shortest chapter, starting quickly with the section Magical cd() which includes a HTML code working with two iFrames and each HTML file includes JavaScript code, then the author through the command line use for example cd(window.parent.frames[1]) and other variations to show you how work this method, you can see how the JavaScript methods are called and executed according of the actual reference location provided by cd(). The author follow with the section The hierarchical console working with and console.groupEnd() methods within a JavaScript code, images about how work these methods and the result output are available. The last section is Configuring Firebug to our taste where the author with images teaches us how customize shortcuts.

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

  • YSlow
  • Firecookie
  • Pixel Perfect
  • Firefinder
  • FireQuery
  • CodeBurner
  • SenSEO
  • 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

  • chrome.manifest
  • install.rdf (explaining important parameters)
  • helloWorldOverlay.xul
  • helloWorld.js

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.

The book teaching approach is well done, covering practically from the scratch the most important topics to learn quickly Firebug to work together with HTML, DOM, JavaScript, CSS and Ajax. You going to learn how edit, add, remove in real time or on the fly with the source code, you can see clearly how Firebug do easier your development life for the Web, furthermore including valuable images about the manipulation and edition of your source code through HTML, DOM, JavaScript, CSS.

Practically to give you a global idea, see the TOC above and return here, therefore consider practically that each chapter includes concrete and well explained theory, good amount of snippet code for HTML, DOM, JavaScript, CSS and Ajax, easy steps instructions to follow, images to give a better idea about what you should expect. Even covering with an overview some third-party tools and including something important Performance Tuning.


More Packt Publishing Books Reviews …


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s