JavaScript · Programming

Debugging JavaScript code using Firebug

Firebug is an amazing utility in the hands of JavaScript developers. It provides a lot of features that enables us to analyze and debug out JS code.

Firebug provides functionality using it’s panels and APIs.

Panels

API
There are two types of APIs.

Command line API is for the commands that can be run from Firebug Console panel. Console API can be used directly from the JavaScript code. Note that many methods are common between the two APIs.

Sample use of Firebug API for debugging.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>Javascript Debugging with Firebug</title>
    
    <script type="text/javascript">
    function doSomething()
    {
        var lbl = document.getElementById('messageLabel');
        
        console.time("myTimer"); //mytimer is the timer handle that must be used in timeEnd to get the elapsed time
        
        
        console.profile('Profile report');
        
        for(var i=0;i<10;i++) {
            lbl.innerHTML = "I just did something.";
            
            if(i===0)
            {
                console.log('Log i=%d',i);
                console.error('Error i=%d',i);
                console.info('Info i=%d',i);
                console.warn('warn i=%d',i);
                console.debug('debug i=%d',i);
                
                method1();
            }

        }
        
        console.profileEnd();
        
        
        
        
        console.assert(lbl.innerHTML === 'I just did something.');
        console.assert(lbl.innerHTML === 'I just did something','failed maccha');
        
        console.timeEnd("myTimer"); //mytimer is the timer handle that must be used in timeEnd to get the elapsed time
    }
    
    function method1()
    {
       method2();
    }
    
    function method2()
    {
       console.info('===NOW TRACING===');
       console.trace();
    }
    </script>
    
    </head>
    <body>
        <div>
            <div id="messageLabel"></div>
            <input type="button" value="Click Me!" onclick="doSomething();" />
        </div>
    </body>
</html>

See Also

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s