Firebug tutorials?

This is the only tutorial I know of that explains a little, how to use Firebug.

http://michaelsync.net/2007/09/30/firebug-tutorial-script-tab-javascript-debugging

All other information about Firebug I have found tells what Firebug can do, but does not explain in step by step instructions how to use Firebug to debug JavaScript for example.

Does anyone know of any good sources. I could not find any books on Amazon either.

Thanks.

 

Anyone? Or do you not use Firebug.

 

we do but aside from .log / .info methods, and this:

http://getfirebug.com/js.html

what else do you need? there are so many plugins for firebug also..

 

Thanks for the reply.

I guess then that's what I need to know. It's my understanding of JavaScript and how to create and debug that needs to deepen. When I have this, Firebug may make more sense to me.

 

well it's pretty basic really. for the most part you can use firebug as a 'watch' - if you are uncertain on what a certain variable holds or the properties of an object, just log it

for example, if in this code, you get problems with the redirection where you combine a url with the value of a dropdown box, you can use firebug to preview it and see what is being read wrong:

var foo = $("mydropdown").get("value");

$$("a.myclass").each(function(el) {
    var newURL = el.get("href") + "?action=" + foo;
    console.log(newURL);
    el.set("href", newURL);
    console.log(el); // load the whole el, would confirm that the a.myclass selector works and that your anchor has a href property
});

PHP:

you should also consider not using console.log at all because it can remain in production code and will cock ppl on browsers without a console. this is a little wrapper i have written that has proven to be quite popular

var C = {
    // console wrapper
    debug: true, // global debug on|off
    quietDismiss: true, // may want to just drop, or alert instead when false
    log: function() {
        if (!C.debug) return false;

        if (typeof console == 'object' && typeof console.log != "undefined")
            try {
                console.log.apply(this, arguments); // safari's console.log can't accept scope...
            } catch(e) {
                // so we loop instead.
                for (var i = 0, l = arguments.length; i < l; i++)
                    console.log(arguments[i]);
            }
        else {
            if (!C.quietDismiss) {
                var result = "";
                for (var i = 0, l = arguments.length; i < l; i++)
                    result += arguments[i] + " ("+typeof arguments[i]+") ";

                alert(result);
            }
        }
    }
}; // end console wrapper.

// example data and object
var foo = "foo", bar = document.getElementById("divImage");
C.log(foo, bar);
C.debug = false;
C.log("test"); // does nothing.

PHP:

configure and use this whilst developing - use C.log instead of console.log. this way if it does go into production, it wont echo anything to clients or alert on IE (as long as quietDismiss is on)

explained more here:
http://fragged.org/creating-a-wrapp...g-function-for-ie-and-other-browsers_218.html

another use for debugging is setting breakpoints inside of functions. basically look at all scripts source, go to where you suspect you have a problem and set a breakpoint. you can then add a watch - which is basically a variable name and you will see how it is being changed in real time as you step into the functions.

 

Thanks for the info.

I think I understand the basic idea.

By your example it looks like Firebug is also used to check php code too, if I understand this correctly.

I have not yet started learning php. I will keep these examples including that link for future reference.

 

no this is not php, i just use a

 block around my code as it does better syntax highlight than the just [code] and [html]

:)

there's a plugin firePHP for firebug for those that want to use it to debug php

PHP: