Takaaki Kato

Email me at comments@takaaki.me or ping me at Twitter. You can also find me on GitHub.

By Takaaki Kato

Apr 20

Review: Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

One of the indispensable tools in developing web applications is Firebug. Firebug 1.5: Editing, Debugging, and Monitoring Web Pages by Chandan Luthra and Deepak Mittal from a publisher, Packt Publishing, is a general walk-through about the tool. While there are many Firefox add-ons, Firebug deserves as one whole book to talk about, and web developers might want to learn more about it. Firebug is so popular that even people who don’t even use Firebug install it. Having installed and having been using Firebug doesn’t at all guarantee that you are making use of it. It is like using an operating system. Many use a Mac and/or Windows. How many of them take advantage of it? I had an opportunity to receive a free review copy of the book, so I would like to write a review on the book.

The language used in the book is clean, plain and straightforward. No joking, no snobbish English. It is certain that non-native speakers of English can understand the text without a problem. This text can be taken as essentially complementary for many problematic screenshots appearing with the text. (The issues pertaining to the screencasts will be discussed later.) The book will bring you tons of I-didn’t-know-that experiences for current Firebug users. The book illustrates usage about Firebug. It’s not just about JavaScript. It discusses HTML, CSS, DOM and Ajax. Each tab on Firebug is carefully and satisfactorily explained. You will find many features that are often difficult even to notice. For example, are you familiar with:

  • how to read the output of profile,
  • how to auto-complete when you edit a node in DOM,
  • how to read all the color bars in Net tab,
  • console API, which offers more than just console.log(),
  • how to set conditional breakpoints,
  • how to search multiple files in CSS tab, and
  • how to filter user-defined properties, user-defined functions, DOM properties, DOM functions and DOM constants in DOM tab?

For those new to Firebug, this book serves as an excellent introduction while the book is still worthwhile reading for those who haven’t dug into the possibilities Firebug offers. I’m not sure if all the features are covered in the book, but I can safely say that the book covers most of them.

What’s noteworthy along with the clear explanation of Firebug usage is that the book goes beyond the scope. First, the book also discusses useful Firebug extensions. Firebug itself is expandable by its extensions. This is not just a list, but the authors explain each extension adequately. You can easily find many “must-have” lists on blogs, but each item is rarely explained in enough details on blogs I can find on the web. The extensions discussed in this book include:

  • YSlow
  • Firecookie
  • Pixcel Perfect
  • Firefinder
  • FireQuery
  • CodeBurner
  • SenSEO
  • Page Speed

The other impressive points about the book are: a) explaining how to make a Firebug extension and b) future for Firebug. I personally don’t plan to write a extension for Firebug, but a “Hello World!” example in the book gives a kick-start for those interested. The plans for versions 1.6 and 1.7 are neatly summarized. It gives you a good understanding of what Firebug will be able to do, what challenges Firebug is currently facing. Again if you consider developing an extension, the topics referred to in the section is no doubt beneficial.

Reading through the book, I have noticed lack of information about usage with JavaScript libraries. While one of the authors, Chandan Luthra, claims that he is fond of writing code in jQuery and Firebug. If you have ever used jQuery and Firebug, you might have noticed that Firebug has $ function, which jQuery also has. Which has a precedance? Do we see an error? Why? Nothing is referred to. jQuery is, in fact, presented in the book when the authors discuss Ajax calls. It might have been helpful to include any relevant information that could confuse JavaScript libraries users because a lot of the JavaScript coding happens on the library level.

Some editorial errors have been noticed. First, the screenshots on the PDF were quite blurry. It was impossible to read text in the screenshots. If you don’t have access to Firebug, this is a big issue, but fortunately both Firefox and Firebug are available for free and work on many platforms. If you cannot see the screenshots clearly, I suggest you actually download the code and follow the instruction to see what really happens. Second, keyboard shortcuts on the book are for Windows and Linux. Shortcuts for Mac are not mentioned. I am personally okay because I’m used to this situation as a guy using a Mac about a decade. If the publisher is serious about selling the books on web development, it is vital to take care of Mac users. Just randomly find any screencasts made by and for frontend developers. Many use a Mac as their primary development machine. This may sound trivial, but it tells me if the publisher is keeping up with what’s happening to web developers. If a publisher doesn’t get a trend among developers, how does the publisher make good books?

HTML examples shown in the book made me wonder if the authors are experts on the field. There is one instance when a tag name is spelled in capital letters (i.e., <HTML></HTML>). I haven’t seen this style for ages. But the biggest surprise was a font tag (i.e., <font face="monospace>"> ). Even for a discussion purpose, nobody uses the tag any more. Making a font type to monospace in CSS is much easier. If you work with teens, they don’t really know about the tag. I’m serious. In addition, indentation of the code is sometimes inconsistant. 4 column space was observed for the most of the code, but the rule was broken at some examples. This leads me to a question of whether I should buy a web development book from this publisher or not. Maybe this was entirely made by the authors, but why didn’t any reviewers point out the issues?

There was one passage I found particularly hard to comprehend. In explaining debugger features in Script tab, the authors write as follows:

  • Continue (F8): Allows us to resume the script execution once it has been stopped via another breakpoint
  • Step Into (F11): Allows us to step into the body of another function
  • Step Over (F10): Allows us to step over the function call
  • Step Out: Allows us to resume the script execution and will stop at the next breakpoint

(Emphases in original.)

The authors explain “Step Into” by using the phrase “step into”. It doesn’t explain what “step into” actually means. The same applies to “Step Over”. These terms may be familiar with those who have an experience with another debugger, but, all in all, the passage above explains nothing.

The bottom line: Firebug is a popular tool and it might be easy to find information on the web. With my experience, however, the quality of the explanations I read on the web is quite low, and they tend to be inadequate. This book provides a comprehensive yet friendly explanation in a digestible fashion for both new and existing Firebug users about its usage. As well, the book offers additional information that extends its usage. Despite the problems I identified above, this book is worth reading for many people.