Archive for the 'Firebug Docs' Category

Firebug Start Button

Wednesday, August 3rd, 2011

A lot of questions on Firebug newsgroup have been related to Firebug icon recently (available on Firefox status bar in the past). This icon is quite important piece of Firebug UI since it represents Firebug entry point and it’s also the only thing visible after Firebug is installed. Since the Firefox status-bar has been abandoned in Firefox 4, this icon has been moved to Firefox toolbar (since Firebug 1.7).

This UI shift was also the result of a feedback we have got last year.

Anyway, if you prefer having the icon at the bottom (e.g. because it’s closer to the actual Firebug UI), you can customize your Firefox toolbars and move the existing Firebug (toolbar) button on Add-on bar.

Here is what you need to do to start toolbar customization.

In order to open Customize Toolbar dialog, right click on Firefox tab-bar area and pick Customize…

Don’t forget to also check the Add-on Bar menu item so, the Add-on Bar is displayed and you can drop the button on it.

Since the button is on the toolbar already, you won’t see it in the Customize Toolbar dialog. Just drag the button from the toolbar and drop it on the Add-on bar and you are done!

If you still insist to have the good old Firebug icon available – set the following preference to true: extensions.firebug.showStatusIcon

Please post feedback in the newsgroup, thanks!

Jan Honza Odvarko

Crossfire: Multiprocess Cross-browser Open Web Tools Protocol

Thursday, April 28th, 2011

Most Web developers write for all Web browsers, but their development tools only work on one browser. To the extent that browsers are standard, this works out.  Except when it doesn’t. Then you are stuck trying to use the unfamiliar development tools in another browser. Moreover, some browsers have better or different support for development tools. The Crossfire project aims to provide a way for development tools to work cross-browser.

Michael Collins and I wrote a paper describing the Crossfire protocol and system for Splash/Wavefront. A PDF preprint is now available. We describe both some aspects of the remote protocol and discuss the evolution of the Firebug source code into client/server code using Crossfire.

The Crossfire project benefits from many contributions, so I encourage you to read the Acknowledgments section first and to add your name to that list by pitching in to help us push this project over the finish line.


Please post comments or suggestions on the newsgroup.

Naming Anonymous JavaScript Functions

Thursday, April 28th, 2011

Tired of ?() or anonymous in your call stack in Firebug. Me too! Fortunately Salman Mirghasemi has a solution: a new algorithm for Naming Anonymous JavaScript Functions detailed in a paper by Salman, John J. Barton (that’s me), and Prof. Claude Petitpierre submitted to Splash/Wavefront 2011.

A few key points from the paper:

  • Among the 90,000 functions in 10 libraries surveyed, less than 7% were named.
  • The name-guessing schemes in Firebug and Web Inspector guess right …sometimes 😉
  • Anonymous functions are used in lots of complex ways!
  • The Static Function Object Consumption algorithm names 99% of the the functions.
  • The new algorithm generalizes the approach used by existing tools.

The paper shows examples from many popular libraries like jQuery, dojo, ExtJS, and so on.

The algorithm only requires a parser, so its easily implemented in JavaScript engines. Since Firebug does not have a JavaScript parser, we have to start by borrowing one.


For comments and suggestions, please post to the Firebug newsgroup.

Firebug Velocity Demo June 23, 2010

Tuesday, June 22nd, 2010 has the final demo web page for our Velocity demo.  We are in the Lightning Demo session at 10:40am on Wednesday.  If you want to reproduce the demos you will need to install the extensions.


Please post comments in the newsgroup.

Firebug book by Luthra and Mittal

Sunday, June 6th, 2010

There’s a now a new way to learn about Firebug: “Firebug 1.5: Editing, Debugging, and Monitoring Web Pages,” by Chandan Luthra and Deepak Mittal, published by Packt Publishing.  This book examines Firebug features in a straight-forward, easy-to-ready manner, including lots of annotated screen shots and examples. Luthra and Mittal go beyond the basics to survey Firebug extensions, give pointers to creating your own extension, tabulate options and shortcuts, and to summarize Firebug future plans.

For new users this book introduces the individual panels as you’d expect but it also highlights the way Firebug interconnects information across panels. That combo provides a solid foundation for anyone picking up Firebug for the first time. The middle part of the book, on AJAX debugging and performance tuning, give an additional boost to the beginner. Introducing Firebug’s growing ecosystems of developer tools helps the new user branch out as soon as they get the basics down.

But experienced users may also be interested. Many Firebug users focus on one aspect of the tool. This book will help them see opportunities in areas they may not have explored.  Firebug  has lots of stuff inside: Luthra and Mittal provide a new way to understand it.


Firebug at Velocity 2010 Santa Clara, CA June 23

Monday, May 3rd, 2010

We’ll be showing a quick Firebug demo at Velocity again this year. We are on Wed. morning June 23.  I’ll try to highlight a couple of new things from the Net panel and the new breakpoints, using break on XHR for the example.

Lightning Demos Andreas Grabner (dynaTrace Software), John J. Barton (IBM), Stoyan Stefanov (Yahoo! Inc), Bryan McQuade (Google).

The promoter says you can put the code vel10fsp in when you register to get 20% off.


Comments in the newsgroup please.

Firebug Dreams

Thursday, March 18th, 2010

Some ideas for Firebug beyond Firebug 1.6 and 1.7:

Javascript edit and go: Currently you can edit the DOM values, CSS rules, and HTML elements and attributes. But you can’t edit the Javascript. So JS developers miss out on the quick-let’s-just-see model so popular and powerful for other users of Firebug.

Automatic or Query-based Logging: Now we have to edit our Javascript to add console.log() statements. Some times we just want to know: what code runs when I do this? A simple way to summarize the execution path would be automatically inserted console.log() calls on every function call or every call matching a pattern and so on.

CSS by Example: If you know CSS, Firebug let’s you into tweek a page to perfection. But what about the rest of us? Every time I mess with CSS I have to spend most of the time reading docs or looking up examples. I’d like a “for example” mode that shows me just a bunch of different thing CSS can do to an element.

CSS Connectors: Actually I don’t know how to name this or exactly what I want. I do know that want fluid layout but I don’t want to read forty different ways to do three column layout again. Maybe we can extend the Firebug inspector to show the box hierarchy and/or the boxes that the selected box is directly related to.

Live Object Sites: By a large margin the most requested feature for Firebug is Issue 179, Create a unified patch from CSS changes. As you can see in that issue there are two Firebug extensions that solve this for some cases. Our work on 1.6 should make those extensions easier to install and update. But this is just the start: we want every kind of edit to be synchronized. Maybe should also explore more aggressive approaches like Dan Ingalls’ Lively Kernel.

Memory Analysis: As Web applications grow and grow we are increasingly running into memory limitations. Analyzing memory usage is hard; I think we need several different approaches. We are looking at trying to use a Memory analyzer created by Dion Almer and Atul Varma and their colleagues. It gives you the number and sizes of objects. We’ve also discussed a “high memory” analyzer,  part of a JS function profiler that would just tell you which functions bumped up the high-water mark, a very fast way to pinpoint a serious problem. Another critical tool would find back links for a given live object: why isn’t this one being garbage collected?

Widget-set Debugging: Many Web pages these days are built on toolkits like Dojo, ExtJS, jQuery, or Scriptaculous. Users at the toolkit level think in terms of widgets and events of the toolkit, so debugging at the HTML and DOM event level is tedious and confusing. Firebug should have direct support for toolkit debugging.

Code Coverage: Lots of folks use test-driven development or at least have some test suite for their code. We need some easy to use ways of finding out what parts of the code are not being touched by our test suites. We also need to know what  HTML and CSS does not actually contribute to the page even if it is shipped to users.

Integrated Debugger Environment: Firebug should support multiple simultaneous views of more than one panel and have better integration support with editors and Web servers.

FireCrystal and WhyLine: Stephen Oney in Prof. Brad Myers’ group at CMU has a very cool prototype for a graphical tracing tool called FireCrystal; it animates a time line with snap shots of the Web page so you can find out when a particular UI change happened or study the graphical update in slo-mo. A former student of Prof. Myers, Andy Ko, now a Professor at U Wash., created a Java debugger for graphical applications that supports query-style debugging. I’d love to explore the potential for these ideas in Firebug.

Finally, I am collaborating with Salman Mirghasemi and Prof. Claude Petitpierre from Ecole Polytechnique Fédérale de Lausanne, on Salman’s new approach to conditional breakpoints (well that hardly does the justice to the idea) and we hope to bring some of these ideas into Firebug.

The Firebug issues list has a lot of other great ideas for enhancements.  If you have a cool idea or suggestion not on one of these lists, please let us know in the newsgroup.


Firebug at WWW 2010!

Thursday, February 18th, 2010

Our paper Dynamic and Graphical Web Page Breakpoints was accepted as a technical paper for WWW2010 in Raleigh, North Carolina, USA, April 26-30.

We updated the paper with the latest 1.6/1.5.1 screen shots. Most of these images are also in the breakpoints demo page. A few images from the demo did not make it into the paper and they still show the 1.5.0 user interface.


Followup in the newsgroup please.

Dynamic and Graphical Web Page Breakpoints

Tuesday, November 3rd, 2009

Jan “Honza” Odvarko and I have submitted “Dynamic and Graphical Web Page Breakpoints” on the 1.5 breakpoints to WWW 2010.  It motivates the various breakpoints, describes the user experience and the implementation, then relates this breakpoint work to academic papers.

If you want the Cliff Notes version, we also have a demo page. And of course if you like interactive versions, you can just install Firebug 1.5b1 and use the breakpoints on your project now.


Follow up in the newsgroup please.

dojo FAQ on eval debugging out of date

Monday, November 2nd, 2009

Update: toonetown fixed the FAQ entry, Thanks!

The popular dojo toolkit has an FAQ entry about Firebug,which is wildly out of date. It talks about eval() debugging as it was back in 2007. Since Firebug 1.2 we’ve had support for the dojo loader, and as far as I know it works well.

Since the problem reported in the FAQ was the first one I fixed in Firebug, I tried to report the FAQ bug. I could not figure out how to report bugs on dojo or the dojo site. They have a trax site, and I even applied for an account, but I still couldn’t log in. So maybe this blog post will help someone who is searching for information about eval() debugging in dojo.