jQuery Debugging Plugin
March 16th, 2007 by Ralf S. EngelschallRecently I was forced to debug my jQuery hacks in Internet Explorer (IE). I got extremely tired of having to use the nasty JavaScript alert() function for debugging while in Firefox I can use the cool Firebug plugin and its console.log() function. I thought Firebug is a Firefox/Firebug specific solution only.
But hey! There is a Firebug Lite, which comes to the rescue. It is a small emulation of Firebug and provides console.log() in IE, too. Great. But OTOH one now has to explicitly load the Firebug Lite stuff and for quick debugging an even small and minimal console.log() would be sufficient, too.
Additionally, I really want to combine console.log() and jQuery and use something like $('div#foo').log("some message about foo"), of course.
Features
This jQuery plugin provides the following main features:
- global jQuery method $.debug([true|false])
This is the global jQuery method which can be used to get and set the flag which indicates whether
debugging is enabled or not. The default is the value of the debug attribute of the <html> node or the value false. - global jQuery method $.log(message)
This is the global jQuery method for logging message to either Firebug, Firebug-Lite or the home-brewn minimum Firebug emulation console. - jQuery object method $(…).log([message])
This is the jQuery object method for logging the jQuery items in the jQuery object and optionally the message to either Firebug, Firebug-Lite or the home-brewn minimum Firebug emulation console.
Trivial Example
<div id="test1">TEST1</div>
<div id="test2">TEST2</div>
<script type="text/javascript">
$("console.log").ready(function(){
$.debug(true);
$.log("plain debug message");
$('#test1').log();
$('#test2').log("with message");
});
</script>
Download
This jQuery plugin can be downloaded from the File Repository area.
![Ralf S. Engelschall's Train of Thoughts [.org]](http://trainofthoughts.org/blog/wp-content/themes/tot/tot-img/tot-2-CUT-typo-T.png)
March 17th, 2007 at 9:25 |
There is a similar jQuery debugging plugin at http://jquery.glyphix.com/ in case you are interested in an alternative. It seems to be a little bit weaker, but anyway.
April 5th, 2007 at 7:08 |
Javascript debug Helfer mit JQuery
Ich arbeite ja in letzter Zeit recht viel mit JQuery und wie viele andere debugge ich meine scripts mit der guten alten alert-Function. Aber es gibt ein paar Alternativen die ich aufzeigen will bevor ich dann meine eigene quick’n’dirty Variante …
July 28th, 2007 at 5:30 |
I wanted to download your code and have a see.And then I found I have to login firstly.So,I gave up,because I didn’t gona to login.
July 28th, 2007 at 7:40 |
You don’t have to login. Just follow the above link “File Repository area” and download the files. There is no access control on the files.
July 14th, 2008 at 0:02 |
I also tried to click on the link in your file repository, but it also prompted me to login. What gives?
July 14th, 2008 at 7:01 |
You mean this link here prompts you a login? I don’t understand this. I’ve tried it from multiple browsers and all without any cookies or active sessions and there is no login prompt. It is just CVSTrac on top of the Subversion repository. There is no authentication at all.
August 28th, 2008 at 15:55 |
Hi, ich verwende dein Plugin bereits eine ganze weile. Habe jetzt auf FF3 upgedated und erhalte seitdem jedesmal die Fehlermeldung “window.console is undefined” in der Konsole im Firebug 1.2.0 . Deshalb brechen alle nachfolgenden scripte ab. Wenn ich Firebug aber abschalte funktioniert alles wieder normal.
Irgend welche Ideen?
BTW. das Menu rechts ist mit kleineren (1024) Auflösungen nur teilweise erreichbar, da es vom Bild überdeckt wird.
MfG Martin
August 28th, 2008 at 16:52 |
I can’t read german, but I think I have the same problem as the user above: “window console is undefined” error. FF3 and Firebug 1.2.0 stable.
Any solution?
August 28th, 2008 at 18:18 |
Martin and Stephen: I’ll look at this issue…
August 28th, 2008 at 18:33 |
Martin and Stephen: this is confusing. I’ve tried the jquery.debug.html test under Firefox 3.0.1 with Firebug 1.2.0b15 (the latest versions available of both) and it worked just fine. If I disable Firebug, jquery.debug.js code falls back to its own <div> container for output, if I enable Firebug the logging is done in the Firebug console. And I do not get any “window.console is undefined” messages. Also, if Firebug is available, why should “window.console” be not available. Either you are using a buggy Firebug version or something we overlook happens here. At least I don’t see what jquery.debug.js could do differently.
August 29th, 2008 at 9:36 |
selsamer weise tretet der Fehler nur auf der lokalen Testumgebung auf. Scheint wohl was mit der Geschwindigkeit zu tun haben. Hab jedenfalls das letzte Stück des Scripts etwas umgeschrieben, seit dem funktioniert es. Keine Ahnung warum dies so ist, da es eigentlich keine wirkliche Änderung des Ablaufs ist, scheint aber zu funktionieren für mich. Hier der code:
/* attach a function to each of the Firebug methods */ var names = [ "log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd" ]; var myconsole = {}; for (var i = 0; i < names.length; i++) { myconsole[names[i]] = function(msg) { $('#jQueryDebug') .css("display", $._debug$ == true ? "block" : "none"); $('#jQueryDebug ol') .append('' + object2text(msg) + '').css; $("#jQueryDebug ol li") .css("borderBottom", "1px solid #cccccc") .css("padding", "1px 10px 1px 10px"); } } /* indicate that we are the one who is proving the Firebug interface */ myconsole["jQueryDebug"] = true; window.console = myconsole;Gruss Martin
August 29th, 2008 at 13:51 |
oh habe noch was übersehen.
diese zeile
if (typeof window.console === "undefined") {
ersetzen durch
if (typeof window._firebug === "undefined") {
Gruss Martin
September 2nd, 2008 at 17:24 |
Ralf: Please test it with ht latest Firebug, 1.2.0 (not b15). It’s my setup. I tried Martin’s code, and the error during initialization is gone, but as soon as i try to call the log() method, i get window.console is undefined again.
To make things worse, firebug’s console does not respond to commands any more afterwards…
September 2nd, 2008 at 17:48 |
As Martin suggested, it is definitely a matter of timing. I’ve put the function that starts with
if (typeof window.console === “undefined”) {
in a separate function setup(), and replaced it with
$(document).ready(function () {
//setup();
setTimeout(‘setup()’,100);
});
If I reduce the timeout to small values, or call setup() directly, the console stops working.
Now, if you or anybody could find an elegant workaround…
September 3rd, 2008 at 12:25 |
As i already suggested above :
replace
if (typeof window.console === “undefined”) {
with
if (typeof window._firebug === “undefined”) {
that fixed the problem when calling the log() function. Well at least for me.
October 10th, 2008 at 19:38 |
how do i download this? the repository says something about needing to be registered.
October 11th, 2008 at 8:33 |
Please just click on the “File Repository” link in the BLOG entry. It directs you directly to the files for downloading.
November 6th, 2008 at 16:33 |
> Please just click on the “File Repository” link in the BLOG entry.
> It directs you directly to the files for downloading.
Yes, it directs, and then I click ‘jquery.debug.js’ and there is no link for download, but ‘Not logged in’ instead.
Help!
November 6th, 2008 at 18:04 |
You first have to select the particular version you want to download by clicking on one of the numbers in the “Version” column. Then you can download the file “as is” by clicking onto “Raw” at the right top border.
January 20th, 2010 at 16:38 |
Have you ever tried: DebugBar (http://www.debugbar.com/) and its “Companion.JS”. May or may not be as good as Firebug, but it has helped me.
November 12th, 2010 at 1:06 |
Found this thread after 2 years after a quick search for debugging. :) You can can actually use console.log() in IE 8. You have to open the Web Developer toolbar (Hit f12). As long as the Web Developer toolbar is open, console.log will output to the built in console. In IE 7 and 6 you’re SOL, but the Web Developer toolbar in IE 8 is actually decent (It’s no FireBug or Webkit Web inspector though).