jQuery Debugging Plugin

March 16th, 2007 by Ralf S. Engelschall

Recently 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:

  1. 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.
  2. 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.
  3. 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.

21 Responses to “jQuery Debugging Plugin”

  1. Ralf S. Engelschall says:

    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.

  2. TomK32 says:

    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 …

  3. somebody says:

    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.

  4. Ralf S. Engelschall says:

    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.

  5. mark Findlay says:

    I also tried to click on the link in your file repository, but it also prompted me to login. What gives?

  6. Ralf S. Engelschall says:

    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.

  7. Martin says:

    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

  8. Stephen says:

    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?

  9. Ralf S. Engelschall says:

    Martin and Stephen: I’ll look at this issue…

  10. Ralf S. Engelschall says:

    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.

  11. Martin says:

    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

  12. Martin says:

    oh habe noch was übersehen.

    diese zeile

    if (typeof window.console === "undefined") {

    ersetzen durch


    if (typeof window._firebug === "undefined") {

    Gruss Martin

  13. Stephen says:

    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…

  14. Stephen says:

    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…

  15. Martin says:

    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.

  16. uhhhhh says:

    how do i download this? the repository says something about needing to be registered.

  17. Ralf S. Engelschall says:

    Please just click on the “File Repository” link in the BLOG entry. It directs you directly to the files for downloading.

  18. Yaroslav says:

    > 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!

  19. Ralf S. Engelschall says:

    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.

  20. verbatim says:

    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.

  21. Zac says:

    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).

Leave a Reply