Firebug uses a window.console object, and unfortunately it blows up in Internet Explorer. From what I understand there’s some sort of support in Safari and I’ve even read that the maybe the Yahoo! Developer Network Logger tool may use it some how. But I haven’t used either, so I don’t know. I work on a PC, and test on Safari when I need to — fortunately it typically “just works”.
Bottom line, you can echo things out to the command line by doing the following at step points in your code:
It’s very powerful with string formatting commands and many other features including logging levels, assertions and timers. I’ve really only become obsessed with simply using it as a basic, rudimentary replacement for alert(). But you can do lots more with it.
I’m already expecting to use more, especially having found the excellent example reference here, which is great.
What about Internet Explorer? Introducing FB
Well, it doesn’t support window.console, but I figured you can fake it, right? Why not check for the existance of the object and do something else? I started simple here by simply appending a scrolling div element to the body, after all the page content. I set a few style attributes so that it can hopefully be seen regardless of what type of design you're working with. I guess they could be options, but you could hack the script. Maybe I can make them properties to be passed in the next version.
So, I created a FB object which abstracts window.console into an object literal with a FB.log() method. It doesn’t support even close to the full feature set, and might even be considered a bastardized version, because if you feed it the formatted objects and such, I don’t even know what it’ll do.
I had basic needs, but might expand it at some point. I just like being able to echo the values of things out to the screen, sometimes with messages and so forth. So I set it up so you can pass strings and variables/objects to the FB.log() method in an array.
I also set it up so that you can turn off individual messages, or globally shut off the whole thing. There you go.
FB.log(boolean, array, boolean)
First argument, is a true or false to show that logging event. If you set it to false, the logging event will be safely ignored.
Second argument, the array, is an array of values, expressions, and/or objects which will be concatenated by a join() and output to the logging screen.
Third argument, really only supported in Firefox, enables the console.trace() feature of Firebug. I left it in there because I was using it at one point.
FB.o (Globally Stop Logging)
Basically, if anywhere you set the “o” (for “output”) property to false, it shuts it off, allowing you to optionally leave your debugging code in place and enable it later, perhaps for a staging server, etc.
- FB.o = false;
This will disable the logging anywhere, including in Firebug.
Here’s a example of possible expressions:
- FB.log(1,["loop index:",c,"value:",i[c]])
Here we’re outputting language like “loop one index 0 value ‘bird’” or whatever the value of i[c] is. The expressions are evaluated and concatenated together.
The FB demo screen has a more full-featured example.
- Firebug Documentation
- Whoah! Ok, someone else has done this as well, I haven’t tried this. Firebug Vs. Internet Explorer
Update: Joe Hewitt has introduced Firebug Lite, specifically for non-Firefox browsers. Go Joe.
Possibly Related Articles
commenting closed for this article