Firebug 1.2 ‘console’ implementation
in the FF3 beta cycle, Firebug’s 1.1 command line stopped working. The fix for this became quite involved, eventually requiring both the command line and console to be reimplemented. I’ll describe the console first, maybe the command line next time.
The Firebug ‘console’ allows web developers to append text and objects to Firebug’s Console panel. The new version uses element messaging, meaning an element in the web page is used to pass control flow and values to Firebug. Here is how it works.
When the web page loads but before the first Javascript function can be called, Firebug uses the document.createElement() to attach a script tag to the page. That script adds an invisible div element, _firebugConsole, and the console functions. When the web page developer calls console.log("foo");, the log() function
- pushes the string
"foo"onto the console’s array of user objects, - puts the index of the
"foo"object into an attribute of the_firebugConsoleelement, and - dispatches event
firebugAppendConsoleon the element.
All of this is standard DOM operations.
On the Firebug side we’ve added an firebugAppendConsole event listener to the _firebugConsole element. When the event comes in, we just use the attribute of the element to access the user object and write it onto the Firebug Console panel. Firebug accesses the user objects using Firefox’s security wrapper technology to prevent errant web code from entering the extension space.
The current (1.2a13) implementation has one more layer of indirection. The script tag that defines the console isn’t injected on every page load. Instead, a small 5 line getter is defined for the object window.console. The getter loads the console code, thus creating the _firebugConsole element on the first use of the console object.
Thanks to Mike Shaver, Mark Kahn, and Justin Dolske for hints on how to get this to work. If you want to look at the source for the console its here:
April 7th, 2008 at 5:10 am
“The getter loads the console code, thus creating the _firebugConsole element on the first use of the console object.”
So this means Firebug has no performance hit until the console is opened? Which explains why 1.2 no longer provides a ‘disable’ option?
April 7th, 2008 at 12:15 pm
[…] (Via Firebug - Web Development Evolved.) […]
April 7th, 2008 at 2:47 pm
Alas, this is still not working for me in Firefox 3.0b5, FireBug 1.2.0a13X on OSX 10.5.2 (Intel).
I can do stuff like this, which mostly works:
>>> console.log(’logged’);
logged
undefined
>>> Date();
“Mon Apr 07 2008 12:43:01 GMT-0700 (PDT)”
>>> document.getElementById(’topNav’);
But simple variable assignment is broken:
>>> var x = 1;
undefined
>>> x;
ReferenceError: x is not defined source=x; message=x is not defined
…and the good old dollar-function has gone missing:
>>> $(’topNav’);
ReferenceError: $ is not defined source=$(’topNav’); message=$ is not defined#comments (line 21)
April 8th, 2008 at 10:31 am
David, the disable option was removed because Firebug is now disabled always by default.
Frosty, please report bugs to the issues list http://code.google.com/p/fbug/issues/list. Please double check the verision because your example should work.
John.
April 9th, 2008 at 10:27 am
[…] Firebug, the powerful IDE add-on to Firefox that helps in front-end web development, doesn’t work in my Firefox 3 beta 5. The difficulty is documented here. […]
April 9th, 2008 at 11:35 am
John, thanks. I’m still a little puzzled. You say it’s disabled by default, but with the console closed it’s still reporting errors in the status bar for some pages. So it must be enabled, and therefore munching resources, to some extent?
I’m a sporadic user, so don’t want it constantly error checking….
April 9th, 2008 at 12:42 pm
Firebug - Web Development Evolved » Blog Archive » Firebug 1.2 ‘console’ implementation
in the FF3 beta cycle, Firebug’s 1.1 command line stopped working. The fix for this became quite involved, eventually requiring both the command line and console to be reimplemented. I’ll describe the console first, maybe the command line n…
April 18th, 2008 at 2:59 pm
I remember after installing firebug that it asked me if it should be enabled for sites I visited. One time I clicked enable by default, and now it no longer asks me for any site. The problem is, how do you turn it back off?
April 28th, 2008 at 2:59 pm
I agree…the “disable Firebug for […].com” option should return, as the new UI affordances are not clear.
April 29th, 2008 at 6:32 am
Thank you very much guys for reacting so quick on FF 3 releases.
April 30th, 2008 at 3:25 am
I’m developing Greasemonkey scripts with the help of Firebug’s console functions. Now I’ve installed FF3 beta 5 and figured out that the console.log function is not working from the Greasemonkey scripts. Will there be a solution to this?
May 4th, 2008 at 1:49 am
To get console.log in greasemonkey, I set the “show chrome messages” option in the console tab.
At the moment, 1.2 has a working console, but is crashy on javascript errors; and 1.1 does not crash, but doesn’t work with 3.0pre.
May 8th, 2008 at 8:07 am
Outsource SEO India, Economical Cheap SEO Services India, SEO Delhi India, Seo company india, search engine optimization from india, search engine optimization company in delhi, web designing from india, indian web designing company, software development from india, delhi software development company, web promotion india, india web promotion company, web promotion companies in india, erp solutions india, india erp solutions company,crm india,crm solutions india, web syndication company in india,delhi web syndication company,web hosting from india, india web hosting company, swadeshi infosystems